怎么使用ant?design?Vue純前端實現分頁

這篇“怎么使用ant design Vue純前端實現分頁”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“怎么使用ant design Vue純前端實現分頁”文章吧。

ant design Vue純前端實現分頁功能

(有選擇的話最好讓后端分頁，前端分頁可能會有問題，為了性能，盡量不要前端分頁)

自己想的一個簡單方法

通過頁碼改變事件，每頁數據個數改變事件，獲取改變后的頁碼，每頁條數，獲取數組中對應的數據。

代碼如下：

html：

<template>
  <div>
    <h4>學習文件</h4>
    <div class="videoMain" v-if="dataSourceList.length">
      <div class="videoBox" v-for="item in dataSourceList" :key="item.index">
        <a-tooltip placement="top">
          <template slot="title">
            {{item.name}}
          </template>
          <a class="ellipsis" :href="item.VUrl" rel="external nofollow" >{{item.name}}</a>
        </a-tooltip>
      </div>
    </div>
    <!-- 分頁 -->
    <div  v-if="dataSourceList.length">
     <a-pagination size="small" 
        :total="ipagination.total" 
        v-model="ipagination.current"
        show-size-changer 
        show-quick-jumper 
        :page-size-options="ipagination.pageSizeOptions"
        :page-size="ipagination.pageSize"
        @change="pageChange"
        @showSizeChange="onShowSizeChange"
        :show-total="ipagination.showTotal" />
    </div>
    <div class="nullError" v-else>
      <p>暫無文件</p>
    </div>
  </div>
</template>

data：

data() {
      return {
        description: '文件列表組件',
        dataSource:[], //獲取的數據
        dataSourceList:[],//分頁后的數據
        /* 分頁參數 */
        ipagination:{
          current: 1,//當前頁數
          pageSize: 6,
          pageSizeOptions: ['6', '10','20','30', '50'],
          showTotal: (total, range) => {
            return range[0] + "-" + range[1] + " 共" + total + "條"
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
      };
    },

獲取數據：

created() {
    this.loadData(); ///獲取數據的方法
},

methods：

loadData(){
        getAction(this.URL).then((res)=>{
          if(res.success){
            this.dataSource = res.result.records;
          }else{
            this.$message.error(res.message)
          }
        }).finally(()=>{
        //獲取數據后調用一次分頁方法
          this.changeData(param.current,param.pageSize);//獲取數據后調用一次分頁方法
        })
      },
      // 頁碼改變的回調，參數是改變后的頁碼及每頁條數
      pageChange(page,pageSize){
        this.changeData(page,pageSize);
      },
      // 下拉選項改變， 參數是改變后的頁碼及每頁條數
      onShowSizeChange(current, pageSize) {
        this.ipagination.pageSize = pageSize;
        this.changeData(current,pageSize);
      },
      // 分頁改變時,獲取對應的數據，動態改變數據
      changeData(page,pageSize){
        var p = (page - 1)*pageSize;
        var pSize = page*pageSize;
        var dataSourceList = [];
        this.dataSource.forEach((item,index)=>{
          if(p<= index && index< pSize){
            dataSourceList.push(item)
          }
        })
        this.dataSourceList = dataSourceList;
      }

主要是后面幾個方法，changeData是改變的具體方法。

方式二

用computed 屬性計算

  computed: {
    TableData() {
      return this.teacherList.slice(
        (this.pagination.page - 1) * this.pagination.limit,
        this.pagination.page * this.pagination.limit
      );
    },
  },

ant design vue中分頁器的使用注意事項

1. 輸入defaultPageSize: '5',pageSizeOptions: ['5', '10', '15', '20']等時，需要是String的形式，否則只會展示具體數字，而不是以5條/頁的形式

正確樣式

錯誤樣式

以上就是關于“怎么使用ant design Vue純前端實現分頁”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。