写 Vue2 项目用 ElementUI最容易被新手质疑的就是表格控件。默认效果其实不算差但一到“自定义样式”就很容易失控尤其是想消除 el-table 右侧和下方的边框时总有那么两条线像口香糖一样粘在页面上。这两条线不是 bug而是组件内部结构和样式作用域共同作用的结果。这篇文章就围绕 vue2 element-ui 中 el-table 的自定义样式场景把边框来源、深度选择器、滚动条宽度、自适应宽高这几个相关点一次性讲透顺手把开发里常见的全选回显、拖拽排序问题也整理出来。1. 先搞清楚 el-table 的边框到底是怎么来的1.1 渲染后的 DOM 结构比你想象中复杂很多人第一次写 el-table 自定义样式时第一反应就是去覆盖.el-table td或.el-table th的border属性结果发现改了没反应或者改了之后右边和下边还是各留一条线。原因很简单el-table 渲染出来并不是一张干净的table。ElementUI 的表格在实际 DOM 里至少包含以下几层外层容器.el-table表头区域.el-table__header-wrapper表体区域.el-table__body-wrapper内部真正的table classel-table__header和table classel-table__body边框并不只是由某个单元格产生还可能来自外层容器本身的border、内部th/td的border-bottom、甚至滚动条区域默认留出的空隙。更麻烦的是ElementUI 默认用了border-collapse: collapse这会让边框在相邻单元格之间互相合并表面上看起来是一条线实际上可能是好几个容器的样式叠加出来的结果。所以第一步不是急着写 CSS而是先打开浏览器 DevTools把.el-table、.el-table__body-wrapper、td、th这几个节点的样式逐个看一遍。很多时候右侧那条竖线来自.el-table本身自带的border-right而底部横线来自.el-table__body-wrapper或最后一个tr的border-bottom。不定位到这个层级写再多!important也很难收场。我看过不少同事的项目最后是靠!important硬压才把边框消掉结果页面其他地方用到表格时又全乱了。这种“暴力覆盖”不是长久之计真正靠谱的做法是把样式固定在一个可控的范围内后面我会专门讲。1.2 深度选择器是绕不开的一关Vue2 单文件组件里的style scoped会给当前组件模板中的 DOM 节点加上一个>.custom-table td { border-bottom: none; }经过编译后大概会变成.custom-table td[data-v-xxxx] { border-bottom: none; }问题在于el-table 内部那些td、th、.el-table__body-wrapper等节点虽然是运行时渲染出来的但它们同样会带上当前组件的>/* Vue2 中比较推荐 */ ::v-deep .el-table__body td { border-bottom: none; } /* 或者 */ /deep/ .el-table__body td { border-bottom: none; } /* 如果用的是原生 CSS */ :deep(.el-table__body td) { border-bottom: none; }/deep/是早期 vue-loader 的写法现在很多新版脚手架已经不推荐了::v-deep在 Vue2 里兼容性不错也是大多数项目中还在用的:deep()是 Vue3 风格但如果你用的构建工具比较新Vue2 里也有人这么写。我的建议是统一用::v-deep团队协作时不容易产生歧义。写的时候要注意一个细节深度选择器前面一定得有“父级类名”作为依托。写成::v-deep td这种裸写法虽然也能生效但作用范围太大容易误伤其他表格。写成.custom-table ::v-deep td才够稳妥只在当前自定义表格范围内生效。1.3 为什么不建议在全局样式里直接去掉表格边框如果你有多个页面、多张表格难免会图省事在全局 CSS 里写一段.el-table th, .el-table td { border: none !important; }这个思路没有错但它有一个非常现实的问题你没办法控制“哪些表格需要边框、哪些不需要”。比如订单列表页需要保留单元格边框用户列表页不需要这两种需求在同一个项目里很常见。全局去掉之后订单页又要想尽办法把边框加回来来回改样式的时间可能比一开始按表格定制还多。另一个问题是权重竞争。ElementUI 的默认样式已经有一层border-bottom全局覆盖时为了保证优先级你大概率会加!important。一旦!important成了习惯后面任何微调都要再叠一层!important代码会变得很难维护。所以在实际项目里我倾向于给表格组件加一个自定义className然后用深度选择器在这个类名范围内做定制。这样既能隔离样式又保留了在其他表格上用默认样式的自由度。这也是下面要讲的方案核心。2. 自定义样式前先想清楚这几个关键点2.1 你要去掉的是“外边框”还是“单元格边框”很多人说“我要去掉表格右侧和下方的边框”但这句话其实很模糊。右侧那条线可能是外层.el-table的border-right也可能是最后一列td的border-right下方那条线可能是.el-table的border-bottom也可能是最后一个tr的border-bottom还可能是 body-wrapper 自带的 border。我建议在动手前先做一个判断分清楚需求如果整张表格只需要“横向分隔线”不需要纵向分隔线那么应该保留tr的border-bottom去掉单元格的border-right。如果表格最外层完全不要边框但内部单元格还要网格线那就需要去掉外层容器的 border保留单元格 border。如果只是去掉“右下角两条边”很多时候只需要处理外层容器和最后一个单元格。实际操作中我习惯先做一个“全去掉”的基座再按需把需要保留的线加回来。比如先写.custom-table ::v-deep .el-table__inner-wrapper, .custom-table ::v-deep .el-table__body-wrapper, .custom-table ::v-deep td, .custom-table ::v-deep th { border: none; }然后在这个基础上用更具体的选择器把横线加回来.custom-table ::v-deep .el-table__body td { border-bottom: 1px solid var(--border-color); }这样思路很清晰代码也不会越写越乱。2.2 方案一用 border 属性从源头控制ElementUI 的 el-table 本身有一个border属性默认是false。当你不传border时表格默认只有表头下边框和单元格下边框没有纵向边框。但很多项目为了美观会像下面这样写el-table :datalist border el-table-column propname label姓名 / /el-table一旦加了borderElementUI 就会给所有th/td加上纵向和横向分割线表现成完整的网格效果。如果你不想要完整网格那最省事的做法就是去掉border属性el-table :datalist el-table-column propname label姓名 / /el-table这样做的好处是渲染出来的 DOM 结构里单元格默认的border-right就直接没有了你不用再写任何覆盖样式。缺点也很明显项目里如果已经统一依赖border属性来生成所有网格线单独去掉一个页面的border会导致这个页面表格内部的竖线全消失可能并不是产品想要的。所以这个方案更适合新项目或者页面里只有少数几个表格的场景。老项目里批量改属性风险较大建议优先使用 CSS 覆盖方案。2.3 方案二用深度选择器局部覆盖如果你的项目已经大量使用了border属性并且产品只要求去掉右侧和下方的边框CSS 覆盖方案是最稳的。它的核心思路就是保留除最后一列之外的所有边框只让表格最外层看起来“没有右边和下边”。先看一个典型实现.custom-table ::v-deep .el-table__inner-wrapper { border-right: none; border-bottom: none; } .custom-table ::v-deep td, .custom-table ::v-deep th { border-right: none; } .custom-table ::v-deep tr:last-child td { border-bottom: none; }这段代码第一段用来消掉外层容器右侧和底部的 border第二段把单元格的纵向线全部去掉第三段把最后一行数据下方的横线去掉。这样整个表格的视觉结果就是内部只有横向分隔线表格外侧右边和下边没有任何边框。如果你还想保留最后一列右侧的分隔线只是不想表格最外层出现边框那可以不加border-right: none只写外层容器的border-right: none即可。具体情况取决于产品设计需要的效果不同保留的选择器也要相应调整。在这里也提醒一下很多人会把custom-table这个类名直接写到el-table上但 ElementUI 组件会把非 props 的属性透传到根节点上所以类名最终会出现在渲染后的外层容器上。换句话说像下面这样写是可行的el-table classcustom-table :datalist border然后样式里的.custom-table就能命中.el-table外层根节点。2.4 三种方案对比方案难度影响范围适合场景去掉 border 属性低整张表格新项目 / 单页少量表格全局覆盖样式低全局所有表格不推荐影响面太大深度选择器局部覆盖中指定表格老项目 / 复杂定制从维护角度看第三种的灵活度最高。虽然一开始需要多写几行选择器但后续如果要加斑马纹、加 hover 效果都很容易在.custom-table范围内扩展不会和其他页面互相干扰。3. 消除右侧和下方边框的完整实操步骤3.1 直接处理外层容器的边框先看一个最简单的场景el-table 默认状态下右侧和下方各有一条线。这个时候可以直接把外层容器和内容区域的边框统统去掉.custom-table ::v-deep .el-table__inner-wrapper { border-right: none; border-bottom: none; } .custom-table ::v-deep .el-table__body-wrapper { border-right: none; border-bottom: none; }但要注意不同版本的 ElementUI 里外层容器的类名可能会有区别。早期版本是.el-table__body-wrapper有些版本还会有.el-table__inner-wrapper。如果你在 DevTools 里看不到inner-wrapper那就只保留body-wrapper的覆盖即可。为了保险起见可以写一个比较“宽容”的选择器把表格内的所有主要区域容器都覆盖到.custom-table ::v-deep .el-table__inner-wrapper, .custom-table ::v-deep .el-table__header-wrapper, .custom-table ::v-deep .el-table__body-wrapper, .custom-table ::v-deep .el-table__footer-wrapper { border-right: none; border-bottom: none; }这种写法虽然选择器多一些但胜在不会因为 ElementUI 小版本迭代而失效。3.2 保留横向线、去掉纵向线的经典配置产品设计里最常见的表格风格是“只有横向分割线”。这种效果如果只靠去掉border属性其实是做不到的因为默认的 el-table 在去掉border后虽然没有了纵向线但表头和表体单元格都会有下边框视觉上也是一种横线效果。不过当你想精确控制线的颜色、粗细、间距时还是需要自己用 CSS 来覆盖。我的实现习惯是这样.custom-table ::v-deep .el-table__header th { border-bottom: 2px solid #e5e6eb; height: 48px; padding: 0; } .custom-table ::v-deep .el-table__body td { border-bottom: 1px solid #f0f0f5; height: 44px; padding: 0 12px; } .custom-table ::v-deep .el-table__body tr:last-child td { border-bottom: none; }这段样式等价于“只留横线、去掉表格最底部横线和所有竖线”。表头的下边框可以加粗一点表体的下边框用浅色呈现出常见的报表风格。注意tr:last-child td这个选择器它负责把最后一行数据下面的横线去掉否则表格底部还是会带出一条线。为什么这里的padding: 0会让部分人疑惑因为 ElementUI 默认给td和th设置了padding: 0但内部分了一个cell容器来承载内容。你想调整单元格内边距时不要去改td的 padding而是改.cell的 padding否则会影响表头和表体之间的对齐。这个坑在下一节也会提到。3.3 顽固的右下角边框怎么彻底清掉按上面写法操作之后绝大多数表格边框都能消掉。但有一种特殊情况就是表格内容不足一屏、底部留白时你会发现在表格下方空白区域或滚动条轨道附近仍然有一条线。这条线往往来自.el-table__body-wrapper的border-bottom或者是由滚动条轨道占位导致的视觉残留。这时候可以检查这几个位置.custom-table ::v-deep .el-table::before { display: none; } .custom-table ::v-deep .el-table--border::after { display: none; } .custom-table ::v-deep .el-table__empty-block { border-bottom: none; }ElementUI 在某些版本里用.el-table::before和.el-table--border::after来生成边框绕过单元格 border直接画线。如果你在 DevTools 里明明看到没有td有 border但视觉上还有一条线多半就是伪元素生成的。把这些伪元素隐藏掉之后基本上不存在消不掉的边框。实在还不行就检查是不是表格外层还有其他父容器的box-shadow或border那种问题已经不属于 el-table 本身而是页面布局层面的干扰了。3.4 验证覆盖是否生效的小技巧写完 CSS 之后建议不要只靠肉眼判断直接打开 DevTools在 Elements 面板里选中外包层节点在 Styles 面板里搜索border-right和border-bottom。重点看两个东西有没有来自.el-table默认样式的高优先级规则。你自己写的类名选择器是否真的命中节点。如果命中但没生效大概率是权重被默认样式压住了。此时不要一上来就加!important可以先把选择器写得更细比如增加.custom-table.custom-table ::v-deep的写法或者把.el-table前缀也带上通过提升选择器权重来解决问题。在 Vue2 的 scoped 环境下尽量少用!important否则后面调试会陷入泥潭。4. 消除边框时最容易踩的三大“隐形坑”4.1 固定列带来的半条竖线el-table 在处理固定列时并不是真正把列固定住而是通过position: sticky或者类似机制在左侧或右侧生成一层浮层。这个浮层会自带阴影或边框于是就算你已经把单元格边框全部去掉了固定列的右侧还是会多出半条竖线视觉上特别突兀。解决办法是覆盖固定列相关样式.custom-table ::v-deep .el-table__fixed-right::before, .custom-table ::v-deep .el-table__fixed::before { background: transparent; } .custom-table ::v-deep .el-table__fixed-right { border-left: none; } .custom-table ::v-deep .el-table__fixed { border-right: none; }其中::before是 ElementUI 用来画固定列阴影的伪元素背景色默认是一层渐变色表现为一条阴影线。把background: transparent设置之后那条线就没了。如果你用了fixed属性对列进行固定还要额外关注滚动条的宽度。固定列翻动时如果滚动条宽度没有被计算进去表头和表体容易出现几个像素的错位这个在上面的滚动条部分已经有提到。4.2 滚动条宽度挤压表格内容导致右侧多一条空隙El-table 的滚动条默认是“悬浮在内容区内的”但你如果手动把滚动条加粗或者改了系统的滚动条样式问题马上就来了表体右侧会被滚动条占据视觉上表格下方和右侧会出现类似边框的区域而且表头和表体的滚动条宽度不一致容易出现“对不齐”。比如有经验的人会在全局设置里写::-webkit-scrollbar { width: 6px; height: 6px; }这个设置本身没问题但 el-table 内部有些区域会自动计算高度有些不会。当滚动条宽度从默认的 15px 变成 6px 后表头与表体之间的宽度计算逻辑不会自动跟着变可能出现表头列和表体列错位的情况。解决办法有两个方向。一种是把表格设置为fit也就是让列宽自适应另一种是在表格外层不保留原生滚动条而是用数据分页来控制显示条数让表格高度完全由内容撑开从根本上绕开滚动条宽度问题。如果你确实需要表格内部滚动同时又想去掉右侧和底部边框那我建议把滚动条样式做得尽量“隐形”.custom-table ::v-deep .el-table__body-wrapper::-webkit-scrollbar { width: 6px; height: 6px; } .custom-table ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb { background: #c0c4cc; border-radius: 3px; }这样滚动条还是存在的但视觉上不会像默认那样占很大地方右侧和下边的“线感”会降低很多。4.3 表头筛选和排序图标影响边框观感有时候边框看起来还在并不是真的有 border而是表头的筛选箭头、排序图标和边框线凑得太近就给人的视觉形成一条“假线”。比如sortable列激活后ElementUI 会在表头单元格右侧显示排序图标图标自带一个小的背景块和相邻列的边框叠在一起看起来就像多了一条竖线。这种情况不用去调 border只需要把排序图标的右边距调整一下或者在表头加一点 padding 就能解决。.custom-table ::v-deep .caret-wrapper { right: 4px; }调整的时候注意别改得太宽否则表头和表体列宽可能对不齐。ElementUI 表格的列宽是自动计算的表头内容变化导致宽度变化很容易引发“列错位”的连锁反应。5. 让表格高度和宽度自动匹配容器不再傻傻写死5.1 为什么“自动计算列表宽高”会成为热搜词很多人搜“el-table 自动计算列表的宽高”大概率是遇到了页面适配问题表格在浏览器全屏时高度不够下方留白一大截或者表格外层容器高度变化了表格高度没跟着变内容区直接溢出边框被顶到页面底部。这个问题的本质是 el-table 自身不会自动检测外部容器尺寸。组件初始化时计算一次宽度和高度之后没有监听容器尺寸变化。如果页面布局使用了 flex 或者百分比高度窗口一变化el-table 还是那套老尺寸。解决思路不复杂用 ResizeObserver 监听表格外层容器拿到实际宽高后再把这个值赋给 el-table 的height或max-height。Vue2 项目里可以封装成自定义指令也可以写在mounted和beforeDestroy生命周期里。5.2 用 ResizeObserver 监听容器尺寸在 Vue2 里最干净的写法是这样template div reftableWrap classtable-wrap el-table classcustom-table :datalist v-loadingloading :heighttableHeight el-table-column propname label姓名 / el-table-column propstatus label状态 / /el-table /div /templateexport default { data() { return { list: [], tableHeight: 400, }; }, mounted() { this.initTableHeight(); this.resizeObserver new ResizeObserver(() { this.initTableHeight(); }); if (this.$refs.tableWrap) { this.resizeObserver.observe(this.$refs.tableWrap); } }, beforeDestroy() { if (this.resizeObserver) { this.resizeObserver.disconnect(); } }, methods: { initTableHeight() { if (this.$refs.tableWrap) { const wrapHeight this.$refs.tableWrap.clientHeight; // 减去分页、筛选条件等所占高度保留表格实际可视高度 const offset 48; this.tableHeight Math.max(wrapHeight - offset, 200); } }, }, };这段代码的核心思路是让 el-table 的height值跟随外层容器尺寸变动。外层容器通过 flex 布局填满页面内部表格拿到剩余空间的高度后如果内容过多就显示滚动条如果内容不足表格高度自动收缩不会出现下方留白。给height赋值时要注意ElementUI 的height属性不仅控制可视高度还控制内部滚动区。如果不希望出现内部滚动条而是希望表格随着内容自动变高那么不要传 height直接让表格高度由内容撑开。但这样下方边框可能又会出现因为容器高度大于表格内容高度时会露出底部区域。两难之时可以在外层容器上再补充一个overflow: hidden把多余区域裁掉。5.3 宽度自适应时给滚动条预留位置宽度的自动计算一般不需要手动处理el-table 默认会根据列宽width参数和容器宽度自动分配。但如果你用min-width而没用width表格会尝试撑满容器。此时一旦出现滚动条滚动条会占据一部分宽度最后一列容易被挤破。常见处理办法是给最后一列设置一个固定宽度或者在表格外层使用overflow-x: hidden。不过直接隐藏横向滚动条不是长久之计遇到小屏设备时内容会被截断。我的习惯是对可能产生横向滚动的表格保留横向滚动但在样式上弱化滚动条存在感同时给最后一列额外加padding-right来补偿滚动条宽度。这个padding-right的值等于自定义滚动条宽度比如 6px。这样内容不会被遮挡视觉上也看不出明显边框残留。如果使用的是固定高度表格并且同时有纵向滚动条那么最后一列右侧还需要额外增加一点空间。这个细节很容易被忽略调试的时候看起来像是“右侧还差一条线”但其实是被滚动条吃掉了。5.4 结合边框消除方案做整体封装把自适应高度和边框消除结合起来可以封装成一个通用的“干净表格”组件效果很理想。核心思路是所有表格外层统一使用一个命名类内部统一写出自动计算高度逻辑样式里统一处理边框、滚动条、固定列。我在项目里会把样式收敛到一个 mixin 里哪个表格需要就用mixin clean-table() { ::v-deep .el-table__body td { border-bottom: 1px solid #f0f0f5; } ::v-deep .el-table__body tr:last-child td { border-bottom: none; } ::v-deep .el-table__body-wrapper { border-right: none; border-bottom: none; } }用的时候在scoped样式里统一引用.custom-table { include clean-table(); }这样既保证了团队成员写出来的表格视觉风格统一又避免了重复劳动。后续如果要调整边框颜色、高度只需要改 mixin 一处。6. 与表格样式相关的实战踩坑记录6.1 表格全选按钮影响其他页和边框样式无关但在实际项目里经常会和样式问题一起被提出来。el-table 的select-all默认只选中当前页数据如果想让“全选”只针对当前页而不影响其他页需要在select-all事件里手动控制。我常用的做法是给el-table加row-key同时通过reserve-selection控制跨页保留再在“全选”时只保留当前页数据。代码示意el-table reftableRef :datalist row-keyid select-allonSelectAll selection-changeonSelectionChange el-table-column typeselection width48 / /el-tablemethods: { onSelectAll(selection) { const currentPageIds this.list.map((item) item.id); const keepItems selection.filter((item) currentPageIds.includes(item.id)); this.selectedRows keepItems; }, onSelectionChange(selection) { // 这里也可以通过合并的方式更新选中状态 }, }但这种写法需要结合reserve-selection一起理解。如果表格设置了跨页保留选中那么用户在第一页勾选几条切到第二页后第一页的勾选状态还保存着。此时再点击“全选”selection 里可能混入之前页的数据你就必须在select-all回调里做过滤否则“全选错误”问题就出现了。6.2 回显选中状态后全选状态错乱这个问题也是高频。比如编辑页面加载完之后后端返回一组已选中的 id你把它们回显到表格里然后用户点了一下全选结果表格所有行都变成了选中或者有些行明明应该有状态却消失了。原因通常是两个一是row-key没有设置唯一字段二是回显数据与表格数据不是同一份引用。el-table 的selection状态依赖对象引用或者row-key。如果不加row-key组件会通过对象引用判断是否选中回显时创建的新对象引用和表格原始数据的对象引用不一致自然无法正确匹配。解决办法很简单el-table row-keyid :datalist :row-class-namerowClassName 同时回显时不要在created里直接用对象覆盖而是根据 id 找到表格数据里对应的对象再改变其选中状态。或者在拿到回显 id 数组后调用如下方法this.tableDataSource.forEach((item) { this.$refs.tableRef.toggleRowSelection(item, this.selectedIdList.includes(item.id)); });这里最核心的一点是toggleRowSelection的第一个参数应该是表格数据源中的真实对象而不是一个新的同结构对象。否则会一直出现“看起来选中了但一刷新或者一全选又不对”的诡异问题。6.3 行拖拽排序和展开行同时使用时的边框异常项目中用 sortablejs 或 vuedraggable 做行拖拽时通常需要监听row-drop事件然后调整表格数据顺序。如果表格同时还有展开行拖拽过程中很容易出现展开区域和拖拽行的边框重叠特别是在展开行渲染出别的表格或表单时外层边框会被撑破。这种场景下最关键的不是去调 border而是给拖拽行加一个视觉上“分离”的效果。比如拖拽时动态改变目标行的类名.sortable-ghost { opacity: 0.6; background: #f5f7fa; } .sortable-chosen { border: none; box-shadow: 0 0 6px rgba(0, 0, 0, 0.1); }内部展开行如果有自己的td记得在样式里同时控制.el-table__expanded-cell的边框。否则即使外层表格边框消除了展开行自带的内边框还是会多出来。6.4 用函数批量设置单元格样式要谨慎有时候需要根据数据给单元格添加不同背景色新手会直接在row-style或cell-style里写复杂函数比如el-table :row-stylegetRowStylegetRowStyle({ row }) { if (row.status error) { return { background: #fef0f0, border: none }; } return {}; }这个写法本身没问题但如果你在函数里返回了border、background等属性它会以行内样式的形式作用到tr上。行内样式的优先级很高你之前在 scoped CSS 里写的边框消除样式很可能被它覆盖。所以更推荐的做法是只返回一个状态标记把真正的样式写在 class 里getRowClass({ row }) { return row.status error ? row-error : ; }.custom-table ::v-deep .row-error td { background: #fef0f0; border-bottom: 1px solid #fbc4c4; }这样边框、背景色都能统一管理也不会出现“行内样式压过 scoped 样式”的优先级冲突。7. 我沉淀下来的边框定制方案省心也干净7.1 给整个项目准备一套“无边框表格”工具类在一个长期维护的 Vue2 ElementUI 项目里我最推荐的做法是准备一个全局工具类专门服务于“干净表格”风格。它不是无脑去掉所有边框而是提供几种预设风格比如table-line-row、table-line-none、table-line-grid。/* 只有横向分割线 */ .table-line-row ::v-deep .el-table__body td, .table-line-row ::v-deep .el-table__header th { border-right: none; } .table-line-row ::v-deep .el-table__body tr:last-child td { border-bottom: none; } /* 完全无边框 */ .table-line-none ::v-deep .el-table__inner-wrapper, .table-line-none ::v-deep .el-table__body-wrapper, .table-line-none ::v-deep th, .table-line-none ::v-deep td { border: none; }这样在组件模板里只需要写el-table classtable-line-row :datalist不需要每个页面都重复写一遍深度选择器也不需要去记一堆 ElementUI 内部类名。当然前提是团队统一约定不能随意在全局工具类之外再覆盖表格边框否则还是会乱。7.2 把固定列、滚动条、展开行一起纳入约定只处理“右侧和下方边框”很容易但要保证项目里所有表格的视觉统一就没那么简单了。我会在全局工具类里把滚动条、固定列阴影、展开行内边距一起处理掉避免人人在页面里各写一套。.table-line-row ::v-deep .el-table__fixed::before, .table-line-row ::v-deep .el-table__fixed-right::before { background: transparent; } .table-line-row ::v-deep .el-table__body-wrapper::-webkit-scrollbar { width: 6px; height: 6px; }当这些细节进入团队的基础样式文件后新成员做出来的页面也不会出现突兀的边框或错位整体质量会明显稳定下来。7.3 最后再提一个建议改表格样式之前先去看官方样式变量ElementUI 2.x 的很多样式实际上可以通过 SCSS 变量定制。如果你有权限调整整个项目的主题变量可以直接修改$border-color、$table-border-color等颜色值这样连全局表格边框颜色都会统一变化不需要逐个页面去覆盖。具体可以看 element-ui 的 theme 源码找到table.scss中定义的变量。不过这种方式影响范围很大适合项目初期就规划好。如果项目已经开发到一半再改全局变量容易引发不可预期的视觉变化。因此我在老项目里通常还是会选择“工具类 深度选择器”的局部覆盖思路风险最小效果也最可控。表格样式这件事本质上不是“会不会写 CSS”的问题而是“知不知道组件内部结构”的问题。把 el-table 拆开看一遍理解边框从哪来、滚动条占多少宽度、固定列怎么画阴影再动手写样式你会发现那些看似顽固的边框其实都能在几行深度选择器里解决干净。