修改elementUi的表格样式el-table背景色

/*去除底边框*/
::v-deep.el-table td.el-table__cell {
 border: 0;
}
::v-deep.el-table th.el-table__cell.is-leaf {
 border: 0;
}
/*去除底部灰条.el-table::before*/
::v-deep .el-table::before {
  display: none;
}
/*最外层透明*/
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
 background-color: transparent !important;
}
/* 表格内背景颜色 */
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
 background-color: transparent !important;
 border: 0; //去除表格
}
  • 7
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要为el-table的多级表头中的单个表头设置背景色,可以使用header-cell-style属性。首先,你需要在el-table中设置header-cell-style属性,并将其值设置为一个函数。在这个函数中,你可以根据表头的索引来判断要设置背景色的表头,并返回一个包含背景色样式的对象。例如,你可以使用以下代码来设置不同表头的背景色: ```html <el-table :data="tableData" border :header-cell-style="tableRowClassName" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"></el-table-column> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="address" label="位置" width="180"></el-table-column> </el-table> ``` 然后,在methods中定义tableRowClassName函数,该函数接收一个包含row、column、rowIndex和columnIndex的参数对象。你可以根据columnIndex来判断要设置背景色的表头,并返回一个包含背景色样式的类名。例如,你可以使用以下代码来设置不同表头的背景色: ```javascript methods: { tableRowClassName({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0) { return "background:#ccc;"; } else if (columnIndex === 1) { return "background:#19e9ec;"; } else if (columnIndex === 2) { return "background:#438eea;"; } }, } ``` 这样,你就可以根据表头的索引来设置不同表头的背景色了。 #### 引用[.reference_title] - *1* *3* [elementui || 如何更改el-table某一个表头的背景颜色和字体颜色](https://blog.csdn.net/qq_45791799/article/details/121556323)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [element表格修改每个表头不同颜色](https://blog.csdn.net/Js_Zoro/article/details/118111672)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值