vue3 elementplus实现table有删除功能

在 Vue3 中使用 Element Plus 实现表格（Table）并且包含删除功能，你可以按照以下步骤操作：

1. 首先，确保已经安装了 Vue 和 Element Plus，可以通过 npm 或者 yarn 安装：

   npm install vue element-plus

2. 创建一个新的组件，比如 `TableWithDelete.vue`，并引入 Element Plus 的 Table 组件和其他必要的库：

   <template>
     <el-table :data="tableData" style="width: 100%">
       <!-- 添加列 -->
       <el-table-column type="index" label="序号"></el-table-column>
       <el-table-column prop="name" label="姓名"></el-table-column>
       <el-table-column prop="age" label="年龄"></el-table-column>
       <!-- 删除按钮列 -->
       <el-table-column width="150">
         <template slot-scope="scope">
           <el-button @click="handleDelete(scope.$index)" size="small">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
   </template>

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

   export default defineComponent({
     components: {
       ElTable,
       ElButton
     },
     data() {
       return {
         tableData: [
           { id: 1, name: '张三', age: 24 },
           { id: 2, name: '李四', age: 28 },
           // 更多数据...
         ],
         deleteIndex: null, // 存储删除项索引
      };
     },
     methods: {
       handleDelete(index) {
         if (this.deleteIndex === index) {
           alert('已取消删除');
           return;
         }
         this.tableData.splice(index, 1);
         this.deleteIndex = index; // 更新删除状态，防止连续点击触发多次删除
         // 提交到后台或者保存数据时移除这个操作
       },
     },
   });
   </script>

3. 在父组件中导入并使用该组件：

   <template>
     <div>
       <TableWithDelete />
     </div>
   </template>

   <script>
   import TableWithDelete from "./components/TableWithDelete.vue";

   export default {
     components: {
       TableWithDelete,
     },
   };
   </script>

当你点击删除按钮时，会弹出警告提示并从 `tableData` 数组中删除对应行。注意，实际项目中通常会在 `handleDelete` 方法里处理删除操作的逻辑，比如提交给服务器。