Ant Design Vue Pagination分页组件的封装与使用

Ant Design Vue Pagination分页组件 Pagination分页组件封装 2023-05-17 05:05:32 768人浏览独家记忆

摘要

目录Ant Design Vue Pagination分页组件的封装与使用设置ant design vue中的 pagination的最大分页数总结Ant Design Vue Pa

Ant Design Vue Pagination分页组件的封装与使用

今天封装一个常用的组件 Pagination 分页

在这里插入图片描述

因为是 Ant Design Vue 的组件，所以必须安装Ant Design Vue才能使用哦～

使用组件（可参考Ant Design Vue 快速上手）：

$ npm i --save ant-design-vue

第一步：首先创建一个组件文件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 }}条/页</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:"暂无数据"}' 
            :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.页面使用分页组件 -->
             <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 {
        //表格数据：
        columns: [
        {
          title:'序号', 
          customRender: (text, record, index) => `${index + 1}`
        },
        {
          title: '品牌',
          dataindex: 'brand',
          key: 'brand',
          ellipsis: true,
        }
        {
          title: '状态',
          dataIndex: 'statsName',
          key: 'statsName',
          ellipsis: true,
        },
        {
          title: '操作',
          key: 'action',
          scopedSlots: { customRender: 'action' },
        }
      ],
      // pageSizeOptions: ['10', '20', '30', '40', '50'],    //自定义分页
      pagination:{ //分页数据
        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  //列表数据
        this.tableData = list
        this.pagination.totalCount = res.data.result.totalCount  //表格长度
      },
      // 分页改变时调用组件里的方法
      onShowSizeChange(current, pageSize) {
        console.log(current, pageSize);
        this.pagination.current = current
        this.pagination.pageSize = pageSize;
        //改变完 重新渲染数据
        this.getStoreList()
      },
    }
  }    
</script>

<style scoped lang="scss">

</style>

设置ant design vue中的 pagination的最大分页数

Ant Design Vue 中的 pagination 组件有一个 pageSize 属性，用于设置每页显示的数据条数。

同时，还有一个 total 属性，用于设置数据总条数。通过计算可以算出分页数，从而实现设置最大分页数的目的。

代码示例：

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