快捷導(dǎo)航

ElementPlus表格中的背景透明解決方案

更新時(shí)間：2023年10月24日 14:46:13 作者：梔椩

最近寫(xiě)大屏,用到elementplus中的el-table,為了讓顯示效果好看一點(diǎn),需要把表格的白色背景調(diào)整為透明,與整個(gè)背景融為一體,本文給大家介紹ElementPlus表格中的背景透明解決方案,感興趣的朋友一起看看吧

ElementPlus表格中的背景透明

最近寫(xiě)大屏，用到elementplus中的el-table，為了讓顯示效果好看一點(diǎn)，需要把表格的白色背景調(diào)整為透明，與整個(gè)背景融為一體。可以參考的資料非常少，大部分都是ElmentUI的方法，在某個(gè)前端開(kāi)發(fā)群里問(wèn)了一下解決方案，大佬給出的解決方案直接讓我拍案叫絕，記錄一下，以后翻起來(lái)更容易。

直接上代碼：

<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: '堵點(diǎn)', width: 40 },
    { prop: 'speed', label: '速度', width: 20 },
    { prop: 'status', label: '狀態(tài)', width: 20 },
    { prop: 'congestion_distance', label: '長(zhǎng)度', width: 20 },
    { prop: 'congestion_trend', label: '趨勢(shì)', 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>

效果如下：

補(bǔ)充：

elementPlus中el-table設(shè)置背景透明，修改底部邊框顏色

前提問(wèn)題：表格設(shè)置背景透明，并且修改底部邊框顏色

解決過(guò)程：elementPlus中修改el-table背景和邊框樣式，第一使用deep，第二在el-table外層加一層div

解決結(jié)果：

html：

<div class="topTable">       
    <el-table :data="state.tableData" class="tableSpec" height="100%" >
        <el-table-column prop="date" label="名稱(chēng)" align="center" show-overflow-tooltip/>
        <el-table-column prop="ss" label="次數(shù)" align="center"/>
        <el-table-column prop="name" label="概率" align="center"/>
        <el-table-column prop="address" label="總數(shù)" align="center"/>              
        <el-table-column prop="address" label="狀態(tài)" 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;
     }
}

到此這篇關(guān)于ElementPlus表格中的背景透明的文章就介紹到這了,更多相關(guān)ElementPlus表格背景透明內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: