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>

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

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(1)
blank

相关推荐

  • 如何写好缺陷报告「建议收藏」

    如何写好缺陷报告「建议收藏」今天开始和大家分享缺陷报告的内容,在这部分会讲一下缺陷的基本属性,缺陷的处理过程和如何书写缺陷报告。一、什么是缺陷在第一章我们说过了什么事缺陷,一切不满足用户需求的都是缺陷。下面我们对缺陷的概念在详细的介绍一下。佩腾在《软件测试》一书中说符合下面5个规则的就可以成为软件缺陷:1、软件未达到产品说明书标明的功能。2、软件出现了产品说明书中指明不会出现的错误。3、软件功

  • 手机的分辨率和电脑的分辨率_手机屏幕分辨率大全

    手机的分辨率和电脑的分辨率_手机屏幕分辨率大全电脑分辨率分辨率比例是否淘汰1920*108016:9主流1366*76816:9主流1600*90016:9非主流2560*160016:10非主流1920*120016:10非主流1440*90016:10非主流1680*105016:10非主流1024*7684:3非主流800*6004:3非主流比例=高度/宽度手机分辨率ios型号分辨率像素密度(pp…

  • pycharm开头怎么写_pycharm代码自动提示

    pycharm开头怎么写_pycharm代码自动提示这样设置就可以保证我们每次创建新的脚本,头部都有提示。

  • Python爬取美女图片 爬虫基础

    Python爬取美女图片 爬虫基础Python爬取美女图片爬虫基础简述实现思路关键代码文件下载爬虫代码成果简述作为一个考研狗,每天除了日复一日的复习外,偶尔也想给自己寻找一些生活的小乐趣,今天突然想到了自己曾经稍微接触的爬虫,想看看可以爬取些图片放到电脑上,就花了些时间改了改之前的爬虫代码,爬取了一部分照片先量一下战绩吧。照片不多但也算是自己的一次爬虫小经验。实现思路爬虫的网页很简单,照片真实路径都在页面中直接可以拿到主要流程就是先进入照片浏览的主页,每个照片的主页都会链接几个照片页面,像下面这样,每个图片都会链接一个网页

  • 【Unity3D 灵巧小知识点】 ☀️ | 切换场景后保留上个场景中的游戏物体不被销毁

    【Unity3D 灵巧小知识点】 ☀️ | 切换场景后保留上个场景中的游戏物体不被销毁Unity小科普老规矩,先介绍一下Unity的科普小知识:Unity是实时3D互动内容创作和运营平台。包括游戏开发、美术、建筑、汽车设计、影视在内的所有创作者,借助Unity将创意变成现实。Unity平台提供一整套完善的软件解决方案,可用于创作、运营和变现任何实时互动的2D和3D内容,支持平台包括手机、平板电脑、PC、游戏主机、增强现实和虚拟现实设备。也可以简单把Unity理解为一个游戏引擎,可以用来专业制作游戏!Unity小知识点学习切换场景后保留上个场景中的.

  • 查看已安装PERL的模块

    查看已安装PERL的模块

发表回复

您的电子邮箱地址不会被公开。

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