Vuetify 数据表格行删除：避免误删的正确姿势

// 原始的 openDeleteModal 方法，用于打开删除确认对话框
openDeleteModal(item) {
   this.deletedZnsIndex = this.tableData.indexOf(item); // 正确获取了原始索引
   this.deletedZns = Object.assign({}, item); // 创建了 item 的一个浅拷贝
   this.dialogDelete = true;
},

// 原始的 deleteZnsConfirm 方法，用于确认删除
deleteZnsConfirm() {
   // 错误：再次尝试查找 this.deletedZns 在 tableData 中的索引
   // 由于 this.deletedZns 是 item 的一个浅拷贝，它与 tableData 中的原始对象不再是同一个引用
   // 因此 indexOf(this.deletedZns) 可能会返回 -1，或者在某些情况下返回不正确的索引
   this.tableData.splice(this.tableData.indexOf(this.deletedZns), 1);
   this.dialogDelete = false;
},

// 修正后的 deleteZnsConfirm 方法
deleteZnsConfirm() {
   // 正确：直接使用在 openDeleteModal 中存储的索引
   this.tableData.splice(this.deletedZnsIndex, 1);
   this.dialogDelete = false;
},

<template>
  <div>
    <v-data-table
      :headers="headers"
      :items="tableData"
      :search="search"
      class="elevation-1"
    >
      <template v-slot:item.actions="{ item }">
        <v-icon
          small
          @click="openDeleteModal(item)"
        >
          mdi-delete
        </v-icon>
      </template>
    </v-data-table>

    <v-dialog v-model="dialogDelete" max-width="500px">
      <v-card>
        <v-card-title class="text-h5">确定要删除此行吗？</v-card-title>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="blue darken-1" text @click="closeDeleteModal">取消</v-btn>
          <v-btn color="blue darken-1" text @click="deleteZnsConfirm">确定</v-btn>
          <v-spacer></v-spacer>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      headers: [
        { text: '名称', value: 'name' },
        { text: '年龄', value: 'age' },
        { text: '操作', value: 'actions', sortable: false },
      ],
      tableData: [
        { id: 1, name: '张三', age: 30 },
        { id: 2, name: '李四', age: 24 },
        { id: 3, name: '王五', age: 35 },
        { id: 4, name: '赵六', age: 29 },
      ],
      search: '',
      dialogDelete: false,
      deletedZnsIndex: -1, // 用于存储待删除项的索引
      deletedZns: {},     // 用于存储待删除项的拷贝（可选，但通常用于对话框显示信息）
    };
  },
  methods: {
    /**
     * 打开删除确认对话框。
     * @param {Object} item - 被点击行的原始数据对象。
     */
    openDeleteModal(item) {
      // 关键步骤：在此时正确捕获 item 在 tableData 中的索引
      this.deletedZnsIndex = this.tableData.indexOf(item);
      // 可选：如果需要在对话框中显示被删除项的信息，可以存储其拷贝
      this.deletedZns = Object.assign({}, item);
      this.dialogDelete = true;
    },

    /**
     * 关闭删除确认对话框并重置相关状态。
     */
    closeDeleteModal() {
      this.dialogDelete = false;
      this.deletedZnsIndex = -1; // 重置索引
      this.deletedZns = {};     // 重置拷贝对象
    },

    /**
     * 确认删除操作。
     */
    deleteZnsConfirm() {
      if (this.deletedZnsIndex > -1) { // 确保索引有效
        // 关键修正：直接使用存储的索引进行 splice 操作
        this.tableData.splice(this.deletedZnsIndex, 1);
      }
      this.closeDeleteModal(); // 关闭对话框并重置状态
    },
  },
};
</script>