[记录]修改el-table边框颜色

最新推荐文章于 2025-03-24 16:38:20 发布

dingpwen

最新推荐文章于 2025-03-24 16:38:20 发布

阅读量5.3k

点赞数 1

分类专栏： web开发文章标签： elementui vue.js

本文链接：https://blog.csdn.net/dingpwen/article/details/122127970

版权

web开发专栏收录该内容

7 篇文章

订阅专栏

本文记录了在Element UI版本2.15.6下修改el-table边框颜色的问题。传统的修改方法无效，因为源代码中border设为0。通过深入研究，找到了解决方案：使用.el-table td 和 .el-table th 画出大部分边线，再针对.el-table的右下角添加边线，并确保关键样式放在style scoped中。同时，.el-table__empty-block用于处理空表时的边框，而改变字体颜色则使用.el-table { color: black; }。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先看，网上搜到的方法：

.el-table--border:after,.el-table--group:after,.el-table:before {
    background-color: red;
}

.el-table--border,.el-table--group {
    border-color: red;
}

.el-table td,.el-table th.is-leaf {
    border-bottom: 1px solid red;
}

.el-table--border th,.el-table--border th.gutter:last-of-type {
    border-bottom: 1px solid red;
}
.el-table--border td,.el-table--border th {
    border-right: 1px solid red;
}

亲测，没有用，可能是element-ui的版本不一样，我这打开ElTableBody相关代码，发现：

 render(h) {
    const data = this.data || [];
    return (
      <table
        class="el-table__body"
        cellspacing="0"
        cellpadding="0"
        border="0">

这里border=“0”，所以上面的设置，是不会起作用的。

然后，根据源代码及也参考了上面的修改，经多方测试，得到修改方法如下：

.el-table th {
  border: 1px solid black;
}

.el-table td {
  border: 1px solid black;
  color: black;
}

.el-table__empty-block {
  border-left: 1px solid black;
  border-top: 1px solid black;
}
.el-table{
  color: black;
}
</style>

<style scoped>
.el-table {
  border-right: 1px solid black;
  border-bottom: 1px solid black;
}