应用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 !important;
}
.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;
}
设置表头的背景色
.has-gutter .el-table__cell{
background-color:#f2f2f2
}
发表回复