Vuetify数据表格删除行异常：始终删除最后一行

问题根源 #

你遇到的问题出在deleteZnsConfirm方法里：你通过Object.assign({}, item)复制了要删除的对象，但tableData.indexOf(this.deletedZns)会返回-1——因为复制出来的新对象和原数组里的对象不是同一个引用。而splice(-1, 1)的行为是删除数组最后一项，所以无论点击哪一行，最终都会删掉表格的最后一行。

快速修复方案 #

直接使用你已经保存的deletedZnsIndex来执行删除操作，不需要再通过indexOf查找：

修改deleteZnsConfirm方法：

deleteZnsConfirm() {
  // 用提前保存的索引直接删除目标行
  this.tableData.splice(this.deletedZnsIndex, 1)
  this.dialogDelete = false
  // 清理临时变量
  this.deletedZnsIndex = ''
  this.deletedZns = {}
}

另外可以优化closeDeleteModal方法，它不需要接收item参数：

closeDeleteModal() {
  this.deletedZnsIndex = ''
  this.deletedZns = {}
  this.dialogDelete = false
}

更稳健的方案（推荐） #

如果你的表格数据包含唯一标识（比如id字段），建议用唯一标识定位要删除的项，避免数据排序后索引失效的问题：

1. 在openDeleteModal中保存目标项的唯一标识：

openDeleteModal(item) {
  this.deletedZnsId = item.id // 假设item存在id字段作为唯一标识
  this.dialogDelete = true
}

2. 修改deleteZnsConfirm方法：

deleteZnsConfirm() {
  this.tableData = this.tableData.filter(item => item.id !== this.deletedZnsId)
  this.dialogDelete = false
  this.deletedZnsId = ''
}

这种方式不管数据是否排序，都能精准删除对应的行。

内容的提问来源于stack exchange，提问作者failedCoder