1.背景

選中表格中某一行，高亮顯示，table表格數(shù)據(jù)變化后（刪除某幾條數(shù)據(jù)，不包括選中的刪除）， this.$refs.multipleTable.setCurrentRow(row),選中之前選中的行，可發(fā)現(xiàn)總是選中下一條的數(shù)據(jù)（選中的是2，刪除3,4，5后再用this.$refs.multipleTable.setCurrentRow(row)選中2，結(jié)果選擇的是6），控制臺(tái)打印的數(shù)據(jù)是2的數(shù)據(jù)；

2.嘗試

nextTick().setTimeout()都不能解決。明明this.$refs.multipleTable.setCurrentRow(row)傳的數(shù)據(jù)是正確的，可頁(yè)面就是選擇另一行

3.源碼

setRowspanTrHoverState(cell, flag = 'enter') {const allRow = this.$el.querySelectorAll('tbody > tr.el-table__row');let rowspan = cell.getAttribute('rowspan');// 鼠標(biāo)不再合并的單元格上直接中止if (rowspan === null) return;// 當(dāng)前單元格所在行的序號(hào)let start = [].slice.call(allRow).indexOf(cell.parentNode);rowspan = +rowspan;// rowspan == 0表示從當(dāng)前行一直都末尾都合并// rowspan == 1無(wú)意義，等同于未合并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.猥瑣的結(jié)解決方案

//監(jiān)聽(tīng)tableData watch: {tableData(val) {//this.curRow之前選中的行l(wèi)et curIndex = val.findIndex(item => item.id=== this.curRow.id)//如果之前選中的行被刪除，默認(rèn)選中第一行if (curIndex === -1) {this.$nextTick(() => {this.$refs.multipleTable.setCurrentRow(val[0])this.curRow = val[0]})} else {//如果之前選中的行沒(méi)有被刪除，則選中之前的行// 解決處理渲染錯(cuò)誤的問(wèn)題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')}})}}},

總結(jié)

以上是生活随笔為你收集整理的antd 获取table选中行数据_element-ui 组件el-table默认选中行setCurrentRow采坑记的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。