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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)