element中table表格多选项翻页或者切换不同数据后保存之前选择的数据并返显选中的状态

问题需求:
我们需要做一个选择表格中显示咨询意见的数据,但是因为点击不同的选项后会发送请求展示不同的数据,table表格普通的方法在选择新的数据后之前选择的数据就会消失,现在需要保存用户所选择的所有信息,
解决方法:
查找后发现Element中有一个自带的方法 reserve-selection, 仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key）

在项目中的使用方法:
在type=“selection” 那一列添加:reserve-selection=“true” 就可以了,详细代码如下:

<el-table v-loading="dataListLoading" :row-key="getRowId" @selection-change="selectionTableDtaChange" ref="multipleTable" :data="dataList" border style="width: 100%;">
<el-table-column type="selection" align="center" width="50" :reserve-selection="true"></el-table-column>
        <el-table-column type="index" label="序号" header-align="center" align="center" width="50"></el-table-column>
        <el-table-column prop="profession" label="专业" header-align="center" align="center" ></el-table-column>
        <el-table-column min-width="190" prop="opinion" label="咨询意见" header-align="center" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column min-width="190" prop="reply" label="设计回复" header-align="center" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column min-width="190" prop="verify" label="咨询确认" header-align="center" align="center" show-overflow-tooltip></el-table-column>
</el-table>

methods: {
    // 选择的表单
    selectionTableDtaChange (selection) {
      console.log(selection, 'selectionselection')
      this.secltableData = selection
    },
    getRowId (row) {
      return row.id
    }
  }

这样即使在切换数据后 selection 里面保存的也会有之前选择的数据啦.

返显选中的数据问题:
在我们切换回原来数据是想查看哪条数据已经被选中了,element自带的有一个方法toggleRowSelection(row, true),可以改变选中行的状态,但是在把选中的数据循环调用该方法的时候每一行的数据都一模一样却却返显失败.

解决方法:
使用两层循环,筛选出当前表格的数据dataList,的数据,将datalist中的数据当前行传入toggleRowSelection()这个方法中并改变他的显示状态…详细代码如下:

showSeclectRow () {
  if (this.secltableData.length > 0) {
    this.secltableData.forEach(row => {
      this.dataList.forEach(item => {
        if (row.id === item.id) {
          this.$refs.multipleTable.toggleRowSelection(item, true)
        }
      })
    })
  }