Ant?Design?Vue?Pagination分頁(yè)組件的封裝與使用

更新時(shí)間：2023年04月21日 08:44:52 作者：最初都是小白

這篇文章主要介紹了Ant?Design?Vue?Pagination分頁(yè)組件的封裝與使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

Ant Design Vue Pagination分頁(yè)組件的封裝與使用

今天封裝一個(gè)常用的組件 Pagination 分頁(yè)

在這里插入圖片描述

因?yàn)槭?Ant Design Vue 的組件，所以必須安裝Ant Design Vue才能使用哦～

$ npm i --save ant-design-vue

第一步：首先創(chuàng)建一個(gè)組件文件Pagination.vue ，完整代碼：

<template>
  <div class="mz-antd-pagination">
     <a-pagination
      v-model="current"
      :page-size-options="pageSizeOptions"
      :total="total"
      show-size-changer
      :page-size="pageSize"
      @showSizeChange="onShowSizeChange"
      >
      <template slot="buildOptionText" slot-scope="props">
        <span>{{ props.value }}條/頁(yè)</span>
      </template>
    </a-pagination>
  </div>
</template>

<script>
export default {
  props: {
    total:{
      type: Number,
      default: 0
    }, 
    pageSizeOptions: {
      type: Array,
      default() {
        return ['10', '20', '30', '40', '50'];
      }
    },
  },
  data() {
    return {
      pageSize: 10,
      current: 1
    };
  },
  mounted() {
  
  },
  methods: {
    onShowSizeChange(current, pageSize) {
      this.pageSize = pageSize;
      this.current = current;
      this.$emit('onShowSizeChange', current, pageSize);
    }
  },
  watch: {
    current(val) {
      this.$emit('onShowSizeChange', val, this.pageSize);
    },
  },
};
</script>

<style lang="scss" scoped>
  .mz-antd-pagination{
    .ant-pagination {
      text-align: right !important;
      margin-top: 20px !important;
    }
  }
</style>

第二步：使用方法

<template>
  <div class="merchandise-news">
     <Breadcrumb :routes='routes'></Breadcrumb>
      <div class="goods-info">
          <div class="table-list">
           <!-- 表格 -->
            <a-table 
            :columns="columns" 
            :data-source="tableData" 
            :locale='{emptyText:"暫無(wú)數(shù)據(jù)"}' 
            :pagination="false"
            :scroll="{ x: 1300 }">
             <!-- <span slot="action" slot-scope="text, record">
                <a-button type="link" @click="goEditPage(record)">編輯</a-button>
              </span> -->
            </a-table>
             <!-- 3.頁(yè)面使用分頁(yè)組件 -->
             <Pagination 
              v-model="pagination.current"
              :total="pagination.totalCount"
              show-size-changer
              :page-size="pagination.pageSize"
              @onShowSizeChange="onShowSizeChange"
              ></Pagination>
            
          </div>
      </div>
  </div>    
</template>

<script>
  import Pagination from "@/components/MzAntD/Pagination";  //1. 引入 Pagination.vue 組件，注意路徑哦～
   import { getBaseStoreList} from "@/api/storeSmart/baseInfo"
   export default {
    data() {
      return {
        //表格數(shù)據(jù)：
        columns: [
        {
          title:'序號(hào)', 
          customRender: (text, record, index) => `${index + 1}`
        },
        {
          title: '品牌',
          dataIndex: 'brand',
          key: 'brand',
          ellipsis: true,
        }
        {
          title: '狀態(tài)',
          dataIndex: 'statsName',
          key: 'statsName',
          ellipsis: true,
        },
        {
          title: '操作',
          key: 'action',
          scopedSlots: { customRender: 'action' },
        }
      ],
      // pageSizeOptions: ['10', '20', '30', '40', '50'],    //自定義分頁(yè)
      pagination:{ //分頁(yè)數(shù)據(jù)
        current : 1,
        pageSize: 10,
        totalCount:500
      },
    

      }
    },
    components:{
     Pagination    //2. 在components中定義Pagination
    }, 
    mounted(){
      this.getStoreList()
    },
    methods:{
      // 獲取列表
      async getStoreList(){
        let param = {
          pageNo:this.pagination.current,
          pageSize: this.pagination.pageSize
        };
        let res = await getBaseStoreList(param);
         let list = res.data.result.list  //列表數(shù)據(jù)
        this.tableData = list
        this.pagination.totalCount = res.data.result.totalCount  //表格長(zhǎng)度
      },
      // 分頁(yè)改變時(shí)調(diào)用組件里的方法
      onShowSizeChange(current, pageSize) {
        console.log(current, pageSize);
        this.pagination.current = current
        this.pagination.pageSize = pageSize;
        //改變完 重新渲染數(shù)據(jù)
        this.getStoreList()
      },
    }
  }    
</script>

<style scoped lang="scss">

</style>

設(shè)置ant design vue中的 pagination的最大分頁(yè)數(shù)

Ant Design Vue 中的 pagination 組件有一個(gè) pageSize 屬性，用于設(shè)置每頁(yè)顯示的數(shù)據(jù)條數(shù)。

同時(shí)，還有一個(gè) total 屬性，用于設(shè)置數(shù)據(jù)總條數(shù)。通過(guò)計(jì)算可以算出分頁(yè)數(shù)，從而實(shí)現(xiàn)設(shè)置最大分頁(yè)數(shù)的目的。

代碼示例：

<a-pagination
? :total="total"
? :pageSize="pageSize"
? @change="handlePageChange"
/>
?
<script>
export default {
? data() {
? ? return {
? ? ? total: 100,
? ? ? pageSiz