vue前端分页功能怎么实现,vue如何实现分页
这篇文章主要为大家详细介绍了vueiview实现分页功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue iview实现分页功能的具体代码，供大家参考，具体内容如下
子组件
模板
div style= margin-top:30px；
页
:total=paginations.total
演出电梯
显示尺寸仪
:page-size=分页。页面大小
:show-total= paginations。显示总计
:page-size-opts= paginations。页面大小选项
:current=paginations.current
@on-change=changepage
@ on-page-size-change= pageSizeChange
/页面
/div
/模板
脚本
导出默认值{
名称：页面，
道具：{
分页：{
类型：对象，
默认值：{}
}
},
方法：{
变更页面（索引){
这个. emit(changepage ，index)；
},
页面大小更改(索引){
这个. emit(pageSizeChange ，index)；
}
}
};
/脚本
风格
/风格
父级件
/*
* @作者：mikey .赵鹏
* @日期：2019-09-17 10:42:28
* @最后修改人：mikey .赵鹏
* @最后修改时间：2019-09-20 16:06:10
机主流量记录
*/
模板
div id=新闻
表单：model=搜索数据
排
Col span=3
表单项
输入v模型=搜索_数据。昵称"占位符="姓名/输入
/FormItem
/Col
col span= 3 style= margin-left:1%；
表单项
输入v-model= serach _ data。客户编号 placeholder=编号/输入
/FormItem
/Col
col span= 3 style= margin-left:1%；
Button type= primary size= default icon= IOs-search @ click= on search /Button
/Col
/行
/表单
表格边框：columns= columns 6 :data= tableData /Table
页面项目
:paginations={.分页}
@changepage=changepage
@ pageSizeChange= pageSizeChange
/
/div
/模板
脚本
从" @/common/PageItem "导入pageItem
从" @/common/utils/public "导入{公共方法}；
从" @/实用工具/api "导入{客户模块}；
导出默认值{
名称：用户信息，
组件：{
页面项目
},
data() {
返回{
分页：{
//初始化信息总条数
总数：15,
//每页显示多少条
页面大小：15,
//每页条数切换的配置
pageSizeOpts: [15，30，45，60，75]，
电流：1,//当前位于哪页
showTotal: true
},
搜索数据：{
昵称： ,//昵称
客户编号： //用户编号
},
第6列：[
{
标题： 编号，
密钥：“Id”，
宽度：100
},
{
标题： 昵称，
宽度：160,
render: (h，params)={
返回h(
div ，
{
风格：{
显示："伸缩",
对齐项目："中心"
}
},
[
h(img ，{
风格：{
右边距：“10px”，
宽度：“30px”，
显示："内嵌块",
borderRadius:“50%”
},
属性：{
src: params.row.Avatar，//头像
样式：宽度：100像素高度：30px
}
}),
h(div ，[
h(
div ，
{
风格：{
右边距：“5px”，
高度：“15px”
}
},
params.row.FullName //昵称
)
])
]
);
}
},
{
标题： 变动类型, //0.初始化1.使用2.充值3.管理员调整
密钥："卷类型",
render: (h，params)={
//控制台。日志(参数。排)；
设VolumeType=
开关(params.row.VolumeType) {
案例0:
VolumeType=初始化；
打破；
案例1:
VolumeType=使用；
打破；
案例二：
VolumeType=充值；
打破；
案例三：
VolumeType=管理员调整；
打破；
}
返回h(
div ，
{
风格：{
显示："伸缩",
对齐项目："中心"
}
},
卷类型
);
}
},
{
标题： 变动流量，
按键："使用音量"
},
{
标题： 变动后总流量，
按键："平衡音量"
},
{
标题： 变动时间，
键："添加时间",
render: (h，params)={
返回h(
div ，
{
风格：{
显示："伸缩",
对齐项目："中心"
}
},
公共方法。gettime数据(参数。划。添加时间)
);
}
}
],
allTableData: []，//所有表单数据
表数据：[]
};
},
方法：{
getPageList(pageIndex=1，pageSize=15) {
设sera chval=this。sera ch _ data
让数据={
外号：serachVal .昵称，
客户编号：serachVal.customerNumber，
pageIndex: pageIndex，
页面大小：页面大小
};
console.log(数据);
客户模块。getcusvolumeloglist(datas).然后(res={
设{ Data }=res.data
console.log(数据);
这个。表数据=数据。数据；
这个。分页。总计=数据。总计；
});
},
onSerach() {
//搜索数据
这个。获取page list()；
},
//切换当前页
changepage(page) {
这个。分页。current=page
this.getPageList(page，this。分页。pagesize)；
},
//切换每页条数时的回调，返回切换后的每页条数
pageSizeChange(page_size) {
这个。分页。电流=1；//当前页
这个。分页。pagesize=page _ size//所点击的条数，传给一页要显示多少条
这个。获取页面列表(this。分页。当前，page _ size)；
}
},
已安装(){
这个。获取page list()；
},
已创建(){
这个100美元商店。提交( base/updateBreadcumb ，{
模块：[{名称： 机主 }],
列表：[{ name:机主流量记录，路径： }]
});
}
};
/脚本
style lang=less 范围
//模态框。垂直居中模式{
显示器：flex
对齐-项目：居中；
对齐-内容：居中；ivu-modal {
top:0；
}
}
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。