基于el-table二次封装的表格组件,toggleRowSelection 默认选中事件被清空的问题

从详情页点编辑进入表格页的时候,有时候需要默认选中一些数据。
在这里插入图片描述
在这里插入图片描述

在el-table中的文档中能看到可以使用roggleRowSelection方法来默认选中一些数据。

// checkList 需要默认被选中的数组
// dataList 表格中展示的数组,也就是el-table的:data对应的数组
// 表格组件 添加ref属性 ref="table"
 checkList.forEach(listItem => {
     dataList.forEach(item => {
         if (listItem.id === item.id) { // 对象中唯一的属性 用来做判断值
         	 // 给需要默认被选中的行 的复选框选中
             this.$refs.table.toggleRowSelection(item, true);
         }
     });
 });

/* 有的时候会提示toggleRowSelection is not a function 
此时打印this.$refs.table。看看它是什么,有时候他是个数组,所以需要改成
	this.$refs.table[0].toggleRowSelection(item, true);
有时候他是个对象,在对象里找,可能会找到$children,这个$children是个数组,里面的第一项里有toggleRowSelection属性,所以这种情况下可以改成(这种情况一般都是因为各个公司基于el-table进行了二次封装导致的,所以得在里面慢慢找)
	this.$refs.table.$children[0].toggleRowSelection(item, true);
*/

一般来说 这么写基本就可以了。但是我写完发现没有被默认选中
于是我在 selection-change 对应的事件里打印
发现被打印了两次,第一次有数据,第二次是个空数组。找了一下午原因也没找到为什么。
突发奇想,直接给他加个定时器,是不是有数据那个就会在空数组后面进行覆盖

setTimeout(() => {
   checkList.forEach(listItem => {
       dataList.forEach(item => {
           if (listItem.id === item.id) {
               this.$refs.table.$children[0].toggleRowSelection(item, true);
           }
       });
   });
// 我最开始尝试0,发现没效果不知道为什么,后来改成1000又感觉太长,最后改成100感觉正好
}, 100);

最开始遇到这个问题百度的时候 我看好多人都说用$nextTick,在下次 DOM 更新循环结束之后执行延迟回调,但是我用完发现没什么效果。

this.$nextTick(() => {
    checkList.forEach(listItem => {
        dataList.forEach(item => {
           if (listItem.id === item.id) {
               this.$refs.table.$children[0].toggleRowSelection(item, true);
           }
        });
	})
});

所以感觉我这个问题遇到的原因就是公司基于elementUi进行二次封装导致的,导致一些方法跟elementUi里的方法使用起来有些差异,导致了这种奇葩的问题。
如果有人知道为什么我明明只使用了一次toggleRowSelection,但是在selection-change对应的事件里打印,却发现打印了两次(第一次有数据,第二次为空数组),这个问题的原因是什么的话,希望能回答我一下,因为我到现在还是不明白为什么会是两次,第二次还是空数组

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值