Vue使用v-model封装el-pagination组件的全过程
更新时间：2021年07月07日 08:37:03 作者：阿拉伯1999
通过封装el-pagination组件开发自定义分页组件的类似文章网上已经有很多了，但看了一圈，总是不如意，于是决定还是自己动手搞一个，对v-model封装el-pagination组件相关知识感兴趣的朋友一起看看吧
使用v-model绑定分页信息对象，分页信息对象包括3个核心属性参数，分页事件直接绑定查询数据的方法，消除父组件的handleSizeChange和handleCurrentChange的绑定事件方法。
1、前言
通过封装el-pagination组件开发自定义分页组件的类似文章网上已经有很多了，但看了一圈，总是不如意，于是决定还是自己动手搞一个。
2、背景
2.1、常规分页处理方法
利用el-pagination组件的常规做法如下：
模板部分：
<el-pagination @size-change="handleSizeChange"
@current-change="handleCurrentChange" :current-page="pageInfo.pagenum"
:page-sizes="[5, 10, 15, 20]" :page-size="pageInfo.pagesize"
layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total"
background>
</el-pagination>
脚本部分：
export default {
data() {
return {
formData : {
//查询信息
queryInfo:{
userType : 0,
deleteFlag: 2, //表示所有类型
pagenum : 1,
pagesize : 10
},
// 用户类型选择框当前选中显示标签值
userTypeLabel : "所有类型",
// 用户状态选择框当前选中显示标签值
userStatusLabel : "所有类型"
},
// 分页信息
pageInfo:{
pagenum : 1,
pagesize : 10,
total : 0
}
}
},
methods: {
// 查询用户信息列表
queryUsers(){
let _this = this;
//console.log(this.pageInfo);
this.formData.queryInfo.pagenum = this.pageInfo.pagenum;
this.formData.queryInfo.pagesize = this.pageInfo.pagesize;
this.instance.queryUsers(
this.$baseUrl,this.formData.queryInfo
).then(res => {
//console.log(res.data);
if (res.data.code == this.global.SucessRequstCode){
//如果查询成功
_this.pageInfo.total = res.data.data.length;
_this.userInfoList = res.data.data;
}else{
alert(res.data.message);
}
}).catch(error => {
alert('查询失败！');
console.log(error);
});
},
// 每页条数改变
handleSizeChange(newSize) {
this.pageInfo.pagesize = newSize;
this.queryUsers();
},
// 当前页码改变
handleCurrentChange(newPage) {
this.pageInfo.pagenum = newPage;
this.queryUsers();
}
}
2.2、问题分析
每个分页查询，都需要这么来一套，有点简单重复，又略有不同，即查询数据的方法会不同。
对于有强迫症的程序猿来说，简单重复的代码无疑非常令人不爽。因此，需要将之组件化。
分析el-pagination分页组件：
- 有三个核心属性参数，分别是：当前页码（current-page）、每页条数（page-size）、总记录条数（total）。核心属性参数通过绑定父组件页面数据，实行双向联动。其中当前页码和每页条数一般通过操作分页子组件来改变，总记录条数通过查询数据后由父组件进行设置。
- 有两个事件：分别是：@size-change（每页条数改变事件）、@current-change（当前页码改变事件）。这两个事件，分别绑定父组件的对应事件处理方法handleSizeChange和handleCurrentChange，两者均调用查询数据的方法，查询数据的方法中，得到结果集后，设置总记录条数。
自定义分页组件的开发目标：消除父组件的handleSizeChange和handleCurrentChange的绑定事件方法。
思路：使用v-model绑定分页信息对象，分页信息对象包括3个核心属性参数，即上述的pageInfo。然后分页事件直接绑定查询数据的方法。
3、方案实施
3.1、自定义分页组件
编写一个自定义分页组件代码，文件为/src/Pagination.vue。代码如下：
<template lang="html">
<div class="pagination">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="pageInfo.pagenum"
:page-size="pageInfo.pagesize"
:page-sizes="pageSizes"
:total="pageInfo.total"
layout="total, sizes, prev, pager, next, jumper"
background >
</el-pagination>
</div>
</template>
<script>
export default {
name : "pagination",
model : {
prop : 'pageInfo',
event : 'change'
},
props : {
// 每页条数选择项
pageSizes: {
type: Array,
default() {
return [5, 10, 15, 20];
}
},
// v-model绑定的数据对象
pageInfo: {
type: Object,
reuqired:true
}
},
data(){
return {
}
},
methods: {
handleSizeChange(newSize) {
var newValue={
pagesize : newSize,
pagenum : newSize <= this.total ? 1 : this.pageInfo['pagenum']
};
this.$emit('change',Object.assign(this.pageInfo,newValue));
this.$emit('pagination');
},
handleCurrentChange(newPage) {
this.$emit('change',Object.assign(this.pageInfo,{pagenum : newPage}));
this.$emit('pagination');
}
}
}
</script>
<style lang="css" scoped>
.pagination {
padding: 10px 0;
text-align: center;
}
</style>
自定义分页组件，名称为pagination，其使用v-model，实现双向数据通信。当页码或每页条数改变时，触发分页事件@pagination，提供与父组件方法绑定。
此处约定了pageInfo的字段结构如下：
pageInfo:{
pagenum : 1, //Number
pagesize : 10, //Number
total : 0 //Number
}
父组件必须提供相同结构的数据对象来绑定组件内部的pageInfo对象。
3.2、注册分页组件
然后注册此分页组件，在main.js中加入下列代码：
import pagination from '@/components/Pagination.vue'
// 注册分页插件
Vue.component('pagination', pagination)
3.3、父组件调用方法
用pagination组件修改前面第二章的代码。
模板部分：
<!-- 分页区域 -->
<pagination v-model="pageInfo" @pagination="queryUsers"></pagination>
脚本部分：
export default {
data() {
return {
formData : {
//查询信息
queryInfo:{
userType : 0,
deleteFlag: 2, //表示所有类型
pagenum : 1,
pagesize : 10
},
// 用户类型选择框当前选中显示标签值
userTypeLabel : "所有类型",
// 用户状态选择框当前选中显示标签值
userStatusLabel : "所有类型"
},
// 分页信息
pageInfo:{
pagenum : 1,
pagesize : 10,
total : 0
}
}
},
methods: {
// 查询用户信息列表
queryUsers(){
let _this = this;
//console.log(this.pageInfo);
this.formData.queryInfo.pagenum = this.pageInfo.pagenum;
this.formData.queryInfo.pagesize = this.pageInfo.pagesize;
this.instance.queryUsers(
this.$baseUrl,this.formData.queryInfo
).then(res => {
//console.log(res.data);
if (res.data.code == this.global.SucessRequstCode){
//如果查询成功
_this.pageInfo.total = res.data.data.length;
_this.userInfoList = res.data.data;
}else{
alert(res.data.message);
}
}).catch(error => {
alert('查询失败！');
console.log(error);
});
}
}
这样，就去掉了handleSizeChange和handleCurrentChange事件响应方法了。分页信息发生改变时，触发绑定的queryUsers方法。
另外，如需调整pageSizes，则在模板处类似如下设置：
:pageSizes=[10,20,30,50,100]
4、参考文章
此组件开发主要参考了下列文章：
Vue+el-pagination二次封装，https://blog.csdn.net/weixin_47259997/article/details/107887823。
vue项目 使用elementui中的el-pagination封装公用分页组件，https://www.jianshu.com/p/e241e5710fb0/。
到此这篇关于Vue使用v-model封装el-pagination组件的全过程的文章就介绍到这了,更多相关v-model封装el-pagination组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了vue使用recorder.js实现录音功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-11-11
这篇文章主要介绍了如何修改vue-treeSelect的高度，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
vue3使用iframe嵌入ureport2设计器,解决预览时NullPointerException异常问题
这篇文章主要介绍了vue3使用iframe嵌入ureport2设计器,解决预览时NullPointerException异常问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
本文主要介绍了如何监听Vue项目报错的4种方式，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了详解vue-router 命名路由和命名视图,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
VUE element上传动态设置action路径和参数的坑及解决
这篇文章主要介绍了VUE element上传动态设置action路径和参数的坑及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
这篇文章主要介绍了vue ssr 指南详读,详细的介绍了什么是SSR以及如何使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
本篇文章主要介绍了详解Vue 全局引入bass.scss 处理方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
这篇文章主要给大家介绍了关于vue通过video.js解决m3u8视频播放格式的方法，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-07-07
这篇文章主要介绍了深入浅出vue图片路径的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
最新评论