企业官网建设流程全解析

前言

背景说明：为什么要“选中行”？

在后台管理系统中，经常有这种需求点击【批量分配】把选中的患者 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
调接口