elementui中表格多选+分页，保存所有选中数据

发布时间：2022-08-14 文章分类：编程知识 投稿人：李佳 字号： 默认 | 大 | 超大 打印

element UI中table表格在选中数据后点击分页，再选中数据，回到第一页后，原来选中的数据已经不再是勾选状态了，现在要怎样记住所有分页中的勾选状态呢？我这里有比较简便的方法。不需要缓存数据等复杂的方式。

1、首先在table标签上定义row-key和ref标志名称。具体row-key等功效，可以参考element UI文档。代码如下：

 <el-table
          ref="table"
          v-loading="loading"
          :data="dataList"
          row-key="id"
          @select="selectItem"
          @select-all="selectAll"
        >
          <el-table-column
            key="1"
            type="selection"
            width="40"
            reserve-selection
          />
</el-table>

2、定义选择单列（selectItem）和全选（selectAll）的方法。代码如下：

selectItem(list, row) {
    this.checkList = list
}

把当前页选中的数据保存到checkList数组中，该数据仅保存的是当前页选中数据。（若切换分页选中，数据会被覆盖为最新选中数据）

 selectAll(selection) {
      // 若取消全选，当前页的选中数据移除
      if (selection.length === 0) {
        const ids = this.dataList.map((i) => {
          return i.id
        })
        for (var i = 0; i < this.checkList.length; i++) {
          if (ids.indexOf(this.checkList[i].id) > -1) {
            this.checkList.splice(i, 1)
            i--
          }
        }
      }
      const arr = [...selection, ...this.checkList]
      this.checkList = Array.from(new Set(arr))
},

全选的方法中，需要判断是勾选还是取消勾选。若取消勾选，需要把当前页选中的数据全部清空。

3、清空所有选中的数据方式。代码如下：

this.$refs.table.clearSelection()
this.checkList = []

清空表格中选中项，再清空选中数组。

这种处理方式，就可以在分页时依然记得之前选中的数据，返回原来分页数据还在，全选选中与否，数据都可以随之修改。nice～～

标签 , , ,