el-table表头tr背景颜色 修改

### 修改 Element UI `el-table` 表头背景样式 可以通过设置 `header-cell-style` 属性来实现对表头样式的自定义。以下是具体方法： #### 方法一：通过属性配置 可以直接在 `<el-table>` 组件上绑定 `:header-cell-style` 属性，传入一个对象或者函数来自定义表头单元格的样式。 ```vue <template> <el-table :data="tableData" :header-cell-style="{ background: '#eef1f6', color: '#606266' }"> <!-- 列定义 --> </el-table> </template> <script> export default { data() { return { tableData: [ // 数据源 ] }; } }; </script> ``` 上述代码实现了基本的表头背景颜色和字体颜色更改[^1]。 --- #### 方法二：通过 CSS 类名覆盖默认样式 如果需要更复杂的样式调整，可以利用 `.el-table th` 的类名进行全局或局部样式定制。 ```css /* 全局样式 */ .el-table thead tr th { background-color: #eef1f6; color: #606266; } /* 或者针对特定表格应用样式 */ .custom-header-class .el-table thead tr th { background-color: #dfebf8; color: #4a5c7b; } ``` 在模板中为 `<el-table>` 添加对应的 class 即可生效。 ```vue <el-table :data="tableData" class="custom-header-class"></el-table> ``` 这种方法适用于需要统一管理多个表格的情况。 --- #### 方法三：动态计算样式（高级） 当不同列需要不同的样式时，可通过 `header-cell-style` 接收一个返回值为对象的函数来进行动态控制。 ```vue <template> <el-table :data="tableData" :header-cell-style="setHeaderCellStyle"> <!-- 列定义 --> </el-table> </template> <script> export default { methods: { setHeaderCellStyle({ row, column, rowIndex, columnIndex }) { const styles = {}; if (columnIndex === 0) { styles.backgroundColor = "#ffeb3b"; // 黄色背景 styles.color = "#fff"; } else { styles.backgroundColor = "#eef1f6"; styles.color = "#606266"; } return styles; } }, data() { return { tableData: [] }; } }; </script> ``` 此方式允许开发者根据不同条件灵活设定每列的头部样式。 --- #### 注意事项 - 如果表格高度超过容器范围并启用了滚动条，则需额外处理固定表头逻辑以保持视觉一致性[^2]。 - 对于复杂场景下的自定义需求，可能还需要结合插槽机制完成进一步扩展[^3]。 --- ### 总结 以上三种方案分别适合简单、通用以及复杂的需求环境，在实际开发过程中可根据项目具体情况选择最合适的实现路径。

### 修改 `el-table` 表头边框为圆角样式 为了实现 `el-table` 表头的边框圆角效果，可以采用自定义 CSS 来覆盖默认样式。具体方法如下： #### 方法一：使用全局样式文件 可以在项目的全局样式文件中添加特定的选择器来调整表头单元格的 `border-radius` 属性。 ```css /* 自定义表头单元格的圆角 */ .el-table th.is-leaf { border-top-left-radius: 8px; border-top-right-radius: 8px; } ``` 对于首列的特殊处理，可以通过增加额外的选择器来确保仅对该列应用圆角效果[^1]。 ```css /* 针对首列的第一个和最后一个th元素设置不同的圆角半径 */ .el-table .cell:first-child { border-bottom-left-radius: 8px !important; } .el-table thead tr th:nth-last-of-type(2) { border-bottom-right-radius: 8px !important; } ``` #### 方法二：内联样式或 scoped 样式 如果希望作用范围更局限，则可以直接在组件内部通过 `<style scoped>` 定义局部样式，或者利用 inline-style 方式指定单个表格实例上的样式。 需要注意的是，在移除不需要的边框线条方面，可能还需要重置一些默认属性以防止多余的边框显现出来[^2]。 ```css /* 移除整个表格以及各部分之间的内外边距与间距 */ .el-table, .el-table__expanded-cell { border: none; } .el-table td, .el-table th.is-leaf { border-bottom: none; } ``` 上述代码片段展示了如何有效地去除不必要的边框并设定所需的圆角效果。