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 相关文章推荐
浅析VUE防抖与节流
Nov 24 Vue.js
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
vue element实现表格合并行数据
Nov 30 Vue.js
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
vue.js watch经常失效的场景与解决方案
Jan 07 Vue.js
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
详解vue3中组件的非兼容变更
Mar 03 Vue.js
如何理解Vue简单状态管理之store模式
May 15 Vue.js
vue2实现provide inject传递响应式
May 21 Vue.js
vue实现移动端div拖动效果
Mar 03 Vue.js
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 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+MySQL投票系统的设计和实现分享
2012/09/23 PHP
Laravel中unique和exists验证规则的优化详解
2018/01/28 PHP
PHP ADODB生成下拉列表框功能示例
2018/05/29 PHP
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
2007/12/08 Javascript
实现png图片和png背景透明(支持多浏览器)的方法
2009/09/08 Javascript
Javascript 日期处理之时区问题
2009/10/08 Javascript
js原型继承的两种方法对比介绍
2014/03/30 Javascript
javascript实现框架高度随内容改变的方法
2015/07/23 Javascript
js监听html页面的上下滚动事件方法
2018/09/11 Javascript
JS左右无缝轮播功能完整实例
2019/05/16 Javascript
如何通过shell脚本自动生成vue文件详解
2019/09/10 Javascript
JS Array.from()将伪数组转换成数组的方法示例
2020/03/23 Javascript
js实现随机点名器精简版
2020/06/29 Javascript
react-native 实现购物车滑动删除效果的示例代码
2021/01/15 Javascript
浅析Python的Django框架中的Memcached
2015/07/23 Python
python制作爬虫爬取京东商品评论教程
2016/12/16 Python
python实现逆序输出一个数字的示例讲解
2018/06/25 Python
python简单验证码识别的实现方法
2019/05/10 Python
Python应用领域和就业形势分析总结
2019/05/14 Python
简单了解django索引的相关知识
2019/07/17 Python
浅析Python+OpenCV使用摄像头追踪人脸面部血液变化实现脉搏评估
2019/10/17 Python
详解css3使用transform出现字体模糊的解决办法
2020/10/16 HTML / CSS
英国内衣连锁店:Boux Avenue
2018/01/24 全球购物
毕业生造价工程师求职信
2013/10/17 职场文书
会计实习生自我鉴定
2013/12/12 职场文书
大学生职业生涯规划书的基本内容
2014/01/06 职场文书
婚前协议书
2014/04/15 职场文书
2014年光棍节活动策划方案(创意集锦)
2014/09/29 职场文书
社区党员群众路线教育实践活动心得体会
2014/11/03 职场文书
2014年前台接待工作总结
2014/12/05 职场文书
2015年医德考评自我评价
2015/03/03 职场文书
教师读书活动心得体会
2016/01/14 职场文书
汽车销售合同文本
2019/08/08 职场文书
mybatis源码解读之executor包语句处理功能
2022/02/15 Java/Android
详解Python内置模块Collections
2022/03/22 Python
基于Python实现西西成语接龙小助手
2022/08/05 Golang