ElementUI边框样式自定义

今天需要实现自定义的表格边框样式，但是官方并没有例子说明，不过提供的有api去操作。在 Element Plus 的 <el-table> 组件中，表头的边框样式默认是由 border 这个属性控制的，但是如果你需要自定义表头的边框样式，可以使用 header-row-style 或者 header-cell-style 结合 CSS 来实现。

---

方法 1：使用 header-cell-style

如果你只想修改 表头单元格 的边框，可以使用 header-cell-style：

<el-table 
  :data="tableData"
  border
  :header-cell-style="{ border: '2px solid #ff0000' }"
  size="large">
</el-table>

说明：

• header-cell-style 用于设置 表头单元格 的样式，每个 th（表头单元格）都会应用这个样式。
• border: '2px solid #ff0000' 让表头的每个单元格都带有红色 2px 边框。

---

方法 2：使用 header-row-style

如果你想给 整行表头 统一设置边框：

<el-table 
  :data="tableData"
  border
  :header-row-style="{ borderBottom: '3px solid #75a2f3' }"
  size="large">
</el-table>

说明：

• header-row-style 作用在表头的 整行（tr），比如可以设置 borderBottom 给整个表头添加下边框。

---

方法 3：使用 deep 方式自定义表头样式

如果你想更精细地控制表头的样式（比如边框颜色、粗细），可以用 deep 选择器：

<template>
  <el-table :data="tableData" border size="large">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
  </el-table>
</template>

<style scoped>
/* 自定义表头的边框 */
:deep(.el-table__header th) {
  border: 2px solid #ff0000 !important; /* 红色边框 */
}
</style>

说明：

• :deep(.el-table__header th) 作用于表头的 th，确保边框样式能生效。
• !important 用于覆盖默认样式（有时候 Element Plus 的默认样式可能会影响你的修改）。

• 如果你使用 scss，可以改成：

  ::v-deep(.el-table__header th) {
    border: 2px solid #ff0000 !important;
  }

---

总结

方式	适用范围	适用情况
header-cell-style	单个 th	需要给每个表头单元格加边框
header-row-style	整个表头 tr	统一给整个表头加边框
:deep(.el-table__header th)	深度选择 th	更精准控制样式，适用于复杂自定义需求

如果你只是要简单加个边框，用 方法 1 最方便。如果需要复杂的样式控制，推荐 方法 3。