el-table 多页选中记忆回显初始数据

多页选中记忆

html设置一个key：:row-key="getRowKeys",el-table-column添加type="selection",:reserve-selection="true"

<el-table  :row-key="getRowKeys" @selection-change="handleSelectionChange" ref="multipleTable"> 
    <el-table-column type="selection" align="center" width="40" :reserve-selection="true"> </el-table-column
    <el-table-column align="center" label="兑换有效期"  width="300">
      <template slot-scope="{ row }">
        {{ timeTofmt(row.receiveStart, 'yyyy-MM-dd hh:mm:ss') }}-
        {{ timeTofmt(row.receiveEnd, 'yyyy-MM-dd hh:mm:ss') }}
      </template>
    </el-table-column>
  </el-table>

js data添加getRowKeys方法，handleSelectionChange方法改写如下：

data() {
    return {
      getRowKeys(row) {// 获取row的key值
        return row.id;
      }}
  },
methods: {
//选中的数据删除同时原表格里的选中状态也更新。这个可以理解为删除选中数据后是对原表格设置默认选中功能。
    handleSelectionChange(rows) {
      const _this = this
      if (rows.length > 0) {
        this.$nextTick(() => {
          rows.forEach(row => {
            _this.$refs.multipleTable.toggleRowSelection(row, true)
          })
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
}

回显初始数据

export default {
  props: {
    id:{
      type:String,
      default:''
    },
    value: {
      type: Array,
      default: [],
    },
  },
methods: {
    async getList() {
      const resp = await requestData(this.formInline);
      if (resp) {
          this.listData = resp.pageList;
          this.total = resp.total;// 分页
          let mapIds = this.value.map(item=>{
            return item.id;// 根据id判断
          })
          let checked= this.listData.filter((v) => {
            return mapIds.indexOf(v.id)!==-1;//利用filter方法来遍历是否有相同的元素
          });// 求交集
          checked.forEach((row) => {
              this.$nextTick(function () {// 等待dom渲染
                  this.$refs.multipleTable.toggleRowSelection(row, true);// 回显列表选中
              });
          });
      }
    },
}