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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易盾网络。