antd 获取table选中行数据_element-ui 组件el-table默认选中行setCurrentRow采坑记

1.背景

选中表格中某一行，高亮显示，table表格数据变化后（删除某几条数据，不包括选中的删除）， this.$refs.multipleTable.setCurrentRow(row),选中之前选中的行，可发现总是选中下一条的数据（选中的是2，删除3,4，5后再用this.$refs.multipleTable.setCurrentRow(row)选中2，结果选择的是6），控制台打印的数据是2的数据；

2.尝试

nextTick().setTimeout()都不能解决。明明this.$refs.multipleTable.setCurrentRow(row)传的数据是正确的，可页面就是选择另一行

3.源码

 setRowspanTrHoverState(cell, flag = 'enter') {
      const allRow = this.$el.querySelectorAll('tbody > tr.el-table__row');
      let rowspan = cell.getAttribute('rowspan');
      // 鼠标不再合并的单元格上直接中止
      if (rowspan === null) return;
      // 当前单元格所在行的序号
      let start = [].slice.call(allRow).indexOf(cell.parentNode);
      rowspan = +rowspan;
      // rowspan == 0表示从当前行一直都末尾都合并
      // rowspan == 1无意义，等同于未合并
      if (rowspan > 1 || rowspan === 0) {
        const end = rowspan > 0 ? rowspan + start - 1 : allRow.length - start;
        while (start <= end) {
          flag === 'enter'
            ? addClass(allRow[start], 'hover-row')
            : removeClass(allRow[start], 'hover-row');
          start++;
        }
      }
    },

4.猥琐的结解决方案

 //监听tableData
watch: {
    tableData(val) {
     //this.curRow之前选中的行
      let curIndex = val.findIndex(item => item.id=== this.curRow.id)
      //如果之前选中的行被删除，默认选中第一行
      if (curIndex === -1) {
        this.$nextTick(() => {
          this.$refs.multipleTable.setCurrentRow(val[0])
          this.curRow = val[0]
        })
      } else {
        //如果之前选中的行没有被删除，则选中之前的行
        // 解决处理渲染错误的问题
        this.$nextTick(() => {
          let rows = this.$refs.multipleTable.$el.querySelectorAll('tbody > tr.el-table__row')
          if (rows.length) {
            rows = Array.from(rows)
            rows.forEach(item => item.classList.remove('current-row'))
            rows[curIndex].classList.add('current-row')
          }
        })
      }
    }
  },