el-table多选toggleRowSelection不生效?

做弹窗里有个表格多选时,经常遇到再次打开弹窗,已选值赋值不上的问题,这里简单记录一下解决方案。
在这里插入图片描述
在这里插入图片描述
element官方提供的例子经常是有各种问题的,这里经常是toggleSelection不生效

toggleRowSelection是用来控制table表格选择框回显的方法,这个方法有两个参数toggleRowSelection(item, true),第一个参数是你准备回显哪一项,也就是表格对应的哪一行,第二个就是那个勾勾,true就是勾选上。

一般遇到的业务是,第一次打开选中了,然后有个列表回显选中的值,再有个编辑,点编辑回显选中的,然后就会遇到选中不生效的问题…

直接上解决方案:

1、赋值前先清空值clearSelection()
2、在DOM节点更新后再进行赋值,这里使用nextTick
3、进行赋值渲染选中toggleRowSelection(item, true)

	// 我这里是用的el-dialog弹窗里的,所以在@open事件中处理
	onOpen () {
    
    
	  const TABLE_DOM = this.$refs.multipleTable
      const {
    
     optCoupons } = this
      if (TABLE_DOM) {
    
    
        TABLE_DOM.clearSelection()
        this.$nextTick(_ => {
    
    
          optCoupons.forEach(item => {
    
    
            TABLE_DOM.toggleRowSelection(item, true)
          })
        })
      }
	}

猜你喜欢

转载自blog.csdn.net/weixin_43106777/article/details/129691051