Vue3中，想要删除table中的某一行

Question

Vue3中，想要删除table中的某一行，删除按钮如下所示，

```html
<el-table-column label="操作">
         <template v-slot="{row}">
            <el-button size="small" @click="handleEdit(row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDel(row)">删除</el-button>
         </template>
</el-table-column>

删除功能如下所示：
```javascript
handleDel(val) {
        ElMessageBox.confirm("是否删除?", "提示", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            method.handleSure(val);
          })
          .catch(() => {
            // catch error
          });
      },
      handleSure(val) {
        this.dialogVisible = false;
        let index = data.tableDataQcm.findIndex((item) => item.qcmid === val.qcmid);
        this.tableDataQcm.splice(index, 1);
      },

但删除按钮却不起作用，点击删除没有反应。另外点击编辑，原来那一行的数据仍然存在，修改过后的数据显示在了下一行。
不知道是什么原因，求解答！

Answer 1

引自免费微信小程序：皆我百晓生

看起来你的代码逻辑基本正确，可能是因为data.tableDataQcm的数据绑定问题或者是数据更新的问题。为了确保数据被正确地删除并同步到视图上，你需要确保以下几个点：

1. 确保 data.tableDataQcm 是响应式的数组。
2. 在处理删除操作时，正确找到要删除的项，并且调用 splice() 方法删除它。
3. 如果你在其他地方也引用了这个数组（例如：计算属性、watcher 或者是子组件），那么你可能需要通知它们数据已变更。

首先，确保你的 Vue 实例中有一个响应式的数据对象，包含了 tableDataQcm：

export default {
  data() {
    return {
      dialogVisible: false,
      tableDataQcm: [
        // ...你的数据
      ],
    };
  },
  methods: {
    // ...
  }
};

接下来，检查你的删除方法，确保 findIndex 的条件语句正确匹配你要删除的项目。这里使用 qcmid 作为唯一标识符，确保每个项目都有一个唯一的 qcmid：

handleSure(val) {
  this.dialogVisible = false;
  const index = this.tableDataQcm.findIndex(item => item.qcmid === val.qcmid);
  if (index !== -1) {
    this.tableDataQcm.splice(index, 1);
    // 如果有其他地方监听了 tableDataQcm 的变化，可以在这里触发一个事件或调用函数通知它们
    // 例如：this.$emit('table-data-updated', this.tableDataQcm);
  }
},

至于编辑问题，如果你在编辑后数据没有正确显示在同一行，可能是因为你在编辑过程中创建了一个新的对象，而不是修改了原有的对象。你应该直接修改现有对象的值，而不是替换整个对象。例如：

handleEdit(val) {
  // 假设有个 editModal 显示编辑界面
  this.editModal.show(val);

  // 当用户提交编辑时
  this.editModal.onSubmit(newVal) {
    const index = this.tableDataQcm.findIndex(item => item.qcmid === val.qcmid);
    if (index !== -1) {
      Object.assign(this.tableDataQcm[index], newVal);
      // 触发数据更新的通知
      // this.$emit('table-data-updated', this.tableDataQcm);
    }
  }
},

这样应该能解决你的问题。如果你还有其他疑问或者问题依然存在，请告诉我，我会进一步帮助你调试。