Element UI的＜el-table＞组件中，在表格中添加“删除”和“修改”按钮

<template>  
  <el-table :data="tableData" style="width: 100%" @row-click="handleRowClick">  
    <el-table-column prop="date" label="Date" width="180" />  
    <el-table-column prop="name" label="Name" width="180" />  
    <el-table-column prop="address" label="Address" />  
    <el-table-column prop="id" label="ID" />  
    <el-table-column label="操作" width="120">  
      <template #default="{row}">  
        <el-button size="mini" type="danger" @click="del(row.id)">删除</el-button>  
        <el-button size="mini" type="primary">修改</el-button>  
      </template>  
    </el-table-column>  
  </el-table>  
</template>  
  
<script>  
import { ref } from 'vue';  
  
export default {  
  setup() {  
    const tableData = ref([  
      // ... 表格数据  
    ]);  
  
    // 处理行点击事件的方法（如果需要的话）  
    const handleRowClick = (row, column, event) => {  
      // ... 行点击的逻辑  
    };  
  
    // 处理删除按钮点击事件的方法  
    const del = (id) => {  
      console.log('要删除的ID是:', id);  
      // 这里可以添加删除数据的逻辑  
    };  
  
    return {  
      tableData,  
      handleRowClick,  
      del,  
    };  
  },  
};  
</script>

在这个例子中，#default="{row}"作用域插槽被用来定义自定义列的内容。在这个插槽内部，可以通过row参数访问当前行的数据，包括id。然后，可以将这个id作为参数传递给del方法，以便在删除操作时使用。