el-table设置表头样式

### 设置 `el-table` 表头行高 为了设置 Element UI 中 `el-table` 的表头行高，可以采用样式覆盖的方式。通过自定义 CSS 类来修改 `.cell` 或者更具体的选择器如 `.el-table th.is-leaf` 来达到目的。 对于表头部分，可以通过`:header-cell-style` 属性传递内联样式对象给每一个头部单元格[^4]： ```css /* 自定义CSS类 */ .table-header { padding: 0 !important; } ``` 在组件中应用此风格并指定特定的高度值: ```html <template> <div> <!-- 使用 header-row-style 和 header-cell-style 定义表头样式 --> <el-table :data="tableData" :header-cell-style="{padding:'0', 'background-color': '#f0f9eb','height':'40px'}"> <el-table-column prop="date" label="日期"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [ { date: "2016-05-03", name: "Tom", address: "No. 189, Grove St, USA" }, // 更多的数据... ] }; } }; </script> ``` 上述代码片段展示了如何利用 Vue.js 结合 Element UI 库中的 `<el-table>` 组件，并通过 `:header-cell-style` 动态绑定内联样式以设定固定的表头高度为 40 像素。 另外一种方式是直接操作全局或局部作用域内的 CSS 文件，在其中加入针对`.el-table th.is-leaf`的选择器规则，从而影响整个项目里所有表格控件的默认外观表现形式: ```css .el-table th.is-leaf { height: 40px; padding: 0; } ``` 这种方法适用于希望一次性更改多个页面上相同类型的组件样式的场景下使用。