100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > elementui更改el-table表头背景颜色和字体颜色

elementui更改el-table表头背景颜色和字体颜色

时间:2019-10-04 11:58:14

相关推荐

elementui更改el-table表头背景颜色和字体颜色

博主在使用elementui中的el-table时感觉默认表格样式实在过于简洁,尤其表头与表格内容之间区别较小,不利于辨认,降低了用户体验。如图所示:

于是,博主尝试更改一下表头的背景颜色和字体颜色,方法如下:

根据elementui官网的说法,header-cell-style是表头单元格的 style 的回调方法,也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。

这里尝试在el-table里使用 header-cell-style属性

代码如下:

<el-table :header-cell-style="{background:'#eef1f6',color:'#606266'}">...</el-table>

更改后的表头如图所示:

深色主题

<el-table :header-cell-style="{background:'#004d8c',color:'#FFFFFF'}">...</el-table>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。