eel-table 自定义表头加多选列

### 如何在 el-table 中实现自定义表头并添加多选列 #### 自定义表头 为了给 `el-table` 的特定列添加带有红色 * 号的表头，可以在渲染函数或模板中通过设置 `header-cell-style` 或者监听 `header-cell-class-name` 来动态改变样式。具体来说，在 `<el-table>` 组件内增加对 `header-cell-class-name` 属性的支持，并编写相应的方法来判断哪些列为必填项从而应用特殊样式。 对于需要标记为必填字段的情况，可以创建一个新的 CSS 类 `.must` 定义所需的外观效果： ```css /* 必填字段表头样式 */ .must { color: red; } ``` 接着，在 JavaScript 方法里指定哪几列应该加上此类名： ```javascript methods: { must({ columnIndex }) { const requiredColumns = [2, 3, 4, 5, 6, 7]; // 需要加星号的列索引列表 if (requiredColumns.includes(columnIndex)) { return 'must'; } }, }, ``` 最后将其绑定到表格组件上： ```html <el-table :data="tableData" @header-cell-class-name="must"> <!-- 列配置 --> </el-table> ``` 此部分实现了自定义表头的需求[^4]。 #### 添加多选列 关于如何获取被勾选的数据行ID数组的问题，虽然官方API文档并未直接给出解决方案，但从Element UI库内部逻辑出发，可以通过访问实例上的 `selection` 属性轻松完成这项工作。当设置了 `type='selection'` 后，整个表格对象将会维护一份当前已选择记录的状态副本。因此只需简单调用如下所示的一行JavaScript语句即可获得所需的结果集： ```javascript const selectedRowIds = this.$refs.table.selection.map(item => item.id); console.log(selectedRowIds); // 输出所选项对应的 ID 数组 ``` 这里假设已经为 `<el-table>` 设置了一个引用名称以便后续操作，比如这样写法: ```html <el-table ref="table" ... > ... </el-table> ``` 综上所述，完整的HTML结构可能看起来像下面这段代码片段一样： ```html <div id="app"> <el-table ref="table" :data="tableData" style="width: 100%" @header-cell-class-name="must"> <!-- 多选框 --> <el-table-column type="selection"></el-table-column> <!-- 数据列 --> <el-table-column label="商品" prop="name"></el-table-column> <el-table-column label="价格" prop="price"></el-table-column> <!-- 更多数据列... --> </el-table> <button @click="getSelectedRows">获取选中的行</button> </div> ``` 以及相应的Vue实例方法用于处理按钮点击事件以打印出选定项目的ID集合： ```javascript new Vue({ ... methods: { getSelectedRows() { console.log(this.$refs.table.selection.map(row => row.id)); }, must(/* 参数同前 */), } }); ``` 上述方式不仅解决了原问题提到的内容，还展示了怎样结合两者共同作用于同一个表格之中[^1]。