elementplus表格删除元素

Element Plus 是一个基于 Vue 3 的组件库，它提供了一系列的 UI 组件，使得开发者可以更加方便快捷地构建用户界面。在 Element Plus 中，表格组件用于展示数据列表，它提供了丰富的功能，其中包括删除元素的功能。

要实现表格中的删除元素功能，通常需要结合 Element Plus 的表格组件和事件处理。以下是一个基本的实现步骤：

1. 在表格组件中定义一个列，用于展示操作按钮，比如删除按钮。
2. 为删除按钮绑定一个点击事件处理函数。
3. 在事件处理函数中，根据当前点击的行数据（通常是一个对象）来进行删除操作。这可能涉及到调用后端API来更新服务器上的数据。
4. 删除操作完成后，同步更新表格的数据源，以便从表格中移除对应的行。

具体代码示例如下：

<template>
  <el-table :data="tableData" @selection-change="handleSelectionChange">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { ref } from 'vue';
import { ElButton, ElTable } from 'element-plus';

const tableData = ref([
  // 表格数据
]);

const handleDelete = (index, row) => {
  // 实现删除逻辑，这里需要自定义，比如弹出确认框等
  if (confirm('确认删除此行数据吗？')) {
    // 执行删除操作，通常是调用API或直接修改tableData
    // 删除数组中的对应元素
    tableData.value.splice(index, 1);
    // 如果是通过API删除，还需要同步更新服务器数据
  }
};
</script>

在上面的代码中，我们使用了 `el-table-column` 的 `#default` 插槽来添加自定义内容，即一个删除按钮，并且为其绑定了点击事件 `handleDelete`。在 `handleDelete` 函数中，首先通过 `confirm` 弹出一个对话框来确认用户的删除操作，如果用户确认，则执行删除操作，这里简单地使用了 `splice` 方法从 `tableData` 数组中移除对应的数据项。