element 前端部门选人组件-左树中表右候选（前端分页）

在做后台管理中，有选人组件的需求，一个弹窗，左边是部门树，中间是部门的人员表格，右侧是选中的人，弹框打开时请求一次数据，前端做分页，全选，经过几番折腾，例子如下：

• el-table data属性：

 :data="list.slice((page.currentPage-1)*page.pageSize,page.currentPage*page.pageSize)"

• 分页：

 <el-pagination class="fr m-t-20 m-b-20"
                background
                layout="total, sizes, prev, pager, next, jumper"
                :current-page="page.currentPage"
                :total="list.length"
                :page-sizes="[10,20,50,100]"
                :page-size="page.pageSize"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange">
</el-pagination>

• data：

  list:[]
  page: {
        total: 1, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10, // 每页显示多少条,
        isAsc: false // 是否倒序
      },
      

• methods：

    getList(page, params) {
      this.listLoading = true
      fetchList(
        Object.assign(
          {
            current: page.currentPage,
            size: 9999 // 任意，暂定9999条
          },
          params,
          this.searchForm
        )
      ).then(response => {
        // console.log('表格数据===', response)
        this.list = response.data.data.records
        this.page.total = response.data.data.total
        this.listLoading = false
      })
    },
     // 页大小改变
    handleSizeChange(val) {
      this.page.pageSize = val
      this.page.currentPage = 1
    },
    // 当前页改变
    handleCurrentChange(val) {
      this.page.currentPage = val
    },

效果：从后端获取一次数据，翻页不再请求