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 正确打包文件如下图:




