利用elementui的el-table实现跨页保存单击勾选状态和全选状态（在前端分页）

思路: 从接口获取全部数据，前端完成分页数据展示，利用el-table自身的方法实现跨页保存单击勾选状态，自己实现el-table跨页保存全选状态方法。

第一步，前端分页，从接口获取全部数据

所以不要给后端传递pageSize和currentPage参数

第二步，用slice分割当前页码要显示的数据

代码：

:data="tableData.slice((currentPage-1)*pagesize, currentPage*pagesize)"

备注:tableData为表格绑定的数据源，currentPage为当前页码,pagesize为每页的数据条数

第三步，添加row-key和reserve-selection

利用el-table自身能够跨页保存勾选状态(非全选)。
(做完这一步，表格即可实现跨页保存单击勾选状态。)

代码：

 :row-key="(row)=>{ return row.groupId}"
  <el-table-column :reserve-selection="true"  type="selection" />

备注：row.groupId为表格每行数据的唯一标识(ID)，请根据实际id替换。

第四步（为el-table全选添加跨页状态保存）

添加一个变量，保存勾选的数据

代码：

selectedLeftTableIds: [],//保存表格勾选的数据

为表格el-table添加全选监听事件和单击勾选监听事件

代码：

@select-all="selectSingleTableAll"
@selection-change="tableSelection"

具体代码实现(你需要写在methods: { }里)：

    // 表格多选
    tableSelection: function (item) {
      this.selectedLeftTableIds = item  //获取当前表格全部的勾选数据
      // console.log('实际勾选数据this.selectedLeftTableIds：', this.selectedLeftTableIds)
    },
    //表格全选
    selectSingleTableAll: function (selection) {
      //获取当前页码所显示的数据
      let a = this.tableData.slice((this.currentPage - 1) * this.pagesize,
        this.currentPage * this.pagesize)
      //获取当前页勾选的数据
      let b = selection
      // 判断是取消全选还是全选
      let isLeftTableAllSelectStatus = b.every(val => a.includes(val));
      // 如果表格总数据长度大于当前pageSize（说明此时页面表格数据超过了1页）
      // 如果小于一页，说明不需要多费心思用代码去实现勾选了
      if (this.tableData.length > this.pagesize) {
        if (isLeftTableAllSelectStatus == true) {  //从非全选状态切换成了全选状态
          this.againDrawTableTick(true)
        } else {  //从全选状态切换成了非全选状态
          this.againDrawTableTick(false)
        }
      }
    },
    //重新绘制表格勾选状态
    againDrawTableTick: function (flag) {
      //重新渲染勾选
      if (!this.selectedLeftTableIds.length || !this.selectedLeftTableIds.length > 0) return  // 数组长度不大于0说明没有需要勾选的行数据
      if (flag == true) {
        // tabData重新赋值，都会触发重新渲染，所以要$nextTick等一个新的table
        this.$nextTick(() => {
          this.tableData
            .forEach(item => {
              this.$refs.singleTable.toggleRowSelection(item, true)
            })
        })
      } else {
        this.$nextTick(() => {
          this.tableData
            .forEach(item => {
              this.$refs.singleTable.clearSelection()
            })
        })
      }
    },

记得表格勾选渲染要放在 this.$nextTick里面！否则会出现执行了toggleRowSelection，但是页面没看到勾选效果。

总结：

1.从接口拿到全部数据，前端分页
2.添加row-key和reserve-selection，利用el-table自身能够跨页显示勾选状态
3.自己添加方法实现表格的全选/取消全选，可参考上方的selectSingleTableAll()方法
4. 上面案例的this.selectedLeftTableIds保存着表格勾选行数据的全部Id。可用于进一步处理
5. 开始快乐的实践吧！