后台数据全部返回前端element ui实现前端分页

• View

<template>
  <div class="main-view">
    <div class="btn-view">
      <el-button size="mini" type="primary" @click="downloadClick">导出</el-button>
    </div>
    <div class="table-view">
      <vxe-table
        ref="xTable"
        border
        auto-resize
        highlight-current-row
        :radio-config="{ trigger: 'row' }"
        :start-index="(tablePage.pageNum - 1) * tablePage.pageSize"
        :loading="loading"
        show-overflow
        size="mini"
        :data="tableList"
      >
        <vxe-table-colgroup
          header-align="center"
          align="center"
          title="qqqq"
          header-class-name="fs"
        >
          <vxe-table-column
            type="seq"
            title="序号"
            align="center"
            fixed="center"
          ></vxe-table-column>
          <vxe-table-column
            header-align="center"
            align="center"
            field="orgName"
            label="名称"
            sortable
          ></vxe-table-column>
          <vxe-table-column
            field="datasetCounts"
            header-align="center"
            align="center"
            label="数量"
            sortable
          ></vxe-table-column>
          <vxe-table-column
            field="subCounts"
            header-align="center"
            align="center"
            label="调用次数"
            sortable
          ></vxe-table-column>
        </vxe-table-colgroup>
      </vxe-table>
    </div>
    <div class="pagination-view">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next,jumper"
        :current-page="tablePage.pageNum"
        :page-size="tablePage.pageSize"
        :page-sizes="pageSizes"
        :total="tablePage.total"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      />
    </div>
  </div>
</template>

• Model

<script>
import { getDataDetails } from '@/api/modules/ranking'
import { mapGetters } from 'vuex'

export default {
  name: 'RankTable',
  data() {
    return {
      tableList: [],
      tableData: [],
      loading: false,
      pageSizes: [10, 20, 30],
      tablePage: {
        pageNum: 1, // 第几页
        pageSize: 10, // 每页多少条
        total: 54 // 总记录数
      }
    }
  },
  computed: {
    ...mapGetters(['orgIdentifier'])
  },
  methods: {
    getInfoList(type) {
      const param = {
        orgIdentifier: this.orgIdentifier
      }
      switch (type) {
        case 'a':
          this.getInfo(param)
          break
        default:
          break
      }
    },
    // 省级部门目录数 详情》
    getInfo(param) {
      // '/hall/data-details/'
      getDataDetails(param)
        .then(res => {
          if (res.success) {
            this.tableData = res.data
            this.pageList()
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(error => {
          console.log('抛异常', error)
        })
    },
    // 分页相关
    handlePageChange(currentPage) {
      this.tablePage.pageNum = currentPage
      this.pageList()
    },
    handleSizeChange(pageSize) {
      this.tablePage.pageSize = pageSize
      this.pageList()
    },
    pageList() {
      this.tableList = this.tableData.filter(
        (item, index) =>
          index < this.tablePage.pageNum * this.tablePage.pageSize &&
          index >= this.tablePage.pageSize * (this.tablePage.pageNum - 1)
      )
      this.tablePage.total = this.tableData.length
    },
    downloadClick() {
      console.log('下载暂无接口')
    }
  }
}
</script>

• sass

<style lang="scss" scoped>
.main-view {
  min-height: $size-main-app-min-height;
  box-shadow: $effect-box-main-shadow;
  font-size: $size-main-font-size;
  color: $color-font-black-base;
  padding: 0.2rem;
  .btn-view {
    margin: 0.2rem 0;
    display: flex;
    justify-content: flex-end;
  }

  .pagination-view {
    width: 100%;
    text-align: center;
    margin-top: 40px;
  }
}
/deep/.fs {
  font-size: $size-main-font-size;
  font-weight: bold;
}
</style>