vue封装组件步骤,vue后端分页
这篇文章主要为大家详细介绍了某视频剪辑软件分页组件的封装方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
前言
这个是基于vue2的分页封装，仿照elementUI而写的组件。
效果如图
话不多说，直接上代码
模板
div class=分页
！-总页数-
div class=合计共{{总计}}条/div
！-选择每页的条数-
select name= id= size _ select v-model= size @ change= size change
选项v-for=页面大小中的项目：key=“item”:value=“item”
{{ item }}条/页
/选项
/选择
div class=pagenum
！-上一页-
埃尔按钮
icon= El-icon-向左箭头
:disabled=backDisabled
圆
@click=back
/el-button
！-页码-
保险商实验所
里
:class=currentPage==item？活动":"。
页次中的v-for=(项目，索引
:key=index
@ click=首页(项目)
{{ item }}
/李
/ul
！-下一页-
埃尔按钮
icon=el-icon-arrow-right
:disabled=forwardDisabled
圆
@click=forward
/el-button
/div
/div
/模板
脚本
导出默认值{
名称：分页，
道具：{
总计：{ //总数
类型：null，
必填：真，
},
页面大小：{ //可选择的每页条数
类型：数组，
},
页面大小：{ //每页显示的条数
类型：数量，
必填：真，
},
当前页面：{ //当前页
类型：数量，
必填：真，
},
},
data() {
返回{
大小：this.pageSize，//接收小道具传来的页面大小
nowPage: this.currentPage，//接收小道具传来的当前页面
};
},
计算值：{
allPage() { //计算所有的页数
返回数学。ceil(这个。总计/本。pagesize)；
},
backDisabled() { //是否禁用上一页
返回这个。当前页面==1；
},
forwardDisabled() { //是否禁用下一页
归还这个。当前页面==this。所有页面；
},
pagenum() { //计算显示不同的页
如果(这个。全页-这个。现在第6页){//
如果(this.nowPage 6) {
返回[
1,
.,
this.nowPage - 2，
this.nowPage - 1，
this.nowPage，
现在第一页，
现在是第二页，
.,
this.allPage，
];
}否则{
如果(this . all第8页){
return [1，2，3，4，5，6，.，这个。所有页面]；
}否则{
返回这个。所有页面；
}
}
}否则{
如果(this.nowPage 6) {
返回这个。所有页面；
}否则{
返回[
1,
.,
this.allPage - 5，
this.allPage - 4，
this.allPage - 3，
this.allPage - 2，
this.allPage - 1，
this.allPage，
];
}
}
},
},
方法：{
sizeChange() { //每页限制条数改变触发事件
这个. emit(sizeChange ，这个。尺码)；
},
forward() { //点击下一页
这个. emit(currentChange ，(this。现在page=1))；
},
back() { //点击上一页
这个. emit(currentChange ，(this。现在page-=1))；
},
首页(val){//点击页数
if (val== . ) {
控制台。日志(2)；
}否则{
这个。现在page=val
这个. emit(currentChange ，val)；
}
},
},
};
/脚本
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。