Element UI el-dialog无法传递行ID实现表格项删除求助

核心思路是通过一个响应式变量暂存当前要删除的行ID，让对话框的删除按钮能获取到这个ID。具体修改如下：

修改Setup Script： #

<Script setup>
const props = defineProps({
  items: Object,
})

const centerDialogVisible = ref(false)
const form = useForm()
// 新增：定义响应式变量存储当前要删除的ID
const currentDeleteId = ref(null)

const openDialog = (row) => {
  // 把点击行的ID赋值给变量
  currentDeleteId.value = row.id
  centerDialogVisible.value = true
}

const deleteItem = () => {
  // 直接使用暂存的ID发起删除请求
  form.delete(route('items.destroy', currentDeleteId.value), {
    preserveScroll: true,
    onSuccess: () => closeModal(),
    onFinish: () => form.reset(),
  })
}

const closeModal = () => {
  centerDialogVisible.value = false
  form.reset()
  // 可选：清空ID，避免残留旧值
  currentDeleteId.value = null
}
</Script>

修改模板代码： #

<el-table :data="items.data" style="width: 100%" row-key="id">
  <el-table-column prop="id" label="Id" width="180" />
  <el-table-column fixed="right" label="Operations" width="200">
    <template #default="scope">
      <el-button size="small" type="danger" @click="openDialog(scope.row)">delete</el-button>
    </template>
  </el-table-column>
</el-table>

<el-dialog v-model="centerDialogVisible" title="Warning" width="30%" center>
  <span>确定要删除该条目吗？删除后无法恢复</span>
  <template #footer>
    <span class="dialog-footer">
      <el-button @click="closeModal">Cancel</el-button>
      <!-- 直接调用deleteItem，无需额外传参 -->
      <el-button type="primary" @click="deleteItem">Confirm</el-button>
    </span>
  </template>
</el-dialog>

其他可行方案： #

• 显式传参到删除函数：如果习惯在调用时传参，可修改对话框按钮的点击事件，直接传入暂存的ID：

  <el-button type="primary" @click="deleteItem(currentDeleteId)">Confirm</el-button>
  

  此时deleteItem函数保持原有的参数接收逻辑即可。
• 存储完整行数据：如果后续需要用到行的其他字段，可将整个row对象存为响应式变量，用法与存ID一致。

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