vue列表-批量删除功能

实现方式

在资源列表的顶部或底部添加一个"批量删除"按钮，用户可点击该按钮来删除所选中的资源。

数据与方法

• selectedRows：存储用户选中的资源数据的数组。
• doBatchDel()：处理批量删除操作的方法，调用接口进行删除所选中的资源。

示例代码

<div> 
<a-popconfirm title="是否确认删除？" @confirm="doDelete"> 
<a-button>批量删除({{ selectedCount }})</a-button> // {{selectedCount}} 显示选中了列表的数量 
</a-popconfirm> 
</div>

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

doDelete() { 
const _this = this; 
if ( _this.selectedRowKeys.length === 0 ) { 
_this.$message.warning("请选择要删除的数据"); 
return; 
} 
const promises = _this.selectedRowKeys.map(id => delResc(id)); //调用delResc删除接口删除多个id 
Promise.all(promises).then(res => { 
_this.initData(); 
_this.selectedRowKeys = []; 
_this.$message.success("删除成功"); 
}) .catch(error => { 
_this.$message.error("删除失败"); 
console.log(error); 
}); 
},

在Vue组件的资源列表上方或下方添加一个操作栏，在操作栏中添加一个"批量删除"按钮。当用户选中一个或多个资源时，按钮才显示。当用户点击按钮时，调用doBatchDel()方法进行批量删除操作。

使用方法

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