如何使用Vue.js删除el-table中的数据行

直接在你的Vue组件的methods里添加以下删除逻辑：

methods: {
  async deleteMember(index, row) {
    // 弹出确认框，避免误操作
    const confirmResult = await this.$confirm(
      '确定要删除这条成员数据？',
      '删除确认',
      {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消',
        type: 'warning'
      }
    ).catch(err => err)

    // 用户取消删除则终止流程
    if (confirmResult !== 'confirm') return

    try {
      // 调用后端删除接口，替换为你的实际接口地址与唯一标识参数
      await this.$axios.delete(`/api/members/${row.id}`)
      
      // 两种更新表格数据的方式二选一：
      // 方式1：直接操作本地数组移除该行，响应更快
      this.membersList.splice(index, 1)
      // 方式2：重新请求完整列表，确保数据与后端完全同步（多用户场景更推荐）
      // this.fetchMembersList()

      this.$message.success('删除成功')
    } catch (error) {
      this.$message.error(`删除失败：${error.response?.data?.message || '未知错误'}`)
    }
  },
  // 若选择方式2，需保留获取列表的方法（即你初始化表格数据的方法）
  async fetchMembersList() {
    const res = await this.$axios.get('/api/members')
    this.membersList = res.data
  }
}

关键细节说明： #

• 确认对话框：必须添加，防止用户误触删除按钮
• 后端接口适配：确保后端已实现删除逻辑，请求参数要用行数据的唯一标识（比如row.id，若你的字段是member_id则替换为row.member_id）
• 数据更新方式：
  • 本地数组splice：适合单用户场景，无需额外请求
  • 重新拉取列表：多用户协作场景必选，保证数据一致性
• 错误处理：捕获请求异常，给用户明确的失败提示

额外提醒： #

如果项目未使用axios，将请求部分替换为你项目中的HTTP工具（如fetch或自定义封装的请求函数）即可。

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