问题根源分析：indexOf 与对象引用
当用户点击表格中的删除图标时，通常会弹出一个确认对话框。在用户确认删除后，我们期望通过 array.prototype.splice() 方法从数据源数组中移除对应的行。问题的核心往往出在如何正确获取待删除行的索引上。
考虑以下常见的错误实现：
// 假设 tableData 是 v-data-table 的数据源
// deletedZns 是在 openDeleteModal 中通过 Object.assign({}, item) 复制的待删除项
deleteZnsConfirm() {
this.tableData.splice(this.tableData.indexOf(this.deletedZns), 1);
this.dialogDelete = false;
},这段代码尝试使用 this.tableData.indexOf(this.deletedZns) 来获取待删除项的索引。然而，Array.prototype.indexOf() 方法在比较对象时，是基于引用相等性而非值相等性。这意味着，如果 this.deletedZns 是通过 Object.assign({}, item) 或其他方式创建的原始 item 的一个副本，那么它在 this.tableData 数组中将找不到与自身引用完全相同的对象，indexOf() 就会返回 -1。
当 indexOf() 返回 -1 时，splice(-1, 1) 的行为是将数组的最后一个元素移除。这正是导致“无论点击哪一行，总是删除最后一行”的根本原因。
解决方案：存储精确的行索引
为了确保 splice 方法能够准确地删除目标行，最可靠的方法是在打开删除确认对话框时，就捕获并存储该行的实际索引。这样，在用户确认删除时，我们就可以直接使用这个已知的索引进行操作。
立即学习“前端免费学习笔记（深入）”；
以下是实现这一策略的详细步骤和代码示例：
1. v-data-table 模板
在 v-data-table 的 v-slot:item.actions 中，确保删除按钮的点击事件将当前行的 item 传递给 openDeleteModal 方法。
<v-data-table
:headers="headers"
:items="tableData"
:search="search"
>
<template v-slot:item.actions="{ item }">
<div class="table__icons">
<!-- 其他图标... -->
<v-icon
v-if="$route.name === 'pregled-znsa'"
small
@click="openDeleteModal(item)"
>
mdi-delete
</v-icon>
</div>
</template>
</v-data-table>
<!-- 删除确认对话框 -->
<v-dialog v-model="dialogDelete" max-width="500px">
<v-card>
<v-card-title class="text-h2 delete-text">Do you want to remove this row?</v-card-title>
<v-card-actions>
<v-spacer></v-spacer>
<div class="m-btn delete-btn" @click="closeDeleteModal">No</div>
<div class="m-btn delete-btn" @click="deleteZnsConfirm">Yes</div>
<v-spacer></v-spacer>
</v-card-actions>
</v-card>
</v-dialog>2. data 属性声明
在 Vue 组件的 data 选项中，声明一个用于存储待删除行索引的变量，例如 deletedZnsIndex。
data() {
return {
tableData: [], // 您的表格数据
dialogDelete: false,
deletedZnsIndex: -1, // 初始化为 -1 或其他无效索引
deletedZns: {} // 存储待删除项的副本，尽管在删除时不再直接使用，但可能用于显示信息
};
},3. openDeleteModal 方法
当用户点击删除按钮时，在 openDeleteModal 方法中，不仅存储 item 的副本（如果需要用于显示），更重要的是，捕获并存储该 item 在 tableData 数组中的实际索引。
methods: {
openDeleteModal(item) {
// 存储索引
this.deletedZnsIndex = this.tableData.indexOf(item);
// 存储 item 的副本，可能用于在对话框中显示信息
this.deletedZns = Object.assign({}, item);
this.dialogDelete = true;
},
// ... 其他方法
}注意： 这里的 this.tableData.indexOf(item) 是可靠的，因为 item 是由 v-data-table 传递的，它是 tableData 数组中实际对象的引用。
4. deleteZnsConfirm 方法
在用户确认删除时，直接使用之前存储的 this.deletedZnsIndex 来执行 splice 操作。
methods: {
// ...
deleteZnsConfirm() {
// 使用已存储的精确索引进行删除
if (this.deletedZnsIndex !== -1) {
this.tableData.splice(this.deletedZnsIndex, 1);
}
this.dialogDelete = false;
this.closeDeleteModal(); // 调用关闭方法重置状态
},
closeDeleteModal() {
this.deletedZnsIndex = -1; // 重置索引
this.deletedZns = {}; // 清空副本
this.dialogDelete = false;
},
}完整代码示例（关键部分）
<template>
<div>
<v-data-table
:headers="headers"
:items="tableData"
:search="search"
>
<template v-slot:item.actions="{ item }">
<div class="table__icons">
<v-icon
small
@click="openDeleteModal(item)"
>
mdi-delete
</v-icon>
</div>
</template>
</v-data-table>
<v-dialog v-model="dialogDelete" max-width="500px">
<v-card>
<v-card-title class="text-h2 delete-text">Do you want to remove this row?</v-card-title>
<v-card-actions>
<v-spacer></v-spacer>
<div class="m-btn delete-btn" @click="closeDeleteModal">No</div>
<div class="m-btn delete-btn" @click="deleteZnsConfirm">Yes</div>
<v-spacer></v-spacer>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</template>
<script>
export default {
data() {
return {
headers: [
{ text: 'Name', value: 'name' },
{ text: 'Age', value: 'age' },
{ text: 'Actions', value: 'actions', sortable: false },
],
tableData: [
{ id: 1, name: 'Alice', age: 30 },
{ id: 2, name: 'Bob', age: 24 },
{ id: 3, name: 'Charlie', age: 35 },
],
search: '',
dialogDelete: false,
deletedZnsIndex: -1, // 存储待删除行的索引
deletedZns: {}, // 存储待删除行的副本 (可选，用于显示)
};
},
methods: {
openDeleteModal(item) {
// 在此处捕获并存储 item 的实际索引
this.deletedZnsIndex = this.tableData.indexOf(item);
this.deletedZns = Object.assign({}, item); // 存储副本，如果需要显示删除项的详情
this.dialogDelete = true;
},
closeDeleteModal() {
this.deletedZnsIndex = -1; // 重置索引
this.deletedZns = {}; // 清空副本
this.dialogDelete = false;
},
deleteZnsConfirm() {
// 使用已存储的索引进行删除
if (this.deletedZnsIndex !== -1) {
this.tableData.splice(this.deletedZnsIndex, 1);
}
this.dialogDelete = false;
this.closeDeleteModal(); // 调用关闭方法重置状态
},
// 其他方法如 goToContract, ispisRow, getIzvjestaj 等...
},
};
</script>注意事项与总结
- 引用与副本： 始终牢记 JavaScript 中对象是按引用传递的。Array.prototype.indexOf() 在查找对象时，要求是完全相同的引用。创建对象副本 (Object.assign({}, item)) 会生成一个新的引用，导致 indexOf 无法找到匹配项。
- 状态管理： 在涉及到异步操作（如确认对话框）时，妥善管理待处理项的状态（如其索引）至关重要。
- 错误处理： 在 deleteZnsConfirm 中，添加一个对 deletedZnsIndex 的有效性检查 (if (this.deletedZnsIndex !== -1)) 是一个良好的实践，可以避免在 deletedZnsIndex 未被正确设置时出现意外行为。
- 重置状态： 在 closeDeleteModal 或 deleteZnsConfirm 执行完毕后，务必重置 deletedZnsIndex 和 deletedZns 等相关状态变量，以避免下次操作时使用到旧数据。
通过采纳上述方法，您将能够确保在 Vuetify 数据表格中实现精确、可靠的行删除功能，彻底解决误删最后一行的困扰。
