本篇内容介绍了“vue iview如何实现分页功能”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
子组件
<template> <div > <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>父级件
<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" > <FormItem> <Input v-model="serach_data.customerNumber" placeholder="编号"></Input> </FormItem> </Col> <Col span="3" > <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>“vue iview如何实现分页功能”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！
