element中el-table表头通过header-row-style设置样式

文章目录

  • 一、知识点
  • 二、设置全部表头
    • 2.1、方式一
    • 2.2、方式二
  • 三、设置某个表头
  • 四、最后

一、知识点

有些时候需要给element-ui表头设置不同样式,比如居中、背景色、字体大小等等,这时就可以用到本文要说的属性header-row-style。官网说明如下所示:

二、设置全部表头

2.1、方式一

<el-table :header-cell-style="{'text-align': 'center'}" />

2.2、方式二

<template><el-table :header-cell-style="tableHeaderColor" />
</template>
<script>
export default {methods: {tableHeaderColor ({row, column, rowIndex, columnIndex}) {return 'text-align: center;'}}
}
</script>

三、设置某个表头

<template><el-table :header-cell-style="tableHeaderColor" />
</template>
<script>
export default {methods: {// 设置表头的颜色tableHeaderColor({ row, column, rowIndex, columnIndex }) {console.log(row, column, rowIndex, columnIndex);if (rowIndex === 0 && columnIndex === 1) {return 'background-color: #afccfd; color:#000000;'; //蓝色} else if (rowIndex === 0 && columnIndex === 2) {return 'background-color: #c0e33c; color:#000000;';//绿色} else if (rowIndex === 0 && columnIndex === 3) {return 'background-color: #fbc57b; color:#000000;';//橙色} else {return 'color:#000000; background: #ffffff;';}}}
}
</script>

效果如下所示:

四、最后

本人每篇文章都是一字一句码出来,希望大佬们多提提意见。顺手来个三连击,点赞👍收藏💖关注✨。创作不易,给我打打气,加加油☕

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/238648.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

量子光学的进步:光子学的“下一件小事”

量子光学是量子力学和光学交叉领域中发展迅速的一门学科&#xff0c;探索光的基本特性及其与物质在量子水平上的相互作用。通过利用光的独特特性&#xff0c;量子光学为通信、计算、密码学和传感等各个学科的变革性进步铺平了道路。 如今&#xff0c;量子光学领域的研究人员和工…

基于springboot 图书馆管理系统

qq&#xff08;2829419543&#xff09;获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;springboot 前端&#xff1a;采用vue技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xf…

Inference with C# BERT NLP Deep Learning and ONNX Runtime

目录 效果 测试一 测试二 测试三 模型信息 项目 代码 下载 Inference with C# BERT NLP Deep Learning and ONNX Runtime 效果 测试一 Context &#xff1a;Bob is walking through the woods collecting blueberries and strawberries to make a pie. Question …

前端入门(五)Vue3组合式API特性

文章目录 Vue3简介创建Vue3工程使用vite创建vue-cli方式 常用 Composition API启动项 - setup()setup的执行时机与参数 响应式原理vue2中的响应式vue3中的响应式ref函数reactive函数reactive与ref对比 计算属性 - computed监视属性 - watchwatchEffect Vue3生命周期自定义hook函…

2012-2021年银行数字化转型程度数据(根据年报词频计算)

2012-2021年银行数字化转型程度&#xff08;根据年报词频计算&#xff09; 1、时间&#xff1a;2012-2021年 2、指标&#xff1a;银行名称、年份、数字化转型程度 3、范围&#xff1a;52家银行&#xff08;上海银行、中信银行、中国银行、交通银行、光大银行、兰州银行、兴业…

9.整数转换为布尔值【2023.12.1】

1.问题描述 整数转换为布尔值。 2.解决思路 输入一个整数。 输出布尔值并输出。 3.代码实现 numint(input("请输入一个数字")) boolnumbool(num) print(boolnum)4.运行结果

力扣232-用栈实现队列

文章目录 力扣232-用栈实现队列示例代码实现总结收获 力扣232-用栈实现队列 示例 代码实现 class MyQueue {Deque<Integer> instack;Deque<Integer> outstack ;public MyQueue() {instacknew ArrayDeque<Integer>();outstacknew ArrayDeque<Integer>(…

Mapper文件夹在resource目录下但是网页报错找不到productMapper.xml文件的解决

报错如下&#xff1a; 我的Mapper文件夹在resourse目录下但是网页报错找不到productMapper.xml。 结构如下&#xff1a;代码如下&#xff1a;<mappers><mapper resource"com/dhu/mapper/productMapper.xml" /> </mappers> 这段代码是在mybatis-co…

深入理解前端路由:构建现代 Web 应用的基石(下)

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

IDEA:官方汉化包

CtrlAlts进入setting找到Plugins&#xff0c;直接在如下的搜索框中输入chinese回车 之后就是这样的啦~

【动态规划】LeetCode-62.不同路径

&#x1f388;算法那些事专栏说明&#xff1a;这是一个记录刷题日常的专栏&#xff0c;每个文章标题前都会写明这道题使用的算法。专栏每日计划至少更新1道题目&#xff0c;在这立下Flag&#x1f6a9; &#x1f3e0;个人主页&#xff1a;Jammingpro &#x1f4d5;专栏链接&…

WordPress(安装比子主题文件)zibll-7.5.1

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、新建网站二、配置ssl三.配置伪静态四.上传文件五.添加本地访问前言 提示:这里可以添加本文要记录的大概内容: 首先,我们要先理解什么是授权原理。 原理就是我们大家运营网站,点击授权…