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


相关推荐

  • VMware中的ubuntu虚拟机开机黑屏,无法打开桌面

    昨天因为在虚拟机中搭环境,崩了,可能是因为脚本错误什么的原因,或者误删除了什么东西的原因,导致,虚拟机重启之后一直处于黑屏状态。如下图:然后百度了很多解决方法,都不成功,后来有大佬指点用快照恢复,但是,我发现一个残酷的事实,我之前没有使用过快照,所以不可行,所以只好重装了。信任IT界名言“没有什么是重装系统解决不了的”。可能只是我的这个不行,但是整理了一下网上的方法,码文,纪念一下…

    2022年4月6日
    1.1K
  • 如何在Python中将列表转换为字符串?

    如何在Python中将列表转换为字符串?Pythonprovidesdifferentvariabletypeforprogrammersusage.Wecanuseint,float,string,list,set…datatypesinourapplications.Whileusingdifferenttypeofvariableswemayneedtoconvert…

    2022年4月30日
    92
  • js闭包面试题经典_js闭包原理

    js闭包面试题经典_js闭包原理说明最近看到这样一段代码functionfun(n,o){console.log(o);return{fun:function(m){returnfun(m,n);}};}vara=fun(0);a.fun(1);a.fun(2);a.fun(3);varb=f

    2022年8月30日
    1
  • Linux 常用操作命令大全(最后更新时间:2022年1月)「建议收藏」

    Linux 常用操作命令大全(最后更新时间:2022年1月)「建议收藏」主要介绍Linux常用命令,可以帮助新手快速掌握Linux系统的基本使用,值得收藏。。

    2022年6月2日
    34
  • var let和const的区别_JavaScript let

    var let和const的区别_JavaScript let1.let命令基本语法ES6新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。{leta=1varb=2console

    2022年7月31日
    3
  • 舍去法取整php,floor舍去法取整「建议收藏」

    舍去法取整php,floor舍去法取整「建议收藏」初识App安全性测试目前手机App测试还是以发现bug为主,主要测试流程就是服务器接口测试,客户端功能性覆盖,以及自动化配合的性能,适配,压测等,对于App安全性测试貌似没有系统全面统一的标准和流程,其实安全性bug也可…【ASP&period;NETIdentity系列教程(三)】Identity高级技术注:本文是[ASP.NETIdentity系列教程]的第三篇.本系列教程详…

    2022年6月21日
    25

发表回复

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

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