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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Python代码画爱心_python代码画人物

    Python代码画爱心_python代码画人物用python一行代码画出爱心print(‘\n’.join([”.join([(‘LoveSongxiaolong'[(x-y)%8]if((x*0.05)**2+(y*0.1)**2-1)**3-(x*0.05)**2*(y*0.1)**3&lt;=0else”)forxinrange(-30,30)])foryinrange(15,-15,-1)]))结果为:…

    2025年9月6日
    7
  • CCF-CSP认证历年真题解

    CCF-CSP认证历年真题解CSP认证考什么怎么考?CCF计算机职业资格认证的每一道试题都十分经典,覆盖现实世界中方方面面的问题。这个历年试题解主要使用C/C++语言编写,将逐步增加Python和Java的解题程序。程序中附有注释,力求解题思路清晰简洁,值得珍藏与模仿。逐题改写过程中,富文本编辑器写的博客将全部用Markdown编辑器改写。改写的第一题,都增加了Python和Java的解题程序。2021.04第22次:CCF202104-1灰度直方图(100分)【计数】CCF202104-2邻域均值(100分.

    2022年6月7日
    107
  • OpenERP Web开发[通俗易懂]

    OpenERP Web开发[通俗易懂]声明:本文非原创,原始出处为http://blog.csdn.net/mackz/article/details/22581517分类:原始页面:Welcome to OpenERP Web Training  在7和8下测试均可。  1.相关库/框架  主要:jQuery(使用1.8.3,如果使用新版本,其他jQuery插件也要升级或修改)、Underscore、QW

    2025年6月10日
    3
  • 矩阵外积与内积

    矩阵外积与内积一个行向量乘以一个列向量称作向量的内积,又叫作点积,结果是一个数;一个列向量乘以一个行向量称作向量的外积,外积是一种特殊的克罗内克积,结果是一个矩阵,假设和b分别是一个行向量和一个列向量,那么内积、外积分别记作和,,为了讨论方便,假设每个向量的长度为2。注意:外积在不同的地方定义方式不太一样,这里不详细讨论定义了内积和外积以后,我们讨论矩阵的乘法。矩

    2025年8月7日
    2
  • python attrs_Python attrs作用是什么?

    python attrs_Python attrs作用是什么?fromrest_frameworkimportserializersclassCommentSerializer(serializers.Serializer):email=serializers.EmailField()content=serializers.CharField(max_length=200)created=serializers.DateTimeField…

    2022年10月18日
    1
  • jar包如何读取jar包内的applicationContext.xml[通俗易懂]

    jar包如何读取jar包内的applicationContext.xml[通俗易懂]jar包如何读取jar包内的applicationContext.xml?可以用FileSystemXmlApplicationContext。

    2022年7月16日
    18

发表回复

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

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