UI给的设计图,要求黑色背景的table和矩形进度条,首先考虑的是切换elementUI的主题,但是这个一切换就是全局切换,而需求是只有一个页面需要用到这种黑色主题,所以采用最粗暴的方法,直接修改elementUI中table组件和progress组件的样式
<style lang="less">
//table样式
.el-table th.is-leaf,
.el-table td {
border-bottom: 1px solid #2c2c39;
text-align: center;
}
.el-table tr {
background-color: #141423;
text-align: center;
}
.el-table {
background-color: #141423;
}
.el-table::before {
height: 0;
}
.el-table--enable-row-hover .el-table__body tr:hover > td {
background-color: #c6cfdf !important;
}
// 进度条样式
.el-progress-bar__outer,
.el-progress-bar__inner {
border-radius: none;
}
</style>
通过查阅elementUI中table组件的方法获得两个属性row-style和header-cell-style
<el-table :data="lessonList" :row-style="tableRowStyle" :header-cell-style="tableHeaderColor">
// 修改table tr行的背景色
tableRowStyle () {
return { 'background-color': '#141423', 'color': '#fff' }
},
// 修改table header的背景色
tableHeaderColor () {
return 'background-color: #141423;color: #fff;font-weight: 500;'
}
效果如下