关于前端:elementUI中table的toggleRowSelection在对话框中失效的问题

39次阅读

共计 778 个字符,预计需要花费 2 分钟才能阅读完成。

先引入官网对 toggleRowSelection 的阐明及示例



我的理论场景,table 动静生成且存在于对话框中且默认关上对话框的时候须要已选项是勾选状态,这个很好解决

this.$nextTick(()=>{// 保障 this.$refs.appchannels 存在时再执行 toggleRowSelection
  choosed.forEach((item)=>{this.$refs.appchannels.toggleRowSelection(item,true)
  })
})

如果你应用了 $nextTick 曾经解决了你的问题,那么先祝贺你解决了问题。

BUT 即便加了 $nextTick 我的 table 还是没有默认勾选已选行 TT

聪慧的我立马想到,可能是我初始化的 choosed 列表和 table 的 datarow 可能 key 值不统一

而后我哼哧哼哧的剔除了最要害的字段:id,name,code,两个完全一致了,这下总没问题了吧!

而后,,,还是不行!!!为什么

头发都要揪光的时候

我尝试逐行比对并设值!
而后!能够了

当然这个办法不适用于一次展现超过万行的 table

以下为源码:

this.$nextTick(()=>{this.$refs.appchannels.clearSelection();
  this.channelslist.forEach((item)=>{if(chooseds.indexOf(item.id)>=0){this.$refs.appchannels.toggleRowSelection(item,true)
    }
  })
 })

另外用 toggleRowSelection 边渲染而后又用 table 的 @selection-change 的时候会死循环,倡议最初确认已选的时候用 this.$refs.appchannels.selection 可间接获取 table 的所有已选。

正文完
 0