写一段elementui表格连接node删除接口的函数代码
时间: 2023-02-22 13:54:44 浏览: 83
以下是一段使用 Element UI 库连接 Node 删除接口的代码示例:
```
<template>
<el-table :data="tableData">
<el-table-column
prop="id"
label="ID"
>
</el-table-column>
<el-table-column
prop="name"
label="名称"
>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
@click="handleDelete(scope.row.id)"
type="text"
size="small"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: []
};
},
methods: {
async handleDelete(id) {
try {
await this.$axios.delete(`/api/items/${id}`);
this.tableData = this.tableData.filter(item => item.id !== id);
this.$message.success('删除成功');
} catch (err) {
this.$message.error('删除失败');
}
}
}
};
</script>
```
说明:这段代码定义了一个 Element UI 表格组件,表格数据通过 `tableData` 变量绑定;每一行的操作栏中有一个删除按钮,点击时会触发 `handleDelete` 方法。该方法中使用 Axios 库发送一个 DELETE 请求到 Node 后台接口,并在删除成功后更新表格数据,显示删除成功提示。
阅读全文