Element 表格合并行后处理checkbox全选问题

问题场景：当表格合并行后，先勾选全选，这个时候数据获取数目没有问题，当用户手动把选框一个个全都去除勾选，这个时候获取的数据应该是空，但是这个时候 获取的数据不是空。

当表格合并行后，勾选如图所示的全选按钮，控制台是获取到了5条数据

当用户手动把勾选去除，全选按钮的状态是还有勾选数据，这个时候控制台打印出来的数据是3条，此时对于用户来讲应该是一条都没有勾选才对，所以这个时候需要通过逻辑代码来处理下。

<el-table
      ref="multipleTableDevice"
      :data="data"
      :span-method="objectSpanMethod"
      @select="selectTab"
      border
      style="width: 100%; margin-top: 20px">
      <el-table-column
        type="selection"
        aline="center"
        width="180">
      </el-table-column>
      
      <el-table-column
        prop="number"
        label="序号">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="amount1"
        label="数值 1（元）">
      </el-table-column>
      <el-table-column
        prop="amount2"
        label="数值 2（元）">
      </el-table-column>
      <el-table-column
        prop="amount3"
        label="数值 3（元）">
      </el-table-column>
    </el-table>

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
      return {
        tableData: [{
          id: '1',
          name: '王小虎',
          amount1: '234',
          amount2: '3.2',
          amount3: 10,
          number:'1',
        }, {
          id: '1',
          name: '王小虎',
          amount1: '165',
          amount2: '4.43',
          amount3: 12,
          number:'1',
        }, {
          id: '2',
          name: '王小虎',
          amount1: '324',
          amount2: '1.9',
          amount3: 9,
          number:'2',
        }, {
          id: '2',
          name: '王小虎',
          amount1: '621',
          amount2: '2.2',
          amount3: 17,
          number:'2',
        }, {
          id: '2',
          name: '王小虎',
          amount1: '539',
          amount2: '4.1',
          amount3: 15,
          number:'2',
        }],
        data:[],
      };
    },
    created(){
      // 处理需要合并的行
      this.data= this.mergeRowspan(this.tableData, { referenceValue: 'number', combineProp: ['number', 'name'] })
      
    },
    methods: {
      mergeRowspan(tableData, config) {
          if (!tableData.length) {
              return tableData
          }
          // 读取配置
          const { referenceValue, combineProp } = config
          // 判断基准值是否存在 | 基准值是否tableData中数据的属性
          if (!referenceValue || !tableData[0][referenceValue]) {
              return tableData
          }
          // 对tableData数据已基准值数据值进行分组格式化，以确保相同行相邻
          const tableDataGroup = tableData.reduce((pre, current) => {
              pre[current[referenceValue]] = pre[current[referenceValue]] || []
              pre[current[referenceValue]].push(current)
              return pre
          }, {})
          let list = []
          for (const key in tableDataGroup) {
              if (Object.hasOwnProperty.call(tableDataGroup, key)) {
                  const item = tableDataGroup[key];
                  list = [...list, ...item] 
              }
          }
          // rowspan 合并几行 colspan 合并后占用几列
          combineProp.forEach((column) => {
              // 记录合并项
              let combineCount = 1
              // 使用倒序遍历
              for (let i = list.length - 1; i >= 0; i--) {
                  const curr = list[i]
                  const prev = list[i - 1]
                  if (i === 0) {
                      // 循环最后一次
                      curr[`${column}Span`] = {
                          rowspan: combineCount,
                          colspan: 1
                      }
                      break
                  }
                  if (prev[`${column}`] === curr[`${column}`]) {
                      ++combineCount
                      curr[`${column}Span`] = {
                          rowspan: 0,
                          colspan: 0
                      }
                  } else {
                      curr[`${column}Span`] = {
                          rowspan: combineCount,
                          colspan: 1
                      }
                      // 前后项不相符时，对combinecount进行重置
                      combineCount = 1
                  }
              }
          })
          return list
      },
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        // console.log(3,row,column,rowIndex, columnIndex)
        // 需要合并的列，需求是合并第一、二列
        let rowspanArr  =[0,1]
        if ( rowspanArr.includes(columnIndex)) {
          let rowspan = row['numberSpan']['rowspan']
          let colspan = row['numberSpan']['colspan']
          return {
              rowspan: rowspan,
              colspan: colspan
            };
        }
      },
      unique(arr, val) {
        const res = new Map();
        return arr.filter(item => !res.has(item[val]) && res.set(item[val], 1))
      },
      selectTab(val,row) {
        // 当前是选中还是取消 true 选中 false 取消
        let isSelect = val.length && val.indexOf(row) > -1
        // 当前显示的复选框
        let arr = this.unique(val, 'number');
        // 取当前所有选中的框的iD的全集 (过滤未被选中的)
        let arrId = []
        for(var i=0;i<arr.length;i++){
          if(isSelect || (!isSelect && arr[i].id !== row.id)){
          arrId.push(arr[i].id);
          }
        }
        // 根据选中的id筛选数组
        let rowArrById = this.tableData.filter(item => {
        return arrId.indexOf(item.id) >-1;
        });
        this.$nextTick(()=>{
          this.tableData.forEach(item=>{
            this.$refs.multipleTableDevice.toggleRowSelection(
              item,
              false
            )
          });
          // 根据条件把指定行选中
          rowArrById.forEach(item => {
            this.$refs.multipleTableDevice.toggleRowSelection(
            item,
            true
            );
          });
          
        })
    },
      
  }
}

效果如下：

demo