《Vue3笔记》第33节：Vue3项目中修改el-table表格的默认样式

最新推荐文章于 2025-06-06 15:53:54 发布
最新推荐文章于 2025-06-06 15:53:54 发布
阅读量299 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 【Vue3项目开发】 文章标签： 笔记 vue.js 前端 el-table 表格样式 修改表格样式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39826207/article/details/147379787

前一个小节的内容中，已经介绍了Vue3项目如何基于ECharts封装图表组件。这个小节来学习一下，如何修改el-table表格组件的默认样式。

Vue3项目开发（微信文章集合）

1.1、修改后的表格样式

修改之后的el-table表格样式效果，如下所示：

在这里插入图片描述

1.2、样式代码

修改表格表头样式，例如：字体颜色、背景颜色、边框等等，只需要添加下面代码即可：

/* 修改表头的样式 */
:deep(.el-table th) {
了解本专栏 订阅专栏 解锁全文 超级会员免费看
《Vue3笔记》第30节：Vue3自定义封装el-table表格组件
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 CSDN 记录学习心得和笔记内容。
04-16 237
前一个小节的内容中，已经介绍了项目中如何引入状态管理库，这个小节来学习如何基于中的组件，自定义封装一个表格组件。Vue3项目开发（微信文章集合）这个小节实现的表格组件，运行效果，如下所示：在目录下，创建一个目录，新建一个组件。案例代码，如下所示： 1.3、使用组件 在需要使用表格组件的地方，引入组件即可。 1.4、获取源代码 到此，自定义封装表格组件就介绍完了。
Element-ui的el-table表格嵌套如何默认展开行，试试这个吧！（芋道源码yudao-cloud 二开笔记）
qq_31676725的博客
08-08 775
在el-table组件中有默认展开的属性expand-row-keys需要配合row-key使用，可能是我用的方式不对，用了不生效。所以我索性换一种解决方案。通过 Vue 的 ref 方法手动展开第一行。
vue3 el-table 通过深度选择器::v-deep修改组件内部样式（默认样式）
BillKu的博客
10-14 581
【代码】vue3 el-table 通过深度选择器::v-deep修改组件内部样式（默认样式）
Vue表格Table精美模板分享
罗铠威的博客
06-03 2789
本篇博客主要提供vue组件之表格组件模板源码，需要的朋友请自取【🎀这是有数据的样子】这里的数据可根据需要自行更换，响应事件可自己添加（可以自己更换）
vue3 el-table表头样式（背景颜色，字体颜色）
最新发布
LXMoon_的博客
06-06 813
表头样式
el-table修改表格颜色
weixin_49114503的博客
02-28 3977
el-table修改表格颜色
VUE3 修改element ui 的样式
weixin_44891495的博客
10-22 2140
VUE3 修改 element ui的样式
vue3-elementPlus部分组件样式修改
weixin_46479909的博客
01-24 3202
前提：在语言下使用/deep/；在sass语言下使用 ::v-deep 替换 /deep/但::v-deep的写法已经废弃，建议使用:deep(css选择器)
vue3+ElementPlus: 调整el-table表格的默认样式
扬雨于今
06-28 2788
需求：调整el-table表格的默认样式，直接在el-table和el-table-column上设置style并不会生效，需要在调试模式下（鼠标右击，选择“检查”）查看表格元素的实际位置，并设置其样式。
【Vue入门实践3】不调后端接口==＞el-table单纯前端实现查询和重置功能==＞【el-table组件使用】表格静态前端筛选、查询重置功能
2401_84433974的博客
07-14 382
大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。
【Vue3+element plus 】el-table滚动条、固定列fixed、表头超出内容隐藏并显示省略号_el-table-column超出隐藏
2401_84411767的博客
05-01 1400
/ 判断是否开启tooltip功能。// 判断是否开启tooltip功能。// 判断表头单列字符长度。// 获取父元素的宽度。// 获取自身的宽度。
vue实现简单表格组件实例详解
11-26
本来想这一周做一个关于vuex的总结的，但是由于朋友反应说还不知道如何用vue去写一个组件，所以在此写写一篇文章来说明下如何去写vue页面或者组件。vue的核心思想就是组件，什么是组件呢？按照我的理解组件就是装配页面的零件，比如一辆车有大大小小许多零件组成，那么同样的一个页面，也是有许多组件构成的比如说头部组件 按钮组件等等，vue三大核心组件 路由 状态管理，路由控制页面的渲染，页面由组件组成，数据有vuex进行管理和改变。下面我会以一个简单的案例来说 第一步：构建一个简单的vue项目，老规矩直接在命令行输入 vue init webpack myproject cd my vue cnp
Vue修改组件样式问题
邱新磊的博客
04-04 4245
问题：    Vue修改第三方组件样式后运行没问题，npm run build打包后运行样式没有变化原因：（本人以及学长研究总结）    vue项目打包后生成的style文件是压缩后的，样式都混在一起，你写的样式被覆盖了解决：    在父组件标签加个classname,与原iview的样式区分开例子：修改iview中的input样式修改方案：给Input的父级标签加个class=“teshuInp...
Vue2表格（Table）
热门推荐
Vue Amazing UI（Vue3 + TypeScript + Vite）组件库唯一开发维护者
08-13 2万+
展示行列数据。
vue3+ts 自定义表格样式（伪表格）
weixin_41610867的博客
12-18 341
【代码】vue3+ts 自定义表格样式（伪表格）
Vue el-table表格水平放置样式
qiu_hyun的博客
07-11 1063
vue+element 中el-table表格的数据，样式代码
【Vue】Element表单做成表格样式，el-form修改表格样式
take_it_easy_hes的博客
04-08 2238
【代码】Element表单做成表格样式，el-form修改表格样式。
Vue3表格（Table）
Vue Amazing UI（Vue3 + TypeScript + Vite）组件库唯一开发维护者
04-17 1万+
展示行列数据分页表格组件，支持：加载中；暂无数据；带边框；自定义样式；三种尺寸；列对齐方式；斑马条纹；自定义页头和页脚；单元格自动省略；合并单元格；可编辑单元格；可编辑行；可展开；固定列；固定表头；固定头和列；随页面滚动的固定表头和滚动条；表头分组；表格排序；可选择；总之，功能丰富，简单易用😁😁
vue 使用Element实现表格行样式设置
weixin_45852687的博客
09-09 1352
vue 使用Element实现表格行样式设置
vue3.0 el-tabs和el-table
01-22
### Vue 3.0 中使用 Element Plus `el-tabs` 和 `el-table` 在 Vue 3.0 中集成并使用 Element Plus 的 `el-tabs` 和 `el-table` 组件可以按照以下方式完成。 #### 安装依赖 首先，确保已经安装了必要的库： ```...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Mr.小朱同学

随心赞赏，助力前行

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

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

打赏作者

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

抵扣说明：

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

余额充值