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>

父級件

/*
 * @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" >
          <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如何實現分頁功能”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！