elementui中el-table中多级表头勾选

### 实现多级表头的选择功能 为了在 `ElementUI` 的 `el-table` 组件中实现多级表头的选择功能，可以采用自定义渲染的方式处理每一层表头中的复选框逻辑。由于默认情况下 `el-table` 不支持直接设置多级表头的勾选项，因此需要通过组合多个 `<el-table-column>` 来模拟这一效果。 对于每个多级子项而言，在其对应的 `<el-table-column>` 中加入 `type="selection"` 属性来创建选择器，并确保这些列具有唯一的 `prop` 或者其他标识符以便区分不同级别的选择状态[^1]。 下面是一个简单的例子展示如何构建一个多级表头并为其添加全选/取消全选的功能： ```html <template> <div class="app-container"> <!-- 表格 --> <el-table ref="multipleTable" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange"> <!-- 多级表头部分 --> <el-table-column align="center" fixed> <template slot="header"> <el-checkbox v-model="selectAllLevelOne"></el-checkbox> </template> <el-table-column type="selection" width="55"/> </el-table-column> <el-table-column label="一级分类A" align="center"> <template slot="header" slot-scope="{ column }"> <span>{{ column.label }}</span> <el-checkbox v-if="!selectAllLevelTwo[column.id]" @change="(val) => handleSelectAll(val, column.id)"> {{ selectAllLevelTwo[column.id] ? '已选' : '未选'}} </el-checkbox> </template> <el-table-column prop="aSubItem1" label="二级-A-1" /> <el-table-column prop="aSubItem2" label="二级-A-2" > <template slot="header" slot-scope="{ column }"> <span>{{ column.label }}</span> <el-checkbox v-model="selectMap['aSubItem2']">全部</el-checkbox> </template> <el-table-column prop="subOfASubItem2_1" label="三级-A-2-1" /> <el-table-column prop="subOfASubItem2_2" label="三级-A-2-2" /> </el-table-column> </el-table-column> <!-- 更多的一级栏目... --> </el-table> </div> </template> <script> export default { data() { return { tableData: [], // 数据列表 selectAllLevelOne: false, selectAllLevelTwo: {}, selectMap: {} }; }, methods: { toggleSelection(rows) { if (rows) { rows.forEach(row => this.$refs.multipleTable.toggleRowSelection(row)); } }, handleSelectionChange(selection) { console.log('当前选择:', selection); let levelOneSelectedCount = 0; let totalRows = this.tableData.length; Object.keys(this.selectAllLevelTwo).forEach(key => { const subItemsChecked = !this.selectMap[key].some(item => !item.checked); this.$set(this.selectAllLevelTwo, key, subItemsChecked); if(subItemsChecked){ ++levelOneSelectedCount; } }); this.selectAllLevelOne = levelOneSelectedCount === Object.keys(this.selectAllLevelTwo).length && levelOneSelectedCount !== 0; }, handleSelectAll(checked, id) { this.$nextTick(() => { this.$set(this.selectMap[id], checked); this.handleSelectionChange(); }); } } }; </script> ``` 此代码片段展示了如何利用 Vue.js 和 Element UI 创建带有可选多级表头的表格结构。注意这里简化了一些细节以保持清晰度；实际应用时可能还需要考虑更多边界情况以及性能优化等问题。