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

  • elementui中表格多选+分页,保存所有选中数据已关闭评论
  • 19 次浏览
  • A+
所属分类:Web前端
摘要

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

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