Element组件库Table表格样式设置背景半透明

先来看下实现效果

实现效果截图

直接上代码

    <template>
        <div class="table_c">
            <div class="table_all">
                <el-card shadow="hover" class="tebale_card">
                    <el-table :data="tableData" border style="width: 100%;" :row-style="getRowClass" :header-row-style="getRowClass" :header-cell-style="getRowClass">
                        <el-table-column prop="date" label="日期" width="180">
                        </el-table-column>
                        <el-table-column prop="name" label="姓名" width="180">
                        </el-table-column>
                        <el-table-column prop="address" label="地址">
                        </el-table-column>
                    </el-table>
                </el-card>
            </div>
        </div>
    </template>

    <script>
    export default {
        name: "TableC",
        data() {
            return {
                tableData: [
                    {
                        date: "测试",
                        name: "测试",
                        address: "测试"
                    },
                    {
                        date: "测试",
                        name: "测试",
                        address: "测试"
                    },
                    {
                        date: "测试",
                        name: "测试",
                        address: "测试"
                    },
                    {
                        date: "测试",
                        name: "测试",
                        address: "测试"
                    }
                ]
            };
        },
        methods: {
            getRowClass({ row, column, rowIndex, columnIndex }) {
                return "background:#3f5c6d2c;color:#000;";
            },
        }
    };
    </script>

    <style scoped>
    .table_c {
        width: 100%;
        height: 500px;
        background: url("../../../../assets/images/TestImage/background.jpg") center
            center no-repeat;
        background-size: 100% auto;
        padding: 10px;
    }
    .tebale_card {
        background-color: #3f5c6d2c;
    }
    .el-table,
    .el-table__expanded-cell {
        background-color: #3f5c6d2c;
    }

    </style>

除了打开F12去找类名修改，发现修改不完善，又去看文档，找到了设置单独行的属性，然后修改样式后完成上面效果

这里卿洋
愿喜❤️