element ui toggleRowSelection 回顯無效

現象

組件初始加載時, 通過外部接口拉取需要設置的表格項數據.
通過表格實例方法toggleRowSelection 設置已選項無效.

element table 實現

1. 表格的checkbox如何獲取選中值

// element/blob/dev/packages/table/src/table-body.js

<TableRow
  ...
  // 通過 this.store.isSelected 方法判斷
  style={[displayStyle, this.isSelected={this.store.isSelected(row)}>
</TableRow>

2. store 實現

// element/blob/dev/packages/table/src/store/watcher.js
isSelected(row) {
   const { selection = [] } = this.states;
   // 判斷當前值是否存在
   return selection.indexOf(row) > -1;
},

這里的判斷是對表格數據做的對象比較, 所以存在調用 toggleRowSelection 方法是出入的數據屬性值相同,但依然無法設置成功, 此時必須從表格數據中查出對應的row值, 作為設置值.

解決方法

const tableEle = ref()
const tableData = ref([])

function setTableChecked (rows, status = true) {
  const ele = tableEle.value
  if (!ele) {
    return false
  }

  // 重置已選狀態(tài)
  ele.clearSelection()
  // 篩選需要選中的數據
  const bingo = tableData.value.filter(i => rows.some(row => row.id === i.id))
  // 重置組件內已選項列表, 保證isSelected內正常觸發(fā)
  ele.store.selection = bingo
  // 觸發(fā)更新
  nextTick(() => {
    // 更新選中
    bingo.map(row => {
      ele.toggleRowSelection(row, status)
    })
  })
  return true
}