elementPlus中el-table设置背景透明，修改底部边框颜色

最新推荐文章于 2024-08-16 23:32:06 发布

-小C_

最新推荐文章于 2024-08-16 23:32:06 发布

阅读量1.3k

点赞数 2

分类专栏： vue3随手记文章标签： vue.js javascript

本文链接：https://blog.csdn.net/m0_75107188/article/details/132501392

版权

vue3随手记专栏收录该内容

36 篇文章 0 订阅

订阅专栏

前提问题：表格设置背景透明，并且修改底部边框颜色

解决过程：elementPlus中修改el-table背景和边框样式，第一使用deep，第二在el-table外层加一层div

解决结果：

html：

<div class="topTable">       
    <el-table :data="state.tableData" class="tableSpec" height="100%" >
        <el-table-column prop="date" label="名称" align="center" show-overflow-tooltip/>
        <el-table-column prop="ss" label="次数" align="center"/>
        <el-table-column prop="name" label="概率" align="center"/>
        <el-table-column prop="address" label="总数" align="center"/>              
        <el-table-column prop="address" label="状态" align="center" show-overflow-tooltip>
            <template #default="scope">
                <span style="color:#5AEE93">
                   {{ scope.row.address }}
                </span>
            </template>
        </el-table-column>
    </el-table>
</div>

css:

.topTable{
    height: 70%;
    margin: 0.05rem 0;
    .tableSpec{
        width: 100%;
        --el-table-border-color: rgba(222, 253, 255, 0.16);
     }
     :deep(.el-table){
        background-color: transparent;
     }
     :deep(.el-table__expanded-cell){
        background-color: transparent;
     }
     :deep(.el-table th){
        background-color: rgba(0, 238, 246, 0.08) !important;
        color: #00FFFF;
        font-size: 0.06rem;
     }
     :deep(.el-table tr){
        background-color: transparent !important;
        color: #FFFFFF;
     }
     :deep(.el-table td){
        background-color: transparent !important;
     }
     .el-table__fixed::before{
        background-color: transparent;
     }
}