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


相关推荐

  • 使用cookie技术实现历史浏览记录并控制显示的个数

    使用cookie技术实现历史浏览记录并控制显示的个数

    2021年7月10日
    62
  • java stream流操作_java流式处理

    java stream流操作_java流式处理目录1、什么是流2、如何生成流3、流的操作类型3.1、中间操作3.2、终端操作4、流的使用4.1中间操作filter筛选distinct去重limit返回指定流个数skip跳过流中的元素map流映射flatMap流转换allMatch匹配所有元素anyMatch匹配其中一个noneMatch全部不匹配4.2终端操作count统计流中元素个数findFirst查找第一个findAny随机查找一个reduce将流中的元素组合min/max获取最小最大值sum/summingxxx

    2022年9月1日
    3
  • 怎么新建pytest的ini文件_pytest.ini配置

    怎么新建pytest的ini文件_pytest.ini配置前言pytest配置文件可以改变pytest的运行方式,它是一个固定的文件pytest.ini文件,读取配置信息,按指定的方式去运行查看pytest.ini的配置选项pytest-h找到以下

    2022年7月30日
    5
  • uni-app 103退出和解散群聊(一)

    uni-app 103退出和解散群聊(一)route.js//删除并退出群聊router.post(‘/group/quit’,controller.group.quit);app/controller/group.js’usestrict’;constController=require(‘egg’).Controller;classGroupControllerextendsController{//获取群聊列表asynclist(){const{ct.

    2022年5月19日
    94
  • [原创] 仿滴滴出行打车APP定位导航,增加RFID认证、海外版、司机证件号码识别功能

    [原创] 仿滴滴出行打车APP定位导航,增加RFID认证、海外版、司机证件号码识别功能这是我自己做的一个仿滴滴打车的Android出行项目,主要针对滴滴等出行平台一直饱受质疑的“人车不符”问题,以及当前越发火热的或计划和出海战略,给出行项目增加了下面几个功能:1.RFID识别验证功能:在司机证件或者车内识别硬件嵌入RFID识别芯片,乘客使用手机读取到芯片信息,并且通过网络发送到出行平台数据库进行验证(我用JNI加了一个C语言的MD5加密算法对识别到的信息进行了加密)。如果不是合规的“人”或“车”,则不能完成订单并向平台或监管单位汇报当前位置。

    2022年7月24日
    11
  • 思科配置VLAN的实例

    思科配置VLAN的实例在我们上面的环境,是一个传统的网络,所有的主机都在一个广播域地址,正是这个原因,使得网络当中的广播包,给整个网络带来巨大的压力。总之,在这种情况下,同一个vlan的主机可以通信,不同一个vlan的主机不可以通信。pc2和pc4同属vlan20,(同一个vlan的主机可以通信)VLAN就是虚拟局域网的意思,它的特点是灵活性高,可扩展性高。好了,我们有关于思科配置VLAN的实例就到这里了,谢谢大家。在sw1上将相应的接口加入到相应的vlan,(在sw2上将相应的接口加入到相应的vlan,(…

    2022年9月19日
    2

发表回复

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

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