怎么使用ant?design?Vue純前端實(shí)現(xiàn)分頁(yè)

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

ant design Vue純前端實(shí)現(xiàn)分頁(yè)功能

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

自己想的一個(gè)簡(jiǎn)單方法

通過(guò)頁(yè)碼改變事件，每頁(yè)數(shù)據(jù)個(gè)數(shù)改變事件，獲取改變后的頁(yè)碼，每頁(yè)條數(shù)，獲取數(shù)組中對(duì)應(yīng)的數(shù)據(jù)。

代碼如下：

html：

<template>
  <div>
    <h4>學(xué)習(xí)文件</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>
    <!-- 分頁(yè) -->
    <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>暫無(wú)文件</p>
    </div>
  </div>
</template>

data：

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

獲取數(shù)據(jù)：

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

methods：

loadData(){
        getAction(this.URL).then((res)=>{
          if(res.success){
            this.dataSource = res.result.records;
          }else{
            this.$message.error(res.message)
          }
        }).finally(()=>{
        //獲取數(shù)據(jù)后調(diào)用一次分頁(yè)方法
          this.changeData(param.current,param.pageSize);//獲取數(shù)據(jù)后調(diào)用一次分頁(yè)方法
        })
      },
      // 頁(yè)碼改變的回調(diào)，參數(shù)是改變后的頁(yè)碼及每頁(yè)條數(shù)
      pageChange(page,pageSize){
        this.changeData(page,pageSize);
      },
      // 下拉選項(xiàng)改變， 參數(shù)是改變后的頁(yè)碼及每頁(yè)條數(shù)
      onShowSizeChange(current, pageSize) {
        this.ipagination.pageSize = pageSize;
        this.changeData(current,pageSize);
      },
      // 分頁(yè)改變時(shí),獲取對(duì)應(yīng)的數(shù)據(jù)，動(dòng)態(tài)改變數(shù)據(jù)
      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;
      }

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

方式二

用computed 屬性計(jì)算

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

ant design vue中分頁(yè)器的使用注意事項(xiàng)

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

正確樣式

錯(cuò)誤樣式

以上就是關(guān)于“怎么使用ant design Vue純前端實(shí)現(xiàn)分頁(yè)”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。