element plus el-table 修改表格边框颜色

修改header边框：

试了很多方法，最简单的还是直接设置header-cell-style，修改表头其他样式也可以在里面改

:header-cell-style="{'background-color': '#263449', color: '#fff',textAlign: 'center', border: '1px solid #415776'}"

修改行边框：

:deep() { .el-table__row td { border-right: none; border: 1px solid #415776; } }

修改表格四周边框：

这是最麻烦的，因为它不是直接写在某个标签上，而是在伪类上，before和after中设置的

截其中一个图演示一下，因为我已经改了颜色 所以原来的设置被覆盖了

不多说了，上代码！

:deep() { /* 修改上下边框 */ .el-table__inner-wrapper:after, .el-table__inner-wrapper:before { background-color: #415776; } /* 修改左边框 */ .el-table__border-bottom-patch, .el-table__border-left-patch { background-color: #415776; } } /* 修改右边框 */ .el-table--border:after, .el-table--border:before { background-color: #415776; }

在2.10.7版本中不存在before伪元素，需要用下面样式实现

直接用border会使宽度变大从而出现横向滚动条，所以使用outline实现内边框

:deep() { .el-table__body { outline: 1px solid #07CCB230; outline-offset: -1px; } }