企业官网建设流程全解析

搞vue2后台项目的兄弟，十有八九都跟elementUI的el-table较过劲。默认的表格样式其实不算难看，但一到定制化界面就露怯：右侧和下方总是莫名其妙多一条细线，跟设计稿怎么都对不上。这篇文章就干一件事——把"vue2 + elementUI的el-table自定义样式"这整套逻辑讲透，重点解决“怎么把右侧和下方的边框去掉”，顺带把滚动条宽度、固定列残留线、自动计算表格高度这些高频踩坑点一起收拾了。适合正在用vue2 + elementUI做后台管理系统、天天被表格样式折磨的前端同学。

1. 先搞清楚：右侧和下方那条边框到底是谁画的

1.1 默认边框从哪来

很多人一上来就写CSS去覆盖，结果怎么都去不掉，就是因为没搞明白边框的出处。el-table渲染出来之后，本质上是一个div包着一层table的结构。如果你没有给它加border属性，它默认显示的是：表头下方一条线、每一行数据下方一条线，颜色统一是#EBEEF5，1px solid。这一条线来自表头th和单元格td的border-bottom。

如果你在el-table上加了border属性，情况就不一样了。此时element会追加一个.el-table--border的类，然后每个单元格的border-right、border-bottom都会被强制加上。换句话说，右侧那一列列竖线，绝大多数情况下就是单元格td的border-right拼出来的；下方那条线，是每一行td的border-bottom拼出来的。

所以第一条经验：要消除右侧边框，核心打击目标是th、td上的border-right；要消除下方边框，核心打击目标是td上的border-bottom。这是最底层、跑不掉的两个来源。

1.2 不只是单元格：伪元素和固定列才是漏网之鱼

只处理td和th还不够。el-table在很多场景下会通过伪元素::before和::after来画线。比如.el-table::before默认有1px的底部边框，如果你只把单元格的边框清掉，表格最底部依然会残留一条横线，很多人以为是自己没写对，其实那条线根本不是td的边框。

再看固定列。当表格设置fixed="right"之后，element会在右侧生成一个.el-table__fixed-right浮层，这个浮层自带border-left。你不处理它，右侧固定列边缘就永远有一道竖线。左侧固定列同理，自带border-right。

再把范围扩大一点：.el-table__header-wrapper、.el-table__body-wrapper这些滚动容器，在部分版本的element-ui里也带border或background样式。展开行功能的.el-table__expanded-cell，同样有独立的边框和背景。

把el-table拆开看，边框的来源至少分三类：单元格th/td的border、根元素和子容器的伪元素边框、固定列容器的边框。这三类缺一不可，只覆盖其中一两个，都会留下“漏网之鱼”。

1.3 三张“来源定位表”帮你精准排查

我把el-table的边框来源整理成一张表，后面做样式覆盖的时候，对着表从上往下找，基本一抓一个准：

这张表是我实际排查时的备忘。每次测试反馈“这里还有一条线”，我就按这个表从上往下找一遍，基本三分钟内定位。后面所有处理方案，本质上都是针对这张表里的某些选择器动手。

2. 自定义样式方案选型：为什么scoped里直接写没有效果

2.1 三种写法的取舍

vue2项目里，很多人第一反应是在自己组件的style标签里写：

.el-table td { border-right: none; }

然后发现根本没反应。原因很简单：style标签加了scoped之后，vue会给当前组件模板里的标签加一个data-v-xxx属性选择器，编译出来变成了.el-table td[data-v-xxx]。但el-table内部的th、td是element组件内部渲染出来的节点，并不带你这个组件自定义的data-v属性，选择器匹配不上。

那怎么办？三种思路：

第一，去掉scoped，写一段全局样式。可行，但会污染整个项目的所有el-table。除非你用非常严格的class命名把自己限制在一个局部容器内，否则不推荐。

第二，用::v-deep，也就是vue2里的深度作用选择器，旧版写法也叫/deep/。它编译后会把选择器改写成后代选择器，比如.no-border-table[data-v-xxx] .el-table td，这样就能穿透scoped限制，命中内部元素。这是日常开发中最常用的方案。

第三，单独写一个非scoped的样式文件，在组件里import。本质上是第二种的变体，但文件独立，适合沉淀通用样式。

我在vue2项目里推荐第二或第三种，更推荐第三种：el-table的样式覆盖通常不是一次性的，后面可能会改滚动条、改hover、改斑马纹、改展开行，单独维护一个table样式文件会清爽很多。

2.2 加class命名空间才是明智的做法

有人直接覆盖全局的.el-table td样式，把整个项目的表格边框全部去掉。结果另一个页面需要带边框的表格，又要再覆盖回来，来回折腾，极易互相打架。

我的习惯是：每一张需要定制样式的表格都加一个自定义class，比如：

<el-table class="less-border-table" :data="tableData"></el-table>

样式里以这个class为命名空间去覆盖：

.less-border-table { ::v-deep th.el-table__cell, ::v-deep td.el-table__cell { border-right: none; } }

这样既不污染其他表格，又能利用::v-deep直接命中内部元素。这种“自定义class + 深度选择器”的组合，不只适用于el-table，所有需要深度定制第三方组件样式的场景都能套用。比如dialog、select、date-picker，用这套思路都很顺手。

3. 消除右侧和下方边框的完整实操：直接抄代码

3.1 最常用的“去竖线保留横线”方案

大多数后台表格的设计需求是“去掉单元格之间的竖线，保留行与行之间的横线”，这样视觉上更干净，又不至于行都分不清。

先给el-table加一个自定义class，我统一用no-vertical-border：

<el-table class="no-vertical-border" :data="tableData"></el-table>

scss：

.no-vertical-border { ::v-deep th.el-table__cell { border-right: none; } ::v-deep td.el-table__cell { border-right: none; } }

注意我这里选用了.el-table__cell。element-ui 2.x里，表头th和表体td上都挂了这个类，写一条规则就能同时覆盖表头和表体，优先级也够，不用再单独加行选择器。实测在element-ui 2.15.x下非常稳定。

3.2 “彻底无边框”方案：横线竖线一次清干净

如果你要的是完全融入背景的表格，把竖线、横线、表头线全部抹掉：

.no-border-all { ::v-deep th.el-table__cell, ::v-deep td.el-table__cell { border: none; } ::v-deep .el-table__footer-wrapper td.el-table__cell { border: none; } ::v-deep .el-table__fixed-left, ::v-deep .el-table__fixed-right { border: none; } }

这里特意加上了footer-wrapper，因为合计行、底部统计行也有独立的边框，不处理的话，表格底部还是会冒出一条线。另外固定列容器的border也在这一步顺手清掉。

3.3 根治底部残留线：别忘了伪元素

单元格边框清干净之后，如果表格最底部还有一条横线，百分之九十是伪元素。针对它单独开一枪：

.no-border-all { ::v-deep.el-table::before, ::v-deep.el-table::after { display: none; } }

这里有个写法细节：::v-deep后面既可以空格接选择器，也可以直接连写。在scss里我推荐连写，比如::v-deep.el-table::before，编译更可控。如果你发现覆盖不彻底，加个!important也不丢人，毕竟这是对第三方组件样式的强制修正，只要不影响全局就好。

3.4 固定列边界线：一条隐藏的竖线

表格启用了fixed="right"或fixed="left"时，处理完以上所有步骤，固定列旁边可能还有一道竖线。这道线来自固定列浮层本身的border-left或border-right：

.no-border-all { ::v-deep .el-table__fixed-right { border-left: none; } ::v-deep .el-table__fixed-left { border-right: none; } }

但这里要提醒一句：固定列本身就是用来区分可视区和滚动区的，把边界线去掉后，滚动时内容会直接贴着固定列切换，视觉上有辨识压力。如果设计师坚持要无边框，可以顺手在固定列内容区加一个轻微的box-shadow模拟一条影子分割线：

.no-border-all { ::v-deep .el-table__fixed-right { box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.06); } }

用户看着仍有一条“物理边界”，但不再是一根死板的边框线。这个小细节在定制化后台里很加分。

3.5 滚动条宽度一并调节：让无边框更彻底

去掉边框后，下方如果有横向滚动条，默认的粗滚动条会显得很突兀。el-table的滚动条也是可以自定义的：

.no-border-all { ::v-deep .el-table__body-wrapper::-webkit-scrollbar { height: 6px; width: 6px; } ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.15); border-radius: 3px; } ::v-deep .el-table__body-wrapper::-webkit-scrollbar-track { background: transparent; } }

height控制横向滚动条厚度，width控制纵向滚动条宽度。如果你用的是el-table自带的纵向滚动，同样生效。webkit前缀在Chrome、Edge、微信内置浏览器里都稳定，不需要额外处理兼容。

4. 工程化落地经验：vue2项目里如何优雅组织这些样式

4.1 把el-table的覆盖样式沉淀成一个独立文件

真正在vue2项目里做工程化，我不会把这些样式散落在各个组件的style里，而是建一个src/styles/element-table.scss，专门放el-table的样式覆盖。文件内部按class命名空间划分区块，比如.less-border-table、.no-border-table、.table-with-shadow。谁要用，直接在组件里：

import "@/styles/element-table.scss";

或者在main.js里全局引入。这样维护成本极低。尤其是多个页面都需要做无边框表格时，不会出现每个文件复制同一份deep样式的情况。后面产品说“这种表格样式要微调”，你只需要改一个文件，所有页面同步生效。

4.2 配合自动计算表格宽高：无边框表格的灵魂搭档

热搜里经常有人问“el-table自动计算列表的宽高”。这其实是后台系统里的标配需求：表格区域自适应视口高度，避免表格把页面撑出滚动条。通常做法是在data里维护tableHeight，在mounted和updated里计算：

data() { return { tableHeight: 400 }; }, mounted() { this.computeTableHeight(); window.addEventListener("resize", this.computeTableHeight); }, updated() { this.computeTableHeight(); }, beforeDestroy() { window.removeEventListener("resize", this.computeTableHeight); }, methods: { computeTableHeight() { const el = this.$refs.tableWrap; if (!el) return; this.tableHeight = el.clientHeight - 80; } }

模板里：

<div ref="tableWrap" class="table-wrap"> <el-table ref="table" class="no-border-all" :height="tableHeight" :data="list"></el-table> </div>

注意：height要绑定在el-table的height属性上，不要直接给el-table写CSS高度。ey-el-table内部需要知道容器高度来计算固定列和滚动区域，纯CSS高度会导致一系列样式错乱。这个坑我踩过，后来全面改成height属性绑定。updated生命周期里重新计算高度也很关键，因为数据更新后行高会变化，比如展开行或删除行，不及时重算可能会出现一小段留白。

4.3 hbuilderx和常规vue2工程里的兼容差异

有朋友是在hbuilderx里创建vue2项目，把elementUI搭在手写脚手架里的。其实这类工程的编译方式跟vue-cli基本一致，::v-deep写法都能正常编译，不用特意改。真正需要检查的是sass依赖是否装全。如果项目里用的是scss，需要：

npm i sass sass-loader -D

没有sass的话，也可以直接用CSS原生写法，把::v-deep换成/deep/，或者干脆在全局样式文件里写，只是嵌套层级会难维护一点。只要是纯Web工程，无论是vue-cli、vite+vue2还是hbuilderx的Web项目，前面这些方案都通用。

4.4 结合CSS变量做主题切换

无边框样式可以跟elementUI的主题变量结合起来。比如看板类项目要求表格背景透明、表头半透明底色，就不应该把颜色写死：

.no-border-table { ::v-deep .el-table__header th { background: var(--table-header-bg, rgba(255, 255, 255, 0.8)); } ::v-deep .el-table__row td { background: var(--table-body-bg, rgba(255, 255, 255, 0.5)); } }

后续做深色主题、浅色主题切换时，只需要在html根节点切一个theme类，就能控制这些变量。这是无边框表格之外的进阶玩法，但在一些对视觉效果要求高的后台里特别实用。

5. 常见问题排查实录：样式覆盖为什么老翻车

5.1 样式完全不生效：先查三个地方

第一，选择器优先级。element自身的样式写在element-ui的样式表里，你的样式如果写得太浅，就会被它盖过去。解决方式是提高权重，比如写成：

.no-border-table ::v-deep .el-table__row td.el-table__cell { border-right: none !important; }

加!important是最后手段，但对抗第三方组件时，只要不影响全局，用一点也无妨。

第二，scoped失效。如果::v-deep编译后还是没命中，先检查sass版本和vue-loader版本。vue2 + elementUI的常规组合里::v-deep都能用。如果项目里是特别老的vue-loader 14，建议试/deep/。注意这两种写法不要混在同一个选择器里。

第三，样式被同名类覆盖。排查方法很简单：浏览器开发者工具里选中目标td元素，看右侧Border那一栏，往上翻是谁给它设置的border，把那个选择器复制出来，以它为基准再覆盖，基本都能解决。

5.2 固定列右侧的边框总是清不掉

这个太常见了。很多朋友把td、th、伪元素全处理了，固定列那道竖线还在。原因是.el-table__fixed-right浮层本身的border-left才是关键。另外，固定列区域里也可能有一套独立的表头容器，需要一起处理：

.no-border-table { ::v-deep .el-table__fixed-right th.el-table__cell, ::v-deep .el-table__fixed-right td.el-table__cell { border: none; } }

5.3 hover高亮块被裁切或者不对齐

去掉单元格边框后，hover行的高亮背景有时会出现锯齿或错位。通常是因为el-table的行背景写在tr上，或者由单元格背景拼出来的。如果出现背景断裂，先把单元格背景设为透明，再在tr上设置背景：

.no-border-table { ::v-deep .el-table__body tr:hover > td.el-table__cell { background: transparent; } ::v-deep .el-table__body tr:hover { background: #f5f7fa; } }

hover背景尽量放在tr上，因为tr覆盖整行宽度，不容易出现中间断线。

5.4 展开行样式断裂怎么处理

用了展开行功能后，展开出来的内容区实际上是一个新的tr，它往往自带背景和边框。处理方式：

.no-border-table { ::v-deep .el-table__expanded-cell { border-right: none; border-bottom: none; background: transparent; } }

同时注意，展开行默认背景是#fafafa，如果要去掉，就设为transparent，方便你自定义展开区域的内容样式。

5.5 sortable拖动排序、全选回显对样式的联动影响

“el-table sortable拖动 拓展行”和“elementui表格选择框回显然后全选错误”这类热搜，虽然更多是交互问题，但复盘下来跟样式也有联动。比如拖动排序后行顺序变了，如果行高不一致，会出现边框或背景错位。此时可以强制触发一次表格重新布局：

this.$nextTick(() => { this.$refs.table.doLayout(); });

doLayout是el-table内置方法，专门用来重算表格布局，处理拖动、显隐、固定列更新后的样式错乱非常管用。凡是改了数据、选了全选、展开行、拖了排序，发现布局不太对，先doLayout一下，大多数问题都能消解。

5.6 表格数据不满一屏时底部多出空白

还有一种特殊情况：当表格数据不满一页时，底部会留下一片空白的body区域。这个区域虽然没有数据行，但.el-table__body-wrapper的高度还在，容易让人误以为边框没去掉。此时可以给表格设置height或max-height，让空余区域被剪掉。或者调整body-wrapper的overflow-x：

.no-border-table { ::v-deep .el-table__body-wrapper { overflow-x: hidden; } }

但注意，如果表格有横向滚动需求，不要轻易改overflow-x。更稳妥的做法是控制height属性，让它刚好等于内容高度，这就要结合第4.2节的自动计算宽高方案一起使用。

6. 一些实操体会与拓展建议

先说说我自己的实测经验。标题里“自定义样式及消除右侧和下方的边框”，实际上分两种诉求：一种只想去掉竖线、保留横线的分割感；另一种是彻底无边框，让表格完全融入设计。这两种我后来在工程中都维护成了独立class，比如.without-vertical-border和.without-all-border，用的时候各取所需。千万不要一个class撸到底，否则想找回横线时又得重写。

还有一个体会：不要过度依赖!important。我见过有人写了一大堆!important把element样式强行踩下去，结果后面产品说“加回竖线”，一行样式改了三个文件才搞定。靠谱的做法是，先把el-table的边框来源逐一排查清楚，再以自定义class为命名空间去精准处理。如果项目里用了scss，把这类样式沉淀到独立文件里，后面不管怎么改，都只是动一个文件的几行规则。

最后再分享一个小技巧：如果只想让表格底部那条线消失，但完全不想动横线和竖线，只需要针对.el-table::before这一个伪元素动手：

::v-deep .el-table::before { display: none; }

这是“只消除下方边框”的最小改动方案，实测在element-ui 2.15.x下有效。如果你用的版本不同，打开开发者工具，选中底板容器看伪元素是否存在，再决定写不写这条规则。OK，以上就是在vue2里给el-table做自定义样式、消除右侧和下方边框的全部经验，按这套思路来，基本能覆盖九成以上的定制需求。