ElementPlus表格中的背景透明解决方案
作者：栀椩
最近写大屏,用到elementplus中的el-table,为了让显示效果好看一点,需要把表格的白色背景调整为透明,与整个背景融为一体,本文给大家介绍ElementPlus表格中的背景透明解决方案,感兴趣的朋友一起看看吧
ElementPlus表格中的背景透明
最近写大屏，用到elementplus中的el-table，为了让显示效果好看一点，需要把表格的白色背景调整为透明，与整个背景融为一体。可以参考的资料非常少，大部分都是ElmentUI的方法，在某个前端开发群里问了一下解决方案，大佬给出的解决方案直接让我拍案叫绝，记录一下，以后翻起来更容易。
直接上代码：
<template>
<el-table :data="tableData" height="300" :row-style="rowstyle">
<el-table-column v-for="(item, index) in tableForm" :key="index" :prop="item.prop" :label="item.label"
show-overflow-tooltip></el-table-column>
</el-table>
</template>
<script setup>
import { ref, onMounted, toRefs } from 'vue'
// import { getHighwayTrafficApi } from '@/apis/predictTraffic'
const tableForm = [
{ prop: 'road_name', label: '路名', width: 20 },
{ prop: 'section_desc', label: '堵点', width: 40 },
{ prop: 'speed', label: '速度', width: 20 },
{ prop: 'status', label: '状态', width: 20 },
{ prop: 'congestion_distance', label: '长度', width: 20 },
{ prop: 'congestion_trend', label: '趋势', width: 20 },
]
const props = defineProps({
tableData: Array
})
const rowstyle = ({ row, rowIndex }) => {
if (rowIndex % 2 === 0) {
return {
backgroundColor: 'rgba(3, 76, 106, 1)',
}
}
}
</script>
<style lang="scss" scoped>
.el-table {
--el-table-border-color: transparent;
--el-table-border: none;
--el-table-text-color: #bdbdbe;
--el-table-header-text-color: #bdbdbe;
--el-table-row-hover-bg-color: transparent;
--el-table-current-row-bg-color: transparent;
--el-table-header-bg-color: transparent;
--el-table-bg-color: transparent;
--el-table-tr-bg-color: transparent;
--el-table-expanded-cell-bg-color: transparent;
}
</style>效果如下：
补充：
elementPlus中el-table设置背景透明，修改底部边框颜色
前提问题：表格设置背景透明，并且修改底部边框颜色
解决过程：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;
}
}
到此这篇关于ElementPlus表格中的背景透明的文章就介绍到这了,更多相关ElementPlus表格背景透明内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！