vue =＞ elementui 更改 el-table 表头样式（背景颜色和字体颜色）

最新推荐文章于 2024-03-19 17:40:38 发布
最新推荐文章于 2024-03-19 17:40:38 发布
阅读量8.1k 收藏 10
点赞数 5
分类专栏： # 【Vue2从基础到进阶】 文章标签： html css vue javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48200589/article/details/114634480
版权

没改之前

在这里插入图片描述

<el-table :header-cell-style="{background:'#eef1f6',color:'#606266'}">
...
</el-table>

改了之后

在这里插入图片描述
结果：样式变得美观了一丢丢

  • header-cell-style是表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。
不停喝水
关注
  • 5
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
Element UI简单修改主题色
weixin_43829905的博客
11-19 1611
Element UI简单修改主题色Element UI简单修改主题色 Element UI简单修改主题色 步骤： 1.新建element-variables.scss 文件 /* Write your variables here. All available variables can be found in element-plus/packages/theme-chalk/src/common/var.scss. For example, to overwrite the theme color: *
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
12-30
只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。 然后直接上template代码： <template> <el data=tableData3 height=250 xss=removed> <el prop=date label=日期 width...
elementi-ui解释列表组件中的宽度设置和文字样式设置
ating_ing的博客
10-23 1883
elementi-ui解释列表组件中的宽度设置和文字样式设置
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
10-17
主要介绍了VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
element el-descriptions 去掉背景色
最新发布
qq_53986004的博客
03-19 319
element el-descriptions 去掉背景色
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
12-29
ElementUI2.0的表格的扩展： elementUI表格table elementUI文字提示Tooltip 如果要实现鼠标移到表头有注释或者弹框该怎么添加呢？ <el empty-text=正在加载中... data=contentList xss=removed sort-change=sort class=pro-table-item tooltip-effect=dark > <template v-for=(item,index)> 　　 &lt;el-table-c
vue el-descriptions 样式问题
Tttrycatch的博客
10-26 2835
给label设置固定颜色，或者判断某个使用单独样式。设置label固定长度使用这个。设置显示数据长度使用这个。
element 表格背景颜色透明
jiangyue2694的博客
11-13 2262
element 表格背景颜色透明 /deep/ .el-table, .el-table__expanded-cell { background-color: transparent; } /deep/ .el-table tr { background-color: transparent !important; } /deep/ .el-table tbody tr:hover>td { background-color: transparent !important }
el-descriptions的入门学习
热门推荐
qq_40765784的博客
06-17 2万+
el-descriptions入门学习
vue+element-ui el-descriptions 详情渲染组件二次封装（Vue项目）
每天都要努力学习哦~~
09-17 1771
不外乎就是渲染新增/修改的数据（由输入框变成输入框禁用），因为输入框禁用后颜色透明度会降低，显的颜色偏暗；为解决这个需求于是封装了。一般后台管理系统，通常页面都有增删改查；
el-descriptions的使用
2201_75705263的博客
07-05 4404
js、element-ui、vue、el-descriptions
Element-UI表格自定义背景颜色
qq_47229902的博客
03-29 4788
自定义elementUI表格背景颜色，更改鼠标经过背景颜色
vue修改Element的el-table样式的4种方法
01-18
修改Element中的el-table样式，可以使用以下几种方法： 　1. row-style 行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。 　2. cell-style 单元格的 style 的回调方法，也可以使用一...
修改el-tooltip背景颜色
weixin_72015947的博客
05-08 691
直接使用，再加一个style。
el-descriptions
高晨辉的博客
08-09 2万+
<el-descriptions title="用户信息"> <el-descriptions-item label="用户名">kooriookami</el-descriptions-item> <el-descriptions-item label="手机号">18100000000</el-descriptions-item> <el-descriptions-item label="居住地"&gt...
element.ui修改table的边框颜色
weixin_43753330的博客
10-15 8548
// table边框颜色 .el-table--border:after, .el-table--group:after, .el-table:before { background-color: #C0C4CC; } .el-table--border, .el-table--group { border-color: #C0C4CC; } .el-table td, .el...
element单独修改label的颜色
星银色飞行船的博客
03-29 1469
效果 步骤1： 给label加单独的class 例：clickPostion 步骤2：css样式 .clickPostion .el-form-item__label { color: #F56C6C; }
element-ui 表格和 tooltip修改背景颜色和箭头颜色
web全栈开发的博客
07-01 2974
el-tooltip__popper[x-placement^=“方向”] .popper__arrow。说明： .el-tooltip__popper[x-placement^=“方向”] .popper__arrow:after。第一步：（先给tooltip设置class：popper-class防止其他部分的样式被覆盖，如下所示；border-方向-color: red。border-方向-color: red。代码如下：（注意：如果有背景色，请将透明度分开写，如下所示）
vue2 修改el-table表头样式
06-01
您可以通过以下方式修改`el-table`表头的样式： 1. 通过`header-cell-style`属性设置表头单元格的样式，例如： ```html <el-table :data="tableData" :header-cell-style="{background: '#f5f5f5'}"> <el-table-column prop="date" label="日期"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> ``` 2. 通过自定义表头模板设置表头的样式，例如： ```html <el-table :data="tableData"> <el-table-column prop="date"> <template slot="header" slot-scope="scope"> <span style="color: red;">{{ scope.column.label }}</span> </template> </el-table-column> <el-table-column prop="name"> <template slot="header" slot-scope="scope"> <span style="color: blue;">{{ scope.column.label }}</span> </template> </el-table-column> <el-table-column prop="address"> <template slot="header" slot-scope="scope"> <span style="color: green;">{{ scope.column.label }}</span> </template> </el-table-column> </el-table> ``` 3. 通过 CSS 设置表头样式，例如： ```css .el-table__header th { background: #f5f5f5; } ``` 请根据自己的实际需求选择适合的方法来修改`el-table`表头的样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不停喝水

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值