二十一节:进阶:用户列表批量删除功能

发布时间:2026/9/6 4:20:04

二十一节:进阶:用户列表批量删除功能
二十一节进阶用户列表批量删除功能本节目标给用户管理表格增加多选框勾选多条记录实现批量删除mock 补充批量删除接口增加二次确认弹窗和原有单条删除逻辑复用。你截图里表格左侧就是多选框所在列目前还没有实现。步骤 1修改用户列表页面src/views/system/user/index.vuetemplate 部分改动关键点el‑table 增加selection‑change多选事件表格第一列增加el‑table‑column typeselection选择框页面上方增加【批量删除】按钮带上v‑perm权限指令template div classuser-container div classsearch-form el-input v-modelqueryParams.username placeholder请输入用户名 stylewidth:220px/el-input el-button typeprimary clickgetUserList查询/el-button el-button clickresetQuery重置/el-button /div div classbtn-group el-button typeprimary v-permsystem:user:add clickopenAddDialog新增用户/el-button !-- ✅批量删除按钮需要system:user:remove权限 -- el-button typedanger v-permsystem:user:remove clickhandleBatchDelete批量删除/el-button /div !-- ✅表格增加selection多选 -- el-table :datatableData border selection-changehandleSelectionChange !-- 多选框列放在表格最左侧对应截图红框位置 -- el-table-column typeselection width55 / el-table-column propid labelID width80/ el-table-column propusername label用户名/ el-table-column propnickName label昵称/ el-table-column propphone label手机号/ el-table-column label操作 width180 template #defaultscope el-button link typeprimary v-permsystem:user:edit clickopenEditDialog(scope.row)编辑/el-button el-button link typedanger v-permsystem:user:remove clickhandleSingleDelete(scope.row)删除/el-button /template /el-table-column /el-table !-- 分页组件 -- el-pagination v-model:current-pagequeryParams.pageNum v-model:page-sizequeryParams.pageSize :totaltotal changegetUserList / /div /templatescript setup 新增逻辑script setup import { ref,reactive } from vue import { ElMessage, ElMessageBox } from element-plus import { getUserListApi,deleteUserApi } from /api/system/user const tableData ref([]) const total ref(0) // ✅保存勾选的多行选中数据 const multipleSelection ref([]) const queryParams reactive({ pageNum:1, pageSize:10, username: }) // 多选触发拿到选中行 const handleSelectionChange (val) { multipleSelection.value val } // 获取列表 const getUserList async () { const res await getUserListApi(queryParams) tableData.value res.data.records total.value res.data.total } // 单条删除原有逻辑 const handleSingleDelete (row) { ElMessageBox.confirm(确定删除该用户,提示,{type:warning}).then(async (){ await deleteUserApi(row.id) ElMessage.success(删除成功) getUserList() }) } // ✅批量删除 const handleBatchDelete () { // 判断有没有勾选数据 if(!multipleSelection.value || multipleSelection.value.length 0){ ElMessage.warning(请先勾选要删除的数据) return } // 提取所有选中行id数组 const idList multipleSelection.value.map(item item.id) ElMessageBox.confirm(确定删除选中 ${idList.length} 条记录该操作不可恢复,警告,{ type:danger }).then(async (){ // 调用批量删除接口 await batchDeleteUserApi({ids:idList}) ElMessage.success(批量删除成功) // 删除后清空表格勾选状态 multipleSelection.value [] getUserList() }) } // 查询重置 const resetQuery (){ queryParams.username getUserList() } getUserList() /script步骤 2api 文件新增批量删除接口src/api/system/user.jsimport request from /utils/request // 获取用户列表 export function getUserListApi(params){ return request({url:/api/user/list,method:get,params}) } // 单条删除 export function deleteUserApi(id){ return request({url:/api/user/${id},method:delete}) } // ✅批量删除接口 export function batchDeleteUserApi(data){ return request({ url:/api/user/batchRemove, method:delete, data })步骤 3mock/index.js 补充批量删除模拟接口你现有的 mock 是对象格式追加一条/api/user/batchRemove/api/user/batchRemove: ({ body }) { // body拿到ids数组 [1,2,3] console.log(批量删除id集合,body.ids) return { code:200, msg:批量删除成功, data:null } }✅测试流程保存全部文件重启pnpm dev登录 admin 账号用户列表表格最左侧出现多选复选框就是截图红框位置勾选多条用户点击【批量删除】没有勾选直接点按钮弹出提示请先勾选要删除的数据弹出确认弹窗确认后提示批量删除成功刷新列表mock 修改perms:[]批量删除按钮会被 v‑perm 指令自动隐藏❗常见踩坑el‑table必须绑定selection‑change否则拿不到选中行批量删除传参是data:{ids:[...]}delete 请求用 body 传数组不要用 params删除完成一定要清空multipleSelection.value否则复选框状态残留

相关新闻

CAN总线从物理层到协议栈:波形分析、波特率与故障排查实战

CAN总线从物理层到协议栈:波形分析、波特率与故障排查实战

2026/9/6 4:20:04

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

《模力盒》游戏是买来玩的,不是下班后接着“上班”的

《模力盒》游戏是买来玩的,不是下班后接着“上班”的

2026/9/6 4:20:04

晚上十点,终于忙完一天的事。 打开电脑,戴上耳机,想着今晚怎么也要把主线往前推一推。结果任务还没开始,就发现装备差几份材料、升级缺一笔金币,背包也快满了。 于是,你又跑回熟悉的地图,打熟…

燃气热水器选购核心:水伺服恒温与天然气省钱背后的技术逻辑

燃气热水器选购核心:水伺服恒温与天然气省钱背后的技术逻辑

2026/9/6 4:20:04

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

QEMU 总线设备 Device 源码分析

QEMU 总线设备 Device 源码分析

2026/9/6 5:00:06

摘要:本文从源码层面剖析 QEMU 总线设备 Device 的实现机制。首先介绍 DeviceState、BusState 等核心数据结构及其构成的设备树,随后梳理设备从类型注册、实例化到 realize 的完整生命周期,并深入分析设备与总线的连接机制、属性系统以及热插…

2026年汕头手信店精选指南:哪家最值得信赖?

2026年汕头手信店精选指南:哪家最值得信赖?

2026/9/6 5:00:06

随着旅游与文化的交融日益加深,挑选一份地道的手信成为旅行中不可或缺的一部分。而在众多手信店铺中做出选择,并非易事。本文将重点推荐一家在汕头备受赞誉的特产店——拾青潮汕特产(龙眼南路店),并提供一些实用建议&a…

Python学习记录12

Python学习记录12

2026/9/6 5:00:06

今天学习了关于 set 集合的一些知识和基本操作步骤,现摘录如下:#set的基本操作(无序,不可重复,不可修改) #定义 s {a,a,b,c,d,e,f,g,h,i} #空集合定义 #s1 set{}这样的定义是字典 #由于集合无序,因此不支持下标索引访…

基于Python和Vue3的学科竞赛管理系统毕业设计全解析

基于Python和Vue3的学科竞赛管理系统毕业设计全解析

2026/9/6 5:00:06

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

从零自建智能温室环境监测系统:传感器选型与部署全攻略

从零自建智能温室环境监测系统:传感器选型与部署全攻略

2026/9/6 5:00:05

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

语音模块串口协议设计六要点:帧结构、校验与联调实战

语音模块串口协议设计六要点:帧结构、校验与联调实战

2026/9/6 4:50:05

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

中国人民大学杨琳团队《Nature Communications》 | 全球潮汐湿地土壤有机碳时空格局与环境驱动:一项2009-2020年的全球评估

中国人民大学杨琳团队《Nature Communications》 | 全球潮汐湿地土壤有机碳时空格局与环境驱动:一项2009-2020年的全球评估

2026/9/6 1:19:56

本文首发于“生态学者”!从“湿地面积”到“土壤碳密度”:为什么需要重新认识潮汐湿地蓝碳变化?潮汐湿地位于陆地与海洋的交汇地带,包括红树林、盐沼和潮滩,是全球重要的蓝碳生态系统。其土壤能够长期储存大量有机碳&a…

adb抓包

adb抓包

2026/9/6 1:19:56

前言 本文介绍如何通过 tcpdump 在 Android 手机上抓取网络数据包,并在电脑端使用 Wireshark 进行分析。适用于需要排查 App 网络请求、分析接口调用或调试网络问题的开发与测试场景。1. 手机要有 root 权限2. 下载 tcpdump3. adb push C:\Users\zhangkuixun\Downlo…

大模型推理镜像极简瘦身:从 25GB 巨无霸到 3GB 精简镜像实战

大模型推理镜像极简瘦身:从 25GB 巨无霸到 3GB 精简镜像实战

2026/9/6 1:19:56

大模型推理镜像极简瘦身:从 25GB 巨无霸到 3GB 精简镜像实战 在云原生基础设施中,容器镜像体积直接决定了服务的部署速度与弹性扩容敏捷度。对于传统的 Go / Java 微服务,镜像体积通常被严格控制在 50MB 到 200MB 以内,拉取镜像只…

中国人民大学杨琳团队《Nature Communications》 | 全球潮汐湿地土壤有机碳时空格局与环境驱动:一项2009-2020年的全球评估

中国人民大学杨琳团队《Nature Communications》 | 全球潮汐湿地土壤有机碳时空格局与环境驱动:一项2009-2020年的全球评估

2026/9/6 1:19:56

本文首发于“生态学者”!从“湿地面积”到“土壤碳密度”:为什么需要重新认识潮汐湿地蓝碳变化?潮汐湿地位于陆地与海洋的交汇地带,包括红树林、盐沼和潮滩,是全球重要的蓝碳生态系统。其土壤能够长期储存大量有机碳&a…

adb抓包

adb抓包

2026/9/6 1:19:56

前言 本文介绍如何通过 tcpdump 在 Android 手机上抓取网络数据包,并在电脑端使用 Wireshark 进行分析。适用于需要排查 App 网络请求、分析接口调用或调试网络问题的开发与测试场景。1. 手机要有 root 权限2. 下载 tcpdump3. adb push C:\Users\zhangkuixun\Downlo…

大模型推理镜像极简瘦身:从 25GB 巨无霸到 3GB 精简镜像实战

大模型推理镜像极简瘦身:从 25GB 巨无霸到 3GB 精简镜像实战

2026/9/6 1:19:56

大模型推理镜像极简瘦身:从 25GB 巨无霸到 3GB 精简镜像实战 在云原生基础设施中,容器镜像体积直接决定了服务的部署速度与弹性扩容敏捷度。对于传统的 Go / Java 微服务,镜像体积通常被严格控制在 50MB 到 200MB 以内,拉取镜像只…

远程协作的工作台整理

远程协作的工作台整理

2026/9/3 6:56:24

远程协作的工作台整理远程协作的核心不是再加一个工具,而是让交接信息足够完整。异步任务要写明目标、输入位置、完成标准和需要决策的人。 工作台的最小配置 将日程、待办、代码和沟通入口收拢到少数固定位置;通知按紧急程度分层。工作台不需要模仿办公…

持续集成 流水线自动化与 声明式交付 实践:原型怎样变成可用功能

持续集成 流水线自动化与 声明式交付 实践:原型怎样变成可用功能

2026/9/4 7:42:10

持续集成 流水线自动化与 声明式交付 实践:原型怎样变成可用功能分类:[AI/大模型]细分主题:AI 增强型 CI/CD 流水线自动化与 GitOps 实践:Agent 工作流、工具调用与任务拆解:从原型到生产的验收清单很多团队在尝试用大…

容器编排 生产环境运维与排障实战:复盘记录怎样真正派上用场

容器编排 生产环境运维与排障实战:复盘记录怎样真正派上用场

2026/9/5 23:14:13

容器编排 生产环境运维与排障实战:复盘记录怎样真正派上用场分类:[工程技术]细分主题:Kubernetes 生产环境运维与排障实战:可复制的项目复盘模板与决策记录大部分团队的事故复盘报告,最后都变成了躺在 Confluence 或钉…