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

elementui更改el-table表头背景颜色和字体颜色博主在使用elementui中的el-table时感觉默认表格样式实在过于简洁,尤其表头与表格内容之间区别较小,不利于辨认,降低了用户体验。如图所示:于是,博主尝试更改一下表头的背景颜色和字体颜色,方法如下:根据elementui官网的说法,header-cell-style是表头单元格的style的回调方法,也可以使用一个固定的Object为所有表头单元格设置一样的Style。…

大家好,又见面了,我是你们的朋友全栈君。

博主在使用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>

更改后的表头如图所示:
更改后表格
怎么样,是不是感觉美观了很多呢!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/151597.html原文链接:https://javaforall.net

(1)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 计算机病毒简介[通俗易懂]

    计算机病毒简介[通俗易懂]1、计算机病毒的特征1,繁殖性计算机病毒可以像生物病毒一样进行繁殖,当正常程序运行时,它也进行运行自身复制,是否具有繁殖、感染的特征是判断某段程序为计算机病毒的首要条件。2,破坏性计算机中毒后,可能会导致正常的程序无法运行,把计算机内的文件删除或受到不同程度的损坏。破坏引导扇区及BIOS,硬件环境破坏。3,传染性计算机病毒传染性是指计算机病毒通过修改别的程序将自身的复制品或其变体传染到…

    2022年6月5日
    30
  • 自己动手写操作系统–个人实践「建议收藏」

    自己动手写操作系统–个人实践「建议收藏」最近开始看于渊的《自己动手写操作系统》这本书,刚开始看就发现做系统的引导盘竟然是软盘!心里那个汗啊!现在都是U盘了,谁还用软盘。于是考虑用U盘。于是开始以下步骤:1、既然书上说给先要把软盘做引导盘,那我就类似地把U盘做成引导盘。在网上找了半天,发现USboot,于是就用它给自己的U盘做了一个引导盘。2、把编译后的boot.bin文件用绝对扇区工具写入U盘就万事大吉了。同样,在网上找

    2022年10月21日
    3
  • Navicat 连接 MySQL「建议收藏」

    Navicat 连接 MySQL「建议收藏」简述Navicat是一套快速、可靠和全面的数据库管理工具,专门用于简化数据库管理和降低管理成本。Navicat图形界面直观,提供简便的管理方法,设计和操作MySQL、MariaDB、SQLServer、Oracle、PostgreSQL和SQLite的数据。在使用Navicat远程连接MySQL数据库时,经常会出现一些错误,今天我们来分享一下经验。|版权声明:一…

    2025年6月11日
    3
  • linux之awk用法详解

    linux之awk用法详解[转自:http://blog.chinaunix.net/uid-23302288-id-3785105.html]awk是行处理器:相比较屏幕处理的优点,在处理庞大文件时不会出现内存溢出或是处理缓慢的问题,通常用来格式化文本信息awk处理过程: 依次对每一行进行处理,然后输出awk命令形式:awk[-F|-f|-v]‘BEGIN{}//{command1;comman…

    2022年7月27日
    14
  • React之redux学习日志(redux/react-redux/redux-saga)

    React之redux学习日志(redux/react-redux/redux-saga)

    2020年11月19日
    163
  • Content-Disposition的使用和注意事项

    Content-Disposition的使用和注意事项我们在开发web系统时有时会有以下需求:希望某类或者某已知MIME类型的文件(比如:*.gif;*.txt;*.htm)能够在访问时弹出“文件下载”对话框希望以原始文件名(上传时的文件名

    2022年7月1日
    20

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号