无法使用 el-dialog 元素 ui 从表中删除项目

Question

我无法删除项目，因为我无法将行的 ID 传递给对话框，请问有什么帮助吗？我从昨天就卡住了

安装脚本：

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

const centerDialogVisible = ref(false)
const form = useForm()

const openDialog = (row) => {
////// how can i pass row id to the deletItem function ?///////
  centerDialogVisible.value = true
}

const deleteItem = (id) => {
  form.delete(route('items.destroy', id), {
    preserveScroll: true,
    onSuccess: () => closeModal(),
    onFinish: () => form.reset(),
  })
}
const closeModal = () => {
  centerDialogVisible.value = false
  form.reset()
}

模板：

    <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> It should be noted that the content will not be aligned in center by default </span>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="centerDialogVisible = false">Cancel</el-button>
              <el-button type="primary" @click="deleteItem"> Confirm </el-button>
            </span>
          </template>
        </el-dialog>

感谢您帮我完成了openDialog函数的代码，如果没有如果您有其他方法谢谢

Answer 1

您可以尝试设置另一个 ref 来保存您的 id，并在 openDialog 函数中设置此 id：

const { ref } = Vue
const App = {
  setup() {
    const items = ref([{id: 1, name: 'aaa'}, {id: 2, name: 'bbb'}, {id: 3, name: 'ccc'}])
    const centerDialogVisible = ref(false)
    const id = ref(null)
    const openDialog = (row) => {
      id.value = row.id
      centerDialogVisible.value = true
    }
    const deleteItem = () => {
      items.value = items.value.filter(i => i.id !== id.value)
      centerDialogVisible.value = false
      id.value = null
    }
    const closeModal = () => {
      centerDialogVisible.value = false
    }
    return {
      items, closeModal, openDialog, centerDialogVisible, deleteItem
    };
  },
};
const app = Vue.createApp(App);
app.use(ElementPlus);
app.mount("#app");

<script src="https://unpkg.com/vue@next"></script>
<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
<script src="https://unpkg.com/element-plus"></script>
<div id="app">
  <el-table :data="items" style="width: 100%" row-key="id">
    <el-table-column prop="id" label="Id" width="180"></el-table-column>
    <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-column prop="name" label="Name" width="180"></el-table-column>
  </el-table>
  <el-dialog v-model="centerDialogVisible" title="Warning" width="30%" center>
    <span> It should be noted that the content will not be aligned in center by default </span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="centerDialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="deleteItem"> Confirm </el-button>
      </span>
    </template>
  </el-dialog>
</div>