中国外贸网站排名,一个普通的网站做线上交易好吗,江门关键词按天优化,北京网站建设公司哪家最好表格样式修改 文章目录 表格样式修改一、表格背景颜色修改1、方法一2、方法二 二、多级表头颜色修改 一、表格背景颜色修改
1、方法一
表格外套一个 div #xff0c;修改div的背景色#xff0c;并将表格背景色设置为透明 参考代码#xff1a;
templatediv cl…表格样式修改 文章目录 表格样式修改一、表格背景颜色修改1、方法一2、方法二 二、多级表头颜色修改 一、表格背景颜色修改
1、方法一
表格外套一个 div 修改div的背景色并将表格背景色设置为透明 参考代码
templatediv classcustom-tableel-tablesizeminiborder:datatableData:max-heighttableHeightstylewidth: 100%el-table-columnv-for(item, index) in tableColumns:keyindexv-binditemaligncenter/el-table-columnel-table-columnlabel操作fixedrightaligncenterwidth100template slot-scopescopespanclassdel-btnclickemitEvent({eventName:deleteItem,params:scope.row})删除/span/template/el-table-column /el-table/div
/templatescriptexport default {props: { tableData: {type: Array,default: () []},tableHeight: {},tableColumns: {default: () []}},data() {return { }}, }
/scriptstyle langless 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、方法二
直接修改表格背景颜色
templatediv classcustom-tableel-tablesizeminiborder:datatableData:max-heighttableHeightstylewidth: 100%el-table-columnv-for(item, index) in tableColumns:keyindexv-binditemaligncenter/el-table-columnel-table-columnlabel操作fixedrightaligncenterwidth100template slot-scopescopespanclassdel-btnclickemitEvent({eventName:deleteItem,params:scope.row})删除/span/template/el-table-column /el-table/div
/templatescriptexport default {props: { tableData: {type: Array,default: () []},tableHeight: {},tableColumns: {default: () []}},data() {return {}},methods: {emitEvent ({ eventName, params }) {this.$emit(eventName, params)}}, }
/scriptstyle langless 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
二、多级表头颜色修改
templateel-table :datatableData :header-cell-styletableHeaderColor border stripe
/templatescript
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;;}},}
}
/scriptstyle/style
