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