element ui toggleRowSelection 回显无效

element ui toggleRowSelection 回显无效

现象

组件初始加载时, 通过外部接口拉取需要设置的表格项数据. 通过表格实例方法toggleRowSelection 设置已选项无效.

element table 实现

1. 表格的checkbox如何获取选中值

代码语言：javascript复制

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

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

1. store 实现

代码语言：javascript复制

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

这里的判断是对表格数据做的对象比较, 所以存在调用 toggleRowSelection 方法是出入的数据属性值相同,但依然无法设置成功, 此时必须从表格数据中查出对应的row值, 作为设置值.

解决方法

代码语言：javascript复制

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

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

  // 重置已选状态
  ele.clearSelection()
  // 筛选需要选中的数据
  const bingo = tableData.value.filter(i => rows.some(row => row.id === i.id))
  // 重置组件内已选项列表, 保证isSelected内正常触发
  ele.store.selection = bingo
  // 触发更新
  nextTick(() => {
    // 更新选中
    bingo.map(row => {
      ele.toggleRowSelection(row, status)
    })
  })
  return true
}

element store toggle ui 表格

0 人点赞