vue列表-删除功能

实现方式

在资源列表中的每一行数据后面有一个"删除"按钮，用户可以点击该按钮来删除对应的资源。

数据与方法

• doDel(id)：处理单个资源删除操作的方法，根据传入的资源ID调用接口进行删除操作。

示例代码

<template slot="s" slot-scope="text, record"> 
<a-popconfirm title="是否确认删除?" @confirm="() => doDel(record.id)"> 
<a>删除</a> 
</a-popconfirm> 
</template>

import { delResc } from '@/api/***'; // 删除接口

doDel(id) { 
let _this = this; 
delResc(id).then(res => { // 调用接口进行删除 
_this.$message.success("删除成功"); //删除成功提醒 
_this.initData(); // 删除后刷新列表 
}); 
},

在Vue组件中，通过在资源列表的操作列中添加"删除"按钮，并调用doDel()方法进行删除操作。删除操作使用a-popconfirm组件来进行确认提示，用户确认后调用接口进行删除操作。

使用方法

将以上示例代码添加到您的Vue组件中，在适当的位置显示资源列表，并在操作列中添加"删除"按钮，并调用doDel()方法删除对应的资源。根据实际需求适配删除操作的业务逻辑和接口调用。