element表格默认选中_element table默认选中

场景：选中表格多选框后，重新返回这个标签页，已经选择的需要默认选中。

但是重新返回后，并没有选中。

<el-tabs tab-position="left" style="height: 400px;width: 100%;" @tab-click="changeTabPane">
  <el-tab-pane v-for="(item, index) in dialogInfo.dishCategory" :label="item.name">
    <el-table
        ref="multipleTable"
        :data="dishesGroupByCategory"
        row-key="id"
        border
        tooltip-effect="dark"
        max-height="400"
        style="width: 100%;"
        @select="selectDish">
      <el-table-column
          type="selection"
          align="center"
      >
      </el-table-column>
      ...
    </el-table>
  </el-tab-pane>
</el-tabs>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

changeTabPane(tab) {
  this.dishesGroupByCategory = this.dialogInfo.dishData.filter(dish => dish.categoryName === tab.label)
  this.dialogInfo.selectedDishes.forEach(item=>{
    this.dishesGroupByCategory.forEach((i, index)=>{
      if (item.name === i.name) {
        this.$refs.multipleTable[tab.index].toggleRowSelection(item);
      }
    })
  })
},
selectDish(selection, row){
  if (this.dialogInfo.selectedDishes.some(dish => dish.name === row.name) {
    let index = this.dialogInfo.selectedDishes.indexOf(row)
    this.dialogInfo.selectedDishes.splice(index, 1)
  }else{
    this.dialogInfo.selectedDishes.push(row);
  }
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

解决方法是使用 $nextTick

官方解释： $nextTick 将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

changeTabPane(tab) {
  this.dishesGroupByCategory = this.dialogInfo.dishData.filter(dish => dish.categoryName === tab.label)
  this.$nextTick(()=>{
    this.dialogInfo.selectedDishes.forEach(item=>{
      this.dishesGroupByCategory.forEach((i, index)=>{
        if (item.name === i.name) {
          this.$refs.multipleTable[tab.index].toggleRowSelection(item);
        }
      })
    })
  })
},
1
2
3
4
5
6
7
8
9
10
11
12

解决！