设置el-table的表格头部样式和每一行样式

<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)
}

猜你喜欢

转载自blog.csdn.net/weixin_43412413/article/details/99442088