el-table 翻页后保留所勾选项

el-table 翻页后保留所勾选项

前言

在本周的开发中，碰到一个表格翻页之后，仍然保留所勾过的选项的功能。在原组件中，并没有这样的功能，所以经过查找分析，就有了下面的一个例子，分析给大家。

思路

查找资料后可得

1. 为了实现保留的功能，所以需要存储勾选内容的数组（selectedItems）
2. 通过el-table中的toggleRowSelection方法，可以设置行的选中状态。
3. 通过el-table中的select和select-all获得勾选或者取消的内容

步骤

表格勾选

表格单选

因为翻页之后，点选时selection会出现undefined,所以这里需要进行判断
这里可以通过判断选择selection中有没有row，就可以判断出是增加还是删减

select (selection, row) {
  if (selection && selection.find(item => item && (item.id == row.id))) {
    this.addRows([row])
  } else {
    this.deleteRows([row])
  }
}

表格全选

通过selection数组长度判断是选中还是取消

selectAll (selection) {
  if (selection.length > 0) {
    this.addRows(this.tableData)
  } else {
    this.deleteRows(this.tableData)
  }
},

编辑勾选数组

添加选中

添加时判断selectedItems中是否存在当前row数据，存在则直接return

addRows (rows) {
  rows.forEach(row => {
    if (this.selectedItems.find(item => item.id == row.id)) { return }
    this.selectedItems.push(row)
  });
},

取消选中

当selectedItems为空数组时，则直接 return

deleteRows (rows) {
  if (this.selectedItems.length == 0) { return }
  rows.forEach(row => {
    this.selectedItems = this.selectedItems.filter(item => item.id == row.id)
  })
}

设置选中状态

这里使用this.$nextTick是保证表格渲染完成之后，才添加选中效果。
selectedItem是筛选循环当前行row是否在当前表格tableData数据中。

rows.forEach(row => {
 this.$nextTick(() => {
    let selectedItem = this.tableData.find(item => item.id == row.id)
    this.$refs.multipleTable.toggleRowSelection(selectedItem);
  });
})

完整代码