elementUI中table的toggleRowSelection在对话框中失效的问题

先引入官网对toggleRowSelection的说明及示例
image.png
elementUI中table的toggleRowSelection在对话框中失效的问题_第1张图片
image.png
elementUI中table的toggleRowSelection在对话框中失效的问题_第2张图片

我的实际场景,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的所有已选。

你可能感兴趣的:(前端element-ui)