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测试数据mit("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实现分页功能的详细内容...