修改elementUI中table组件样式和progress样式

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;'
     }

效果如下