美文网首页
element ui toggleRowSelection 回显

element ui toggleRowSelection 回显

作者: copyLeft | 来源:发表于2022-09-20 10:22 被阅读0次

    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>
    
    
    1. 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
      }
    
      // 重置已选状态
      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 ui toggleRowSelection 回显

          本文链接:https://www.haomeiwen.com/subject/qpnmortx.html