技術標籤：el select預設選中第一個

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')
          }
        })
      }
    }
  },