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