elementui表格排序與刪除沖突:scope.$index失效引發(fā)的刪除錯誤及解決方案
在使用ElementUI開發(fā)過程中,表格排序和刪除操作的結(jié)合常常會引發(fā)問題。本文分析一個實際案例:ElementUI表格排序后,點擊刪除按鈕導(dǎo)致元素刪除錯亂,并非刪除預(yù)期元素,而是隨機刪除。 盡管打印的索引值看似正確,但仍導(dǎo)致錯誤。僅當表格僅剩一個元素時,刪除操作才正常。
問題描述:
項目中基于ElementUI的表格組件出現(xiàn)問題:表格數(shù)據(jù)排序后,點擊刪除按鈕,刪除操作并非作用于預(yù)期元素,而是隨機刪除。奇怪的是,打印的索引值rowindex看似正確。只有當表格僅剩一個元素時,刪除才正常執(zhí)行。
代碼片段:
- 刪除函數(shù):
async ondeldtlgood(rowindex) { console.log(rowindex); this.addform.dtlgoods.splice(rowindex, 1); },
- 排序函數(shù):
customsort(a, b) { const acode = a.goodscode; const bcode = b.goodscode; if (acode > bcode) { return 1; } return 0; },
- 刪除按鈕:
<el-table-column label="操作" width="120"> <template slot-scope="scope"> <el-button type="danger" @click="ondeldtlgood(scope.$index)">刪除</el-button> </template> </el-table-column>
問題排查:
開發(fā)者嘗試阻止事件冒泡、重寫排序函數(shù)、移除async修飾符、添加await關(guān)鍵字等方法,均無效。
問題根源及解決方案:
問題在于scope.$index的實時性。scope.$index并非在點擊刪除時獲取,而是在表格渲染時確定。排序后,數(shù)據(jù)順序改變,但scope.$index值不變。因此,打印的rowindex看似正確,實為排序前的索引值。刪除操作使用舊索引值,導(dǎo)致刪除錯誤元素。只有單個元素時,索引值不變,刪除才正常。這并非隨機刪除,而是索引值與數(shù)據(jù)位置不匹配。
解決方案:
避免使用scope.$index進行刪除操作。 推薦使用數(shù)據(jù)項本身的唯一標識符(例如ID)來定位要刪除的元素。 修改刪除函數(shù)如下:
async ondeldtlgood(row) { const index = this.addform.dtlgoods.findIndex(item => item.id === row.id); // 使用唯一標識符id if (index !== -1) { this.addform.dtlgoods.splice(index, 1); } },
并修改刪除按鈕的點擊事件:
<el-button type="danger" @click="ondeldtlgood(scope.row)">刪除</el-button>
通過使用數(shù)據(jù)項的唯一標識符,確保刪除操作始終作用于正確的元素,解決了排序后刪除錯亂的問題。 這是一種更可靠和健壯的處理方法。