ElementPlus 多个并列 Table 独立全选/取消全选 （适配嵌套表格业务）
业务场景
在后台管理系统开发中，经常会遇到动态渲染多个并列表格的复杂场景。
以某租房后台为例：
一个户型下可以添加多个「房间」，每个房间对应一张独立表格，表格内可配置租期、付款方式、月租金等参数。业务需要实现：
所有表格统一全选、取消全选
每个表格支持单独手动勾选，互不干扰
精准记录「哪些表格处于选中状态」，用于后续批量赋值、批量删除
表格无表头、嵌套表单组件，贴合后台复杂配置页样式
今天分享一套零 Bug、完全贴合真实业务的多表格全选解决方案（Vue3 + TS + ElementPlus）。
原理分析
1、v-for循环绑定同名ref，通过下标multipleTable.value[i]可获取每一个表格实例，解决 ref 覆盖问题
2、Vue 是异步 DOM 更新，nextTick保证在 DOM 渲染完成后再操作表格勾选 ，是功能生效的关键
3、ElementPlus 核心表格 API
toggleAllSelection()：表格原生全选/反选方法clearSelection()：清空表格所有选中项selection-change：表格勾选状态变化监听事件
核心完整源码
<template> <div class="demo"> <!-- 全局操作按钮 --> <el-button type="primary" link @click="selectAll">[全选]</el-button> <el-button type="primary" link @click="selectCancel">[取消全选]</el-button> <!-- 动态循环多个独立表格 --> <el-table v-for="(room, roomIndex) in formData.rooms" :key="roomIndex" :data="room.prices" border :show-header="false" ref="multipleTable" @selection-change="(val) => handleSelectChange(val, roomIndex)" highlight-current-row > <!-- 多选框列 --> <el-table-column type="selection" width="55"></el-table-column> <!-- 房间号（整表共用） --> <el-table-column label="房间号" width="150"> <template #default="{row}"> <el-input v-model="room.name" placeholder="房间号" clearable/> </template> </el-table-column> <!-- 租期 --> <el-table-column label="租期" width="150"> <template #default="{row}"> <el-select v-model="row.term_id" placeholder="租期" clearable filterable> <el-option label="半年" :value="1" /> <el-option label="一年" :value="2" /> </el-select> </template> </el-table-column> <!-- 付款方式 --> <el-table-column label="付款方式" width="150"> <template #default="{row}"> <el-select v-model="row.pay_type" placeholder="付款方式" clearable filterable> <el-option label="月付" :value="1" /> <el-option label="季付" :value="2" /> </el-select> </template> </el-table-column> <!-- 月租金 --> <el-table-column label="月租金" width="220"> <template #default="{row}"> <el-input v-model="row.price" placeholder="月租金" clearable> <template #append>元/月</template> </el-input> </template> </el-table-column> <!-- 默认开关 --> <el-table-column label="默认" > <template #default="{row, $index}"> <el-switch v-model="row.is_default" active-text="默认" inline-prompt :width="50" :active-value="1" :inactive-value="0" /> </template> </el-table-column> </el-table> </div> </template> <script lang="ts" setup> import { ref, reactive, nextTick } from 'vue' import type { ElTable } from 'element-plus' // 模拟业务数据源：多个房间 = 多个表格 const formData = reactive({ rooms: [ { name: 'a', prices: [{ term_id: '', pay_type: '', price: '', is_default: 0 }] }, { name: 'b', prices: [{ term_id: '', pay_type: '', price: '', is_default: 0 }] } ] }) // 收集所有表格实例（核心：解决多表格ref覆盖问题） const multipleTable = ref<(ElTable | null)[]>([]) // 记录【被选中的表格下标】，用于后续批量操作 const selectData = ref<number[]>([]) // 全局全选：所有表格全部勾选 const selectAll = () => { nextTick(() => { for (let i = 0; i < formData.rooms.length; i++) { const table = multipleTable.value[i] if (table) { table.toggleAllSelection() } // 记录所有表格为选中状态 if (!selectData.value.includes(i)) { selectData.value.push(i) } } console.log('全选选中索引', selectData.value) }) } // 全局取消全选：清空所有表格勾选 const selectCancel = () => { nextTick(() => { for (let i = 0; i < formData.rooms.length; i++) { const table = multipleTable.value[i] if (table) { table.clearSelection() } } }) // 清空选中记录 selectData.value = [] console.log('取消全选', selectData.value) } // 单表格勾选状态监听：实时维护选中表格索引 const handleSelectChange = (val: any[], roomIndex: number) => { if (val.length) { // 表格有选中行，加入选中列表 if (!selectData.value.includes(roomIndex)) { selectData.value.push(roomIndex) } } else { // 表格无选中行，移出选中列表 selectData.value = selectData.value.filter(item => item !== roomIndex) } console.log('当前选中表格索引', selectData.value) } </script> <style ></style>