Element el-table 列表自定义样式

效果图

效果图

页面代码块

<el-table
   ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
    type="selection"
    width="55">
    </el-table-column>   
    <el-table-column
    v-for="item in tableTitle"
    :key="item.prop"
    :prop="item.prop"
    :label="item.lable"
    :width="item.width">
    </el-table-column>
   
</el-table>

CSS样式


<style>
.el-table th, .el-table tr,.el-table, .el-table__expanded-cell{
    
    
    background-color: transparent !important;
}
.el-table,.el-table__empty-text{
    
    
    color: #fff !important;
}
.el-table--enable-row-hover .el-table__body tr:hover>td{
    
    
    background-color: rgba(0,0,0,.3) !important;
}
.el-table thead{
    
    
    color: #58BAFF !important;
}
.el-table:before{
    
    
    background-color: #4094DE !important;
}
.el-table td, .el-table th.is-leaf{
    
    
    border-bottom: 1px solid #0095F4 !important;
}
</style>

猜你喜欢

转载自blog.csdn.net/yuanbo_520/article/details/131681470