elementui表格排序与删除冲突：scope.$index失效引发的删除错误及解决方案
在使用ElementUI开发过程中，表格排序和删除操作的结合常常会引发问题。本文分析一个实际案例：ElementUI表格排序后，点击删除按钮导致元素删除错乱，并非删除预期元素，而是随机删除。 尽管打印的索引值看似正确，但仍导致错误。仅当表格仅剩一个元素时，删除操作才正常。
问题描述：
项目中基于ElementUI的表格组件出现问题：表格数据排序后，点击删除按钮，删除操作并非作用于预期元素，而是随机删除。奇怪的是，打印的索引值rowindex看似正确。只有当表格仅剩一个元素时，删除才正常执行。
代码片段：
- 删除函数：
async ondeldtlgood(rowindex) { console.log(rowindex); this.addform.dtlgoods.splice(rowindex, 1); },
- 排序函数：
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>
问题排查：
开发者尝试阻止事件冒泡、重写排序函数、移除async修饰符、添加await关键字等方法，均无效。
问题根源及解决方案：
问题在于scope.$index的实时性。scope.$index并非在点击删除时获取，而是在表格渲染时确定。排序后，数据顺序改变，但scope.$index值不变。因此，打印的rowindex看似正确，实为排序前的索引值。删除操作使用旧索引值，导致删除错误元素。只有单个元素时，索引值不变，删除才正常。这并非随机删除，而是索引值与数据位置不匹配。
解决方案：
避免使用scope.$index进行删除操作。 推荐使用数据项本身的唯一标识符（例如ID）来定位要删除的元素。 修改删除函数如下：
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>
通过使用数据项的唯一标识符，确保删除操作始终作用于正确的元素，解决了排序后删除错乱的问题。 这是一种更可靠和健壮的处理方法。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
