vue iview实现分页功能
作者：周家大小姐.
这篇文章主要为大家详细介绍了vue iview实现分页功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue iview实现分页功能的具体代码，供大家参考，具体内容如下
子组件
<template>
<div style="margin-top: 30px;">
<Page
:total="paginations.total"
show-elevator
show-sizer
:page-size="paginations.pageSize"
:show-total="paginations.showTotal"
:page-size-opts="paginations.pageSizeOpts"
:current="paginations.current"
@on-change="changepage"
@on-page-size-change="pageSizeChange"
></Page>
</div>
</template>
<script>
export default {
name: "page",
props: {
paginations: {
type: Object,
default: {}
}
},
methods: {
changepage(index) {
this.$emit("changepage", index);
},
pageSizeChange(index) {
this.$emit("pageSizeChange",index);
}
}
};
</script>
<style>
</style>父级件
/*
* @Author: mikey.zhaopeng
* @Date: 2019-09-17 10:42:28
* @Last Modified by: mikey.zhaopeng
* @Last Modified time: 2019-09-20 16:06:10
机主流量记录
*/
<template>
<div id="news">
<Form :model="serach_data">
<Row>
<Col span="3">
<FormItem>
<Input v-model="serach_data.Nickname" placeholder="姓名"></Input>
</FormItem>
</Col>
<Col span="3" style="margin-left:1%;">
<FormItem>
<Input v-model="serach_data.customerNumber" placeholder="编号"></Input>
</FormItem>
</Col>
<Col span="3" style="margin-left:1%;">
<Button type="primary" size="default" icon="ios-search" @click="onSerach"></Button>
</Col>
</Row>
</Form>
<Table border :columns="columns6" :data="tableData"></Table>
<pageItem
:paginations="{...paginations}"
@changepage="changepage"
@pageSizeChange="pageSizeChange"
/>
</div>
</template>
<script>
import pageItem from "@/common/PageItem";
import { publicMethod } from "@/common/utils/public";
import { CustomerModule } from "@/utils/api";
export default {
name: "userInfo",
components: {
pageItem
},
data() {
return {
paginations: {
// 初始化信息总条数
total: 15,
// 每页显示多少条
pageSize: 15,
// 每页条数切换的配置
pageSizeOpts: [15, 30, 45, 60, 75],
current: 1, //当前位于哪页
showTotal: true
},
serach_data: {
Nickname: "", //昵称
customerNumber: "" //用户编号
},
columns6: [
{
title: "编号",
key: "Id",
width: 100
},
{
title: "昵称",
width: 160,
render: (h, params) => {
return h(
"div",
{
style: {
display: "flex",
alignItems: "center"
}
},
[
h("img", {
style: {
marginRight: "10px",
width: "30px",
display: "inline-block",
borderRadius: "50%"
},
attrs: {
src: params.row.Avatar, //头像
style: "width: 100px;height: 30px"
}
}),
h("div", [
h(
"div",
{
style: {
marginRight: "5px",
height: "15px"
}
},
params.row.FullName //昵称
)
])
]
);
}
},
{
title: "变动类型", //0.初始化 1.使用 2.充值 3.管理员调整
key: "VolumeType",
render: (h, params) => {
// console.log(params.row);
let VolumeType = "";
switch (params.row.VolumeType) {
case 0:
VolumeType = "初始化";
break;
case 1:
VolumeType = "使用";
break;
case 2:
VolumeType = "充值";
break;
case 3:
VolumeType = "管理员调整";
break;
}
return h(
"div",
{
style: {
display: "flex",
alignItems: "center"
}
},
VolumeType
);
}
},
{
title: "变动流量",
key: "UseVolume"
},
{
title: "变动后总流量",
key: "BalanceVolume"
},
{
title: "变动时间",
key: "AddTime",
render: (h, params) => {
return h(
"div",
{
style: {
display: "flex",
alignItems: "center"
}
},
publicMethod.getTimeData(params.row.AddTime)
);
}
}
],
allTableData: [], //所有表单数据
tableData: []
};
},
methods: {
getPageList(pageIndex = 1, pageSize = 15) {
let serachVal = this.serach_data;
let datas = {
nickname: serachVal.Nickname,
customerNumber: serachVal.customerNumber,
pageIndex: pageIndex,
pageSize: pageSize
};
console.log(datas);
CustomerModule.getCusVolumeLogList(datas).then(res => {
let { Data } = res.data;
console.log(Data);
this.tableData = Data.data;
this.paginations.total = Data.total;
});
},
onSerach() {
//搜索数据
this.getPageList();
},
//切换当前页
changepage(page) {
this.paginations.current = page;
this.getPageList(page, this.paginations.pageSize);
},
//切换每页条数时的回调，返回切换后的每页条数
pageSizeChange(page_size) {
this.paginations.current = 1; //当前页
this.paginations.pageSize = page_size; //所点击的条数,传给一页要显示多少条
this.getPageList(this.paginations.current, page_size);
}
},
mounted() {
this.getPageList();
},
created() {
this.$store.commit("base/updateBreadcumb", {
module: [{ name: "机主" }],
list: [{ name: "机主流量记录", path: "" }]
});
}
};
</script>
<style lang="less" scoped>
// 模态框
.vertical-center-modal {
display: flex;
align-items: center;
justify-content: center;
.ivu-modal {
top: 0;
}
}
</style>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。