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

 

如果你想要对 Element UI 的 `el-table` 组件进行自定义样式,可以使用以下方法: 1. 使用 `slot` 插槽 `el-table` 组件提供了多个 `slot` 插槽,可以让你自定义表格的各个部分的样式和内容。例如,你可以使用 `header` 插槽来自定义表格头部样式和内容,使用 `empty` 插槽来自定义数据为空时的提示信息。 ```html <el-table :data="tableData"> <template v-slot:header> <th class="custom-header">自定义表格头</th> </template> <template v-slot:empty> <div class="custom-empty">暂无数据</div> </template> </el-table> ``` 在这个例子中,我们使用 `header` 插槽自定义了表格头的样式和内容,使用 `empty` 插槽自定义了数据为空时的提示信息。我们可以在 CSS 中定义 `.custom-header` 和 `.custom-empty` 类,来对其进行自定义样式。 2. 使用 CSS 你可以使用 CSS 来对 `el-table` 组件进行自定义样式。例如,你可以使用类选择器来修改表格的各个部分的样式,如表格头、表格行、表格列等等。 ```html <el-table :data="tableData" class="custom-table"> </el-table> ``` ```css .custom-table .el-table__header { background-color: #f2f2f2; font-weight: bold; } .custom-table .el-table__row:hover { background-color: #f5f5f5; } ``` 在这个例子中,我们在 `el-table` 上添加了一个名为 `custom-table` 的类,然后在 CSS 中使用类选择器 `.custom-table` 来修改表格样式。我们可以使用 `.el-table__header` 来修改表格头的样式,使用 `.el-table__row` 来修改表格行的样式
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值