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

表格样式修改

一、表格背景颜色修改

1、方法一

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

<template><div class="custom-table"><el-tablesize="mini"border:data="tableData":max-height="tableHeight"style="width: 100%"><el-table-columnv-for="(item, index) in tableColumns":key="index"v-bind="item"align="center"></el-table-column><el-table-columnlabel="操作"fixed="right"align="center"width="100"><template slot-scope="scope"><spanclass="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-tablesize="mini"border:data="tableData":max-height="tableHeight"style="width: 100%"><el-table-columnv-for="(item, index) in tableColumns":key="index"v-bind="item"align="center"></el-table-column><el-table-columnlabel="操作"fixed="right"align="center"width="100"><template slot-scope="scope"><spanclass="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>