核心内容摘要
《男生女生向前冲》：勾起回忆杀，重温青春的“愁愁愁”
文章目录前言
前端怎么知道用户勾选了哪几行
第一步表格开启“多选框”
Element Plus 表格想支持勾选必须先加这一列第二步准备一个变量存“选中数据”第三步监听勾选变化第四步提取患者 ID最关键
总结一句话前言背景说明为什么要“选中行”在后台管理系统中经常有这种需求点击【批量分配】把选中的患者 ID 传给后端批量删除患者、批量出院
前端怎么知道用户勾选了哪几行用 el-table 的 多选功能 selection-change 事件
第一步表格开启“多选框”
Element Plus 表格想支持勾选必须先加这一列代码如下示例el-table:datatableDataselection-changehandleSelectionChange!--多选框列--el-table-column typeselectionwidth55/el-table-column propnamelabel姓名/el-table-column propagelabel年龄//el-tableel-table-column typeselection/作用 自动在最前面生成 ☑️ 勾选框第二步准备一个变量存“选中数据”conststatereactive({sels:[]as any[]// 存放选中的行})该处使用的url网络请求的数据。
第三步监听勾选变化selection-changehandleSelectionChangeel-table:datatableDataselection-changehandleSelectionChangeconsthandleSelectionChange(rows:any[]){state.selsrows}这一步在干嘛每次勾选取消全选都会触发这个函数。
并且rows 当前所有选中的行数据第四步提取患者 ID最关键标准写法安全版constidsstate.sels.map(rr?.id).filter(Boolean)map → 取 idfilter → 删除空值