先來看下實(shí)現(xiàn)效果

實(shí)現(xiàn)效果截圖

直接上代碼

    <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去找類名修改，發(fā)現(xiàn)修改不完善，又去看文檔，找到了設(shè)置單獨(dú)行的屬性，然后修改樣式后完成上面效果

這里卿洋
愿喜??