乐趣区

关于前端:Vue-改变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 !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}
退出移动版