<el-table
:data="jxpData"
:show-header="true"
:row-style="tableRowStyle"
:header-cell-style="tableHeaderStyle"
max-height="300"
style="width: 100%; overflow-y:auto;"
>
methods: {
tableRowStyle({row, rowIndex}) {
return `background-color: #004346;
color: #fff;
`
},
tableHeaderStyle({row, column, rowIndex, columnIndex}) {
if (rowIndex === 0) {
return `
background-color: #004346;
color: #fff;
height: 30px!important;
font-size: 14px;
`
}
}
}
如果需要给表头和每一行设置背景图片而不是背景色,需要先清除默认的背景颜色
代码如下:
/*将表格每一行的背景色去掉*/
.el-table, .el-table__expanded-cell, .el-table tr {
background-color: transparent;
}
// 奇数行和偶数行设置不同的背景背景图片
methods: {
tableRowStyle({row, rowIndex}) {
if (rowIndex % 2 == 0) {
return `background: url("./img/tr.png") no-repeat;
background-size: 100% 100%;
color: #fff;
border: none;
background-position: left center;
`
}else {
return `background: url("./img/tr_other.png") no-repeat;
background-size: 20px 100%;
color: #fff;
border: none;
background-position: 13px center;
`
}
}
}
/*表格每一行被hover时的样式设置*/
.el-table--enable-row-hover .el-table__body tr:hover>td {
background-color: rgba(141, 214, 217, .4);
}
/*表格某一行被点击时的样式*/
.el-table__body tr.current-row>td {
background-color: rgba(141, 214, 217, .4)
}