修改 Element table表格的背景颜色以及边框下划线样式（最终解！）

最新推荐文章于 2025-06-29 14:56:32 发布

叫我火柴

最新推荐文章于 2025-06-29 14:56:32 发布

阅读量4.4k

点赞数 9

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： css vue.js javascript html

本文链接：https://blog.csdn.net/weixin_44283571/article/details/112306435

本文展示了如何在Vue项目中，结合SCSS深度作用选择器`::v-deep`，修改Element UI表格的背景颜色和边框下划线，实现自定义样式。教程以实例讲解，强调在表格外层添加div进行样式穿透的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1

效果图：

能改成这种效果，可见我有多厉害，那到底有多厉害呢？举个栗子：就像小母牛生不出仔，牛逼坏了

2

前提条件：你的项目使用的是vue 和 scss
实现：利用 深度作用选择器 也就是 ::v-deep，来进行样式穿透，进而对table的样式进行覆盖并且改成我们想要的样式

HTML

        <div class="table-wrapper">
          <el-table
          :data="tableData"
          height="85%"
          style="width: 100%"
          >
            <el-table-column
              prop="date"
              label="日期"
              width="180">
            </el-table-column>
            <el-table-column
              prop="name"
              label=