vue项目实现分页效果


Posted in Vue.js onMarch 24, 2021

1.这里我们使用element-ui来实现,先使用npm安装

npm i element-ui -S

2.在main.js中全局引入

import ElementUI from "element-ui"
import 'element-ui/lib/theme-chalk/index.css'
 
Vue.use(ElementUI) //将element-ui挂在到全局

3.封装组件

<template>
 <div class="block">
 <el-pagination
  @current-change="handleCurrentChange"
  :current-page="currentPage"
  :page-size="6"   
  layout="prev, pager, next, jumper"
  :total="total"
  :pager-count="5"
 >
 </el-pagination>
 </div>
</template>
 
<script>
export default {
 props: ["num", "page"], //传入的总条数,和页码
 data() {
 return {};
 },
 computed: {
 currentPage: function() {
  return this.page;
 },
 total: function() {
  return this.num;
 }
 },
 methods: {
 handleSizeChange(val) {
  this.$emit("size-change", val);
 },
 handleCurrentChange(val) {
  this.$emit("current-change", val);
 }
 }
};
</script>
 
<style>
.block {
 text-align: right;
 /* width: 100%; */
}
</style>

4.引入组件并使用

<template>
 <div class="mobild">
  <div>
  <ATablePaging
   :num="num"
   :page="page"
   @current-change="(val) => { 
   page = val;
   list();
   }"
  ></ATablePaging>
  </div>
 </div>
</template>
 
<script>
import ATablePaging from "../paging"; //引入分页组件
export default {
 data() {
 return {
  page:"", //当前页码
  num: 1, //内容总条数
 };
 },
 methods: {
 list() {
  //发送的http请求 
  //后端返回的总页数等于num
 },
 },
 mounted() {
 this.news();
 },
 components: {
 ATablePaging
 }
};
</script>
 
<style scoped>
</style>

 

Vue.js 相关文章推荐
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 Vue.js
vue-drawer-layout实现手势滑出菜单栏
Nov 19 Vue.js
Vue实现图书管理小案例
Dec 03 Vue.js
Vue实现点击当前行变色
Dec 14 Vue.js
Vue ​v-model相关知识总结
Jan 28 Vue.js
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 Vue.js
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 Vue.js
如何理解Vue简单状态管理之store模式
May 15 Vue.js
Vue3中toRef与toRefs的区别
Mar 24 Vue.js
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
vue+elementUI实现表格列的显示与隐藏
Apr 13 Vue.js
vue实现倒计时功能
Mar 24 #Vue.js
vue 中 get / delete 传递数组参数方法
Mar 23 #Vue.js
使用Vue.js和MJML创建响应式电子邮件
vue+flask实现视频合成功能(拖拽上传)
Mar 04 #Vue.js
vue打开新窗口并实现传参的图文实例
Mar 04 #Vue.js
Vue-router编程式导航的两种实现代码
Mar 04 #Vue.js
手写Vue2.0 数据劫持的示例
Mar 04 #Vue.js
You might like
PHP实现的汉字拼音转换和公历农历转换类及使用示例
2014/07/01 PHP
浅析PHP中Session可能会引起并发问题
2015/07/23 PHP
PHP数据分析引擎计算余弦相似度算法示例
2017/08/08 PHP
Yii Framework框架开发微信公众平台示例
2020/04/26 PHP
phpmyadmin在宝塔面板里进不去的解决方案
2020/07/06 PHP
google地图的路线实现代码
2009/08/20 Javascript
JQueryEasyUI datagrid框架的进阶使用
2013/04/08 Javascript
关于query Javascript CSS Selector engine
2013/04/12 Javascript
使用POST方式弹出窗口的两种方法示例介绍
2014/01/29 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
2015/05/14 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
2015/11/25 Javascript
简单实现JS对dom操作封装
2015/12/02 Javascript
jQuery中cookie插件用法实例分析
2015/12/04 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
2017/07/12 Javascript
Puppeteer环境搭建的详细步骤
2018/09/21 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
2018/11/05 Javascript
js实现数字滚动特效
2019/12/16 Javascript
python实现从字符串中找出字符1的位置以及个数的方法
2014/08/25 Python
python匹配两个短语之间的字符实例
2018/12/25 Python
pyhanlp安装介绍和简单应用
2019/02/22 Python
python3的url编码和解码,自定义gbk、utf-8的例子
2019/08/22 Python
Numpy中对向量、矩阵的使用详解
2019/10/29 Python
tensorflow之自定义神经网络层实例
2020/02/07 Python
Python pickle模块常用方法代码实例
2020/10/10 Python
英国顶级家庭折扣店:The Works
2017/09/06 全球购物
中东地区为妈妈们提供一切的头号购物目的地:Sprii
2018/05/06 全球购物
红旗团支部事迹材料
2014/01/27 职场文书
大二学生职业生涯规划书
2014/02/05 职场文书
《燕子》教学反思
2014/02/18 职场文书
《穷人》教学反思
2014/04/08 职场文书
2015年音乐教学工作总结
2015/07/22 职场文书
网吧管理制度范本
2015/08/05 职场文书
Redis IP地址的绑定的实现
2021/05/08 Redis
如何将JavaScript将数组转为树形结构
2021/06/02 Javascript
MySQL的Query Cache图文详解
2021/07/01 MySQL
Python+pyaudio实现音频控制示例详解
2022/07/23 Python