怎么使用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纯前端实现分页”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。