文章目录
- 前言
- 一、前端怎么知道用户勾选了哪几行？？
- 二、第一步：表格开启“多选框”
- 1.Element Plus 表格想支持勾选，必须先加这一列：
- 第二步：准备一个变量存“选中数据”
- 第三步：监听勾选变化
- 第四步：提取患者 ID（最关键）
- 总结一句话
前言
背景说明：为什么要“选中行”？
在后台管理系统中，经常有这种需求点击【批量分配】把选中的患者 ID 传给后端批量删除患者、批量出院
一、前端怎么知道用户勾选了哪几行？？
用 el-table 的 多选功能 + selection-change 事件
二、第一步：表格开启“多选框”
1.Element Plus 表格想支持勾选，必须先加这一列：
代码如下（示例）：
<el-table:data="tableData"@selection-change="handleSelectionChange"><!--多选框列--><el-table-column type="selection"width="55"/><el-table-column prop="name"label="姓名"/><el-table-column prop="age"label="年龄"/></el-table><el-table-column type="selection"/>>作用： 👉 自动在最前面生成 ☑️ 勾选框第二步：准备一个变量存“选中数据”
conststate=reactive({sels:[]as any[]// 存放选中的行})该处使用的url网络请求的数据。
第三步：监听勾选变化
@selection-change="handleSelectionChange"<el-table:data="tableData"@selection-change="handleSelectionChange">consthandleSelectionChange=(rows:any[])=>{state.sels=rows}这一步在干嘛？
每次：
勾选
取消
全选
都会触发这个函数。
并且：
rows = 当前所有选中的行数据
第四步：提取患者 ID（最关键）
标准写法（安全版）
constids=state.sels.map(r=>r?.id).filter(Boolean)map → 取 id
filter → 删除空值
总结一句话
用 selection 拿行
用数组存
用 map 取 id
调接口
