vue v-model 组件,vue 组件model
网上有很多类似的通过封装el-pagination组件开发自定义分页组件的文章，但是看了之后总是不尽如人意，所以我决定自己做一个。和对v-model封装el-pagination组件感兴趣的朋友一起看看吧。
使用v-model绑定分页信息对象，包括三个核心属性参数，分页事件直接绑定查询数据的方法，消除父组件handleSizeChange和handleCurrentChange绑定事件的方法。
1、前言
网上有很多类似的通过封装el-pagination组件开发自定义分页组件的文章，但是看了一圈总是不尽如人意，所以我决定自己做一个。
2、背景
2.1、常规分页处理方法
使用el-pagination组件的一般做法如下：
模板部分：
El-pagination @ size-change= handleSizeChange
@ current-change= handleCurrentChange :current-page= pageinfo . pagenum
:page-size=[5，10，15，20]:page-size= pageinfo . pagesize
layout=total，sizes，prev，pager，next，jumper :total=pageInfo.total
背景
/El-分页
脚本部分：
导出默认值{
data() {
返回{
表单数据：{
//查询信息
查询信息：{
用户类型：0，
DeleteFlag: 2，//表示所有类型
pagenum : 1，
页面大小：10
},
//用户类型选择框当前被选中，显示标签值。
用户类型标签:“所有类型”，
//用户状态选择框当前被选中，显示标签值。
UserStatusLabel:“所有类型”
},
//寻呼信息
页面信息：{
pagenum : 1，
页面大小：10，
总计：0
}
}
},
方法：{
//查询用户信息列表
queryUsers(){
let _ this=this
//console . log(this . pageinfo)；
this . formdata . query info . pagenum=this . pagenfo . pagenum；
this . formdata . query info . pagesize=this . pageinfo . pagesize；
this.instance.queryUsers(
这个。$baseUrl，this.formData.queryInfo
).然后(res={
//console . log(RES . data)；
if(RES . data . code==this . global . successrequstcode){
//如果查询成功
_ this . pageinfo . total=RES . data . data . length；
_ this . userinfolist=RES . data . data；
}否则{
alert(RES . data . message)；
}
}).catch(错误={
警报(查询失败！);
console.log(错误)；
});
},
//每页的文章数量发生变化
handleSizeChange(newSize) {
this . pageinfo . pagesize=newSize；
this . queryusers()；
},
//当前页码发生变化
handleCurrentChange(newPage) {
this . pagenfo . pagenum=new page；
this . queryusers()；
}
}
2.2、问题分析
每个分页查询都需要这个集合，这个集合有点简单重复，但是略有不同，就是查询数据的方法会有所不同。
对于有强迫症的程来说，简单重复的代码无疑是很不愉快的。所以需要组件化。
el-pagination分页组件分析；
有三个核心属性参数，即：当前页面、页面大小和记录总数。核心属性参数绑定到父组件的页面数据，实现双向联动。当前页码和每页页数一般通过操作分页子组件来改变，记录总数由父组件查询数据后设置。
有两个事件：@size-change(页码更改事件)和@current-change(当前页码更改事件)。这两个事件绑定到父组件对应的事件处理方法handleSizeChange和handleCurrentChange，两者都调用数据查询方法。在数据查询方法中，获得结果集后，设置记录总数。
自定义分页组件的开发目标：消除父组件的handleSizeChange和handleCurrentChange的绑定事件方法。
思路：使用v型车绑定分页信息对象，分页信息对象包括3个核心属性参数，即上述的页面信息。然后分页事件直接绑定查询数据的方法。
3、方案实施
3.1、自定义分页组件
编写一个自定义分页组件代码，文件为/src/Pagination.vue。代码如下：
模板语言=html
div class=分页
埃尔分页
@size-change=handleSizeChange
@ current-change= handleCurrentChange
:当前页。sync= pageinfo。页面编号
:page-size=pageInfo.pagesize
:page-size= pageSizes
:total=pageInfo.total
布局=总计，大小，上一页，分页，下一页，跳转
背景
/El-分页
/div
/模板
脚本
导出默认值{
名称：分页，
型号：{
道具： pageInfo ，
事件："更改"
},
道具：{
//每页条数选择项
页面大小：{
类型：数组，
默认(){
return [5，10，15，20]；
}
},
//虚拟模型绑定的数据对象
页面信息：{
类型：对象，
真的
}
},
data(){
返回{
}
},
方法：{
handleSizeChange(newSize) {
var newValue={
页面大小：新闻大小，
pagenum : newSize=this.total？1:这个。pagenfo[ pagenum ]
};
这个. emit(change ，Object.assign(this.pageInfo，new value))；
这个. emit(“分页");
},
handleCurrentChange(newPage) {
这个. emit(change ，object)。分配(这个。pagenfo，{ pagenum:new page }))；
这个. emit(“分页");
}
}
}
/脚本
style lang=css 范围。分页{
填充：10px 0；
文本对齐：居中；
}
/风格
自定义分页组件，名称为分页，其使用v型车，实现双向数据通信。当页码或每页条数改变时，触发分页事件@分页，提供与父组件方法绑定。
此处约定了查看页面信息的字段结构如下：
页面信息：{
pagenum : 1，//Number
页面大小：10，//数字
总计：0//数量
}
父组件必须提供相同结构的数据对象来绑定组件内部的查看页面信息对象。
3.2、注册分页组件
然后注册此分页组件，在主页。射流研究…中加入下列代码：
从" @/components/Pagination.vue "导入分页
//注册分页插件
Vue.component(分页，分页)
3.3、父组件调用方法
用页码组件修改前面第二章的代码。
模板部分：
！-分页区域-
pagination v-model= paginfo @ pagination=查询用户/pagination
脚本部分：
导出默认值{
data() {
返回{
表单数据：{
//查询信息
查询信息：{
用户类型：0,
deleteFlag: 2，//表示所有类型
pagenum : 1，
页面大小：10
},
//用户类型选择框当前选中显示标签值
用户类型标签: 所有类型，
//用户状态选择框当前选中显示标签值
userStatusLabel:所有类型
},
//分页信息
页面信息：{
pagenum : 1，
页面大小：10,
总计：0
}
}
},
方法：{
//查询用户信息列表
queryUsers(){
让这个=这个
//控制台。日志(这个。pageinfo)；
这个。表单数据。查询信息。pagenum=this。pagenfo。pagenum
这个。表单数据。查询信息。页面大小=this。pageinfo。页面大小；
this.instance.queryUsers(
这个. baseUrl，this.formData.queryInfo
).然后(res={
//控制台。日志(研究数据)；
if(参考数据。代码==这个。全球。successrequstcode){
//如果查询成功
_这个。pageinfo。总计=研究数据。数据。长度；
_这个。userinfolist=RES . data。数据；
}否则{
警报(参考数据。消息)；
}
}).接住(错误={
警报(查询失败！);
console.log(错误)；
});
}
}
这样，handleSizeChange和handleCurrentChange事件响应方法将被移除。当分页信息更改时触发绑定的queryUsers方法。
此外，如果您需要调整页面大小，模板中的设置类似于以下内容：
:页面大小=[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组件的整个过程，这篇文章就到这里了。有关封装el-pagination组件的v-model的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。