ElementUI:设置table的背景透明、根据表格情况设置背景色、设置文字颜色、文字左右间距、表头、每一行高度

line-height: 30px;

}

/每一行/

::v-deep .el-table__body tr,

::v-deep.el-table__body td {

padding: 0;

height: 30px;

line-height: 30px;

}

根据情况设置背景颜色

=====================================================================

绑定样式函数: :cell-style="cellStyle"

cellStyle(row){//根据情况显示背景色

if(row.column.label===“正常”){

return ‘background:#2D5AB9’

}else if(row.column.label===“滞后”){

return ‘background:#974356’

}

}

同理可以设置其他的

完整样式

===============================================================

在这里插入图片描述

完整代码

===============================================================

<el-table

:data=“tableData”

style=“width: 100%;font-size:10px;”

:cell-style=“cellStyle” >

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
根据提供的引用内容,要改变el-table中某个表头背景色,可以使用以下代码: ```html <el-table ref="dateTable" :data="tableData" :header-cell-style="tableHeaderColor" border stripe> <!-- 修改表头颜色 --> </el-table> ``` 在Vue组件中,可以通过在el-table中添加`:header-cell-style`属性来设置表头的样式。在`tableHeaderColor`方法中,可以根据`rowIndex`和`columnIndex`来判断要修改表头,并返回相应的样式。 ```javascript tableHeaderColor({ rowIndex, columnIndex }) { if (rowIndex === 0 && columnIndex === 0) { return { background: '#fffaee' } } else if (rowIndex === 0 && columnIndex !== 0) { return { background: '#FFBD7C', border: '0' } } else { return { background: '#fffaee' } } } ``` 这样就可以根据需要修改el-table中某个表头背景色了。 #### 引用[.reference_title] - *1* *3* [el-table设置表头背景色tr间距和tr背景色](https://blog.csdn.net/qq_40576178/article/details/120366916)[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* [el-table 修改多级表头背景色](https://blog.csdn.net/weixin_68878908/article/details/128680580)[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、付费专栏及课程。

余额充值