element-UI中table组件使用时结合CheckBox

在使用element-UI组件时,尤其是各种后台管理软件用到的尤其多。

在用table组件时,我结合了checkBox来进行多选,用来传递多组数组。

但是我在载入页面时使用过一次,用来显示已经勾选过的选项(从后端传的数据),然后用

rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });

来进行反选选项

handleSelectionChange(val) {
        this.multipleSelection = val;
      }

用这个来执行CheckBox被选中时操作,记录我所要的id,
此时我遇到一个问题,就是数据和方法都已经被执行,但是选项没有被勾选,我对两个方法都进行了排查,发现每次进行反选都会执行一次选中操作。但是反选只执行了2次,而选中操作执行了3次。我发现最后一次选中操作,会将已经选中的数据全部清空。

解决方案:
对反选操作进行延时执行,我才是每次加载table组件时CheckBox全部都会被置空,而反选操作延时执行则会避免这个问题

setTimeout(()=>{
                        this.meter_list.forEach(row => {
                            if (row.authState == '1'){
                                this.$refs.multipleTable.toggleRowSelection(row);
                            }
                        });
                    },1000)

版权声明:本文为qq_31404277原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。