请选择 进入手机版 | 继续访问电脑版
MSIPO技术圈 首页 IT技术 查看内容

Element el-table 列表自定义样式

2023-07-13

效果图

效果图

页面代码块

<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>

相关阅读

热门文章

    手机版|MSIPO技术圈 皖ICP备19022944号-2

    Copyright © 2024, msipo.com

    返回顶部