vue iview如何实现分页功能

本篇内容介绍了“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如何实现分页功能”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！