前提问题:表格设置背景透明,并且修改底部边框颜色
解决过程: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;
}
}