vue前端分页

<div class="pagination-wrapper">
      <span class="total-items">共 {{ projectList.length }} 条</span>

      <el-select
        v-model="pageSize" size="mini" style="width: 100px; margin: 0 10px;" @change="handleSizeChange"
      ><el-option
        v-for="item in pageSizeOptions" :key="item" :label="`${item}条/页`" :value="item"></el-option>
      </el-select>

      <el-pagination
        backgroundsa
        :current-page="currentPage"
        :page-size="pageSize"
        :total="projectList.length"
        layout="prev, pager, next, jumper"
        @current-change="handleCurrentChange"
      />
    </div>

 data(){

定义

      currentPage: 1,  // 当前页码
      showFilesPage: [],
      pageSizeOptions: [5, 10, 20, 50, 100],
      pageSize: 20,

}

methods区域

在获取table的数组所有值值，需要在

getList: debounceWrapper(function () {
      this.loading = true;
      this.btnLoading = true;
      getDetailList(this.queryParams, this.backUrl).then(
        response => {
          console.log('response======',response.data.length);
          this.total = response.data.length;
          this.projectList = response.data;
          this.calcPageData()
          this.loading = false
        }
      );
    }),

    // 前端处理分页
    calcPageData() {
      const begin = (this.currentPage - 1) * this.pageSize
      const end = this.currentPage * this.pageSize
      this.showFilesPage = this.projectList.slice(begin, end)
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.calcPageData()
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.calcPageData()
    },