2026/2/13 12:15:36
网站建设
项目流程
网站子域名,广州购物必去的地方,成都app,网站开发逻辑文章目录 前言一、前端怎么知道用户勾选了哪几行#xff1f;#xff1f;二、第一步#xff1a;表格开启“多选框”1.Element Plus 表格想支持勾选#xff0c;必须先加这一列#xff1a;第二步#xff1a;准备一个变量存“选中数据” 第三步#xff1a;监听勾选变化第四步…文章目录前言一、前端怎么知道用户勾选了哪几行二、第一步表格开启“多选框”1.Element Plus 表格想支持勾选必须先加这一列第二步准备一个变量存“选中数据”第三步监听勾选变化第四步提取患者 ID最关键总结一句话前言背景说明为什么要“选中行”在后台管理系统中经常有这种需求点击【批量分配】把选中的患者 ID 传给后端批量删除患者、批量出院一、前端怎么知道用户勾选了哪几行用 el-table 的 多选功能 selection-change 事件二、第一步表格开启“多选框”1.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 → 删除空值总结一句话用 selection 拿行用数组存用 map 取 id调接口