改变element ui table input等组件的边框颜色

前言

使用element ui开发的项目，有时候需要调整table等边框颜色，此时我们需要覆盖element框架的默认颜色样式。代码如下：

/*checkbox边框颜色*/
.el-checkbox__inner{
    border-color: #C0C4CC;
}
.el-input__inner{
    border-color: #C0C4CC;
}
/*table边框颜色*/
.el-table--border:after,
.el-table--group:after,
.el-table:before {
    background-color: #C0C4CC;
}
.el-table--border,
.el-table--group {
    border-color: #C0C4CC;
}
.el-table td,
.el-table th.is-leaf {
    border-bottom: 1px solid #C0C4CC;
}

.el-table--border th,
.el-table--border th.gutter:last-of-type {
    border-bottom: 1px solid #C0C4CC;
}

.el-table--border td,
.el-table--border th {
    border-right: 1px solid #C0C4CC;
}

注意：此样式需要写在全局样式中，如果需要在单独vue页面里面使用，需要在每个class类之前加上/deep/进行样式穿透，如：

/*checkbox边框颜色*/
/deep/.el-checkbox__inner{
    border-color: #C0C4CC;
}

实际上，由于设置的地方较多，为了方便更改统一颜色样式，可以单独抽离边框颜色到全局变量，然后再统一设置颜色，这样就不用每次都改变很多颜色了。
效果图，改变前：

elementtable2.png

效果图，改变后：

elementtable1.png