项目总结-vue分页组件集成

后台管理的大部分页面都需要对数据进行分页显示，但是在每个页面都写分页代码太过冗余，而且当分页出现问题时，需要修改每个页面，所以我集成了一个分页组件，在每个页面直接引用这个组件，就减少了代码的冗余程度，并且需要修改分页时，只需要修改这个组件，这样引用这个组件的每个页面就改变了，就不用再修改那么多页面了。

组件集成

<el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="pageSizes":page-size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="total">
</el-pagination><script>
export default {props: {total:{type:Number,require:true},currentPage:{type:Number,require:false,default(){return 1}},pageSize:{type:Number,require:false,default(){return 10}},pageSizes:{type:Array,require:false,default(){return [10, 20, 50, 100, 200, 300, 400, 500]}}},data() {return {}},methods: {//每页条数改变handleSizeChange(val) {console.log(`每页 ${val} 条`);this.$emit('handleSizeChange',val)},//页数改变handleCurrentChange(val) {console.log(`当前页: ${val}`);this.$emit('handleCurrentChange',val)}}}
</script>

页面引用

<pagination :total="totalCount" :current-page="currentPage" :page-size="pageSize" @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange"></pagination>
<script>
import Pagination from '组件路径'
export default {components:{Pagination},data() {return {//数据分页currentPage: 1,//当前页码totalCount: 1,// 总条数，根据接口获取数据长度(注意：这里不能为空)pageSize: 10,//页面数据显示数量}，},methods:{handleCurrentChange: function (val) {this.$data.currentPage = val;console.log("this.channelId:"+this.channelId);if(this.channelId == ''){this.pageList();}else{this.findByChannelId(this.channelId);}},handleSizeChange: function (val) {this.$data.currentPage = 1;this.$data.pageSize = val;this.pageList();},},
}
</script>

分页效果
可选择每页多少条，可定向跳转到指定页数。

项目总结-vue分页组件集成相关推荐

vue分页组件，可直接使用
分页组件采用的element组件里的封装一下即可全局使用,方便快捷采用的是element组件的扥也组件,需安装element依赖,具体如何安装就不多说了,直接上干货一.在utils新建scroll ...
antd design vue分页组件
我们在使用分页组件的时候可以有两种方法: 第一种是直接用表格()的自定义:pagination属性最方便:如下图所示: 第二种是分页组件这里我总结的是第二种方法的使用,由于是 Ant Design ...
【PPic】项目中重要第三方组件集成打包测试
首先利用各个组件把项目的基础搭建起来,并测试打包等基础功能 1. 利用electron-vue搭建基础项目至于vue-cli这些基础工具就不讲了 vue init simulatedgreg/ele ...
Vue 分页组件的封装
前言这个是基于vue2的分页封装,仿照elementUI而写的组件. 效果如图话不多说,直接上代码 <template><div class="pagination&q ...
Vue3 element-ui实现Pagination分页组件--封装分页
什么是Pagination分页组件? 在 B 端的 web 开发中,分页组件或者叫分页器,是较为常用的控件之一,通常配合表格或列表,实现数据量大的情况下,分页拆解数据的功能. 1.scrollTo和滚 ...
Angular4.0分页组件
自己分装的分页组件,可供学习使用 paging分页组件分页组件的实现原理 1.由父组件传入数据总量 2.分页组件返回当前显示页面,每页显示数量 3.父组件根据分页组件返回的两个值,控制数据的分页显示 ...
iview page分页组件的集成
iview page分页组件的集成今天给大家分享一下iview page分页组件与iview table表格的集成,主要是针对前端集成,整个前端采用vue渲染,首先我们查看一 ...
Vue.js分页组件实现：diVuePagination
为什么80%的码农都做不了架构师?>>> 完整版下载地址:https://gitee.com/dgx/diVuePagination 完整版演示地址:http://dgx.gi ...
vue php 分页组件,基于Vue.js的表格分页组件
有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage.不了解Vue.js的童鞋可 ...

项目总结-vue分页组件集成

项目总结-vue分页组件集成

项目总结-vue分页组件集成相关推荐

最新文章

热门文章