[ElemeFE/element]Table组件: 修复在多选模式下调用toggleRowSelection方法后,表格的checkbox没有被选中的BUG

2024-08-19 488 views
2

Table组件: 修复在多选模式下调用toggleRowSelection方法后,表格的checkbox没有被选中的BUG

例如:

export default {
    data() {
      return {
        tableData: [{
          id: 1,
          name: '王小虎'
        }, {
          id: 2,
          name: '彭小呆'
        }]
      }
    },
    methods: {
      selectFirstRow1() {
         const row = tableData[0]
         this.$refs.multipleTable.toggleRowSelection(row, true);
      },
      selectFirstRow2() {
         const row = {
             id: 1,
             name: '王小虎'
         }
         this.$refs.multipleTable.toggleRowSelection(row, true);
      }
    }
  }

分别调用selectFirstRow1方法和selectFirstRow2方法,会得到完全不同的结果。

selectFirstRow1方法执行后,页面按照我们想要的结果渲染出勾选状态。 selectFirstRow2方法执行后,页面的多选表头中的的checkbox状态变成半全选,但是在第一行中的checkbox并没有勾选,出现了和我们预期不一样的结果。

经过排查,我发现在table组件中的src/store/watcher.js中的isSelected方法中的判断为return selection.indexOf(row) > -1; 当对象地址不同时,用这个方法判断会出现此问题。

于是我在 src/util.js 中新增了方法 getRowIndexOfSelection 去获取对象在数组中的位置,然后在 src/util.js文件中的toggleRowStatus方法和src/store/watcher.js文件中的isSelected方法调用此判断方法,正确获取对象在数组中的位置。具体细节在commit中可以查看。

经过测试没问题了。

执行 yarn dist 正确打包文件如下图:

回答

6

这个问题有解决了吗 难道只能搞源码 我也遇到了这个问题 引用数据类型用indexof?? 饿了么 你为什么要这个写?我看不懂?

9

@zzh3319 我目前看了源代码搞了一下。

      this.$refs.table.store.states.selection = rows;
      this.$refs.table.store.updateSelectionByRowKey(); //重新计算selection
      this.$refs.table.store.updateAllSelected(); //计算全选
5

也可以不搞源码,我用的两个数组取交集的方法,比较笨,但是没那么麻烦

1

确实,我也是这样来处理的,不知道他们为什么要采用indexOf 的方法

 const target = this.$refs['table'].selection.find((elem) => elem.subjectId === item.subjectId)
 if (target) {
      tableInstance.toggleRowSelection(target, false)
    }
3

为什么没人处理此 PR

4

这个合并了吗 为啥还有这个问题