其他分享
首页 > 其他分享> > elementui中表格多选+分页,保存所有选中数据

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

作者:互联网

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~~

标签:多选,表格,elementui,checkList,当前页,勾选,选中,数据,分页
来源: https://www.cnblogs.com/zjingjing/p/16141037.html