【前端学习日记】修改element表格el-table的边框颜色

想必不少小伙伴已经尝试过很多方法了。

我的最终的解决方案也是借鉴的大佬的，直接修改全局样式。

引用大佬博客

elementui 改变全局所有表格的边框颜色。_摸鱼的图图的博客-CSDN博客_element表格边框颜色

 步骤一

在assets文件夹下建立一个文件夹用来保存样式文件，并继续在该文件夹下建立一个css文件，如下图所示：

 步骤二

在建立的css文件中，加上以下代码：

/**
改变边框颜色
 */
 .el-table--border, .el-table--group {
    border: 2px solid #ddd!important;
}
/**
改变表格内竖线颜色
 */
.el-table--border  td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
    border-right: 1px solid #ddd!important;
}
/**
改变表格内行线颜色
 */
.el-table  td, .el-table th.is-leaf  {
    border-bottom: 1px solid #ddd!important;
}
 
.el-table thead tr th{
    border-color: #8c939d;
}
/* g改变表头字体颜色 */
.el-table thead {
    color: black;
}

步骤三 

保存后，全局引用这个css文件夹，我这里是在main.js文件中引用的：

// 引入表格样式
import './assets/elTable/style.css'

效果

再次感谢大佬！