Vue 学习随笔系列十七 -- 表格样式修改

表格样式修改

文章目录

• 表格样式修改
• • 一、表格背景颜色修改
  • • 1、方法一
    • 2、方法二
  • 二、多级表头颜色修改

---

一、表格背景颜色修改

1、方法一

表格外套一个 div ，修改div的背景色，并将表格背景色设置为透明

参考代码：

<template>
    <div class="custom-table">
        <el-table
            size="mini"
            border
            :data="tableData"
            :max-height="tableHeight"
            style="width: 100%">
            <el-table-column
                v-for="(item, index) in tableColumns"
                :key="index"
                v-bind="item"
                align="center"
                >
            </el-table-column>
            <el-table-column
                label="操作"
                fixed="right"
                align="center"
                width="100"
            >
                <template slot-scope="scope">
                    <span
                        class="del-btn"
                        @click="emitEvent({eventName:'deleteItem',params:scope.row})"
                    >删除</span>
                </template>
            </el-table-column>           
        </el-table>
    </div>
</template>

<script>
    export default {
        props: { 
            tableData: {
                type: Array,
                default: () => []
            },
            tableHeight: {},
            tableColumns: {
                default: () => []
            }
        },
        data() {
            return { }
        }, 
    }
</script>

<style lang="less" scoped>
    .del-btn {
        color: #4597EB;
        cursor: pointer;
    }

    .custom-table /deep/ .el-table, .el-table__expaned-cell {
        background-color: transparent;
    }
    .custom-table /deep/ .el-table tr {
        background-color: transparent !important;
    }
    .custom-table /deep/  .el-table--enable-row-transition .el-table__body td, .el-table .cell{
        background-color: transparent;
    }
    .custom-table /deep/ .el-table th.el-table__cell {
        background: transparent !important; // 表头背景透明
    }
    .el-table::before { //去除底部白线
        left: 0;
        bottom: 0;
        width: 100%;
        height: 0px;
    }
</style>

2、方法二

直接修改表格背景颜色

<template>
    <div class="custom-table">
        <el-table
            size="mini"
            border
            :data="tableData"
            :max-height="tableHeight"
            style="width: 100%">
            <el-table-column
                v-for="(item, index) in tableColumns"
                :key="index"
                v-bind="item"
                align="center"
                >
            </el-table-column>
            <el-table-column
                label="操作"
                fixed="right"
                align="center"
                width="100"
            >
                <template slot-scope="scope">
                    <span
                        class="del-btn"
                        @click="emitEvent({eventName:'deleteItem',params:scope.row})"
                    >删除</span>
                </template>
            </el-table-column>           
        </el-table>
    </div>
</template>

<script>
    export default {
        props: { 
            tableData: {
                type: Array,
                default: () => []
            },
            tableHeight: {},
            tableColumns: {
                default: () => []
            }
        },
        data() {
            return {
                
            }
        },
        methods: {
            emitEvent ({ eventName, params }) {
                this.$emit(eventName, params)
            }
        }, 
    }
</script>

<style lang="less" scoped>
    .del-btn {
        color: #4597EB;
        cursor: pointer;
    }
    .custom-table {
        background: transparent;
    }
    .custom-table /deep/ .el-table th.el-table__cell,
    /deep/ .el-table tr,
    /deep/.el-table th {
    	color: '#FFF'; // 表格字体颜色
        background: red; // 表格背景颜色
    }

</style>

二、多级表头颜色修改

<template>
   <el-table 
	   :data="tableData" 
	   :header-cell-style="tableHeaderColor" 
	   border 
	   stripe
   >
</template>

<script>
export default {
    methods: {
         // 修改表头颜色
        tableHeaderColor ({ rowIndex, columnIndex }) {
            if (rowIndex === 0 && columnIndex === 0) {
                return "background:#D9EAFFFF;";
            }
            if (rowIndex === 0 && columnIndex === 2) {
                return "background: #FFF0E1FF;";
            }
            if (rowIndex === 0 && columnIndex === 3) {
                return "background: #E0F5E9FF;";
            }
            if (rowIndex === 0 && columnIndex === 4) {
                return "background: #D9EAFFFF;";
            }
            if (rowIndex === 0 && columnIndex === 5) {
                return "background: #FFF0E1FF;";
            }
            if (rowIndex === 0 && columnIndex === 6) {
                return "background: #E0F5E9FF;";
            }
        },
    }
}
</script>

<style>

</style>