vue3中表格操作删除功能

方案一：利用插槽 #default="{ row }"

<el-table-column label="操作" width="150">
        <template #default="{ row }">
          <el-button type="primary" link @click="openDialog(row)">编辑</el-button>
          <el-button type="danger" link @click="onDelete(row.id)">删除</el-button>
        </template>
 </el-table-column>

等同于：

<template #default="scoped">
          <el-button type="primary" link>编辑</el-button>
          <el-button type="danger" @click="handleDelete(scoped.row.id)" link>删除</el-button>
  </template>

// TODO:删除功能

const onDelete = async (id) => {
  await axios.delete(`/del/${id}`)
  getList()
}

方案二：

  <template #default="scoped">
          <el-button type="primary" link>编辑</el-button>
          <el-button type="danger" @click="handleDelete(scoped.$index, scoped.row)" link>删除</el-button>
 </template> 

 const handleDelete = async (index, row) => {
   await axios.delete(`/del/${row.id}`);
   getList();
 };