el-table使用fixed=“right“时固定多列，最左边的左边框不显示

白白白白桃乌龙

已于 2025-02-26 14:23:06 修改

阅读量606

点赞数 3

CC 4.0 BY-SA版权

文章标签： css 前端 vue elementui

于 2025-02-17 11:09:32 首次发布

本文链接：https://blog.csdn.net/qq_42196055/article/details/145678049

.el-table--border .is-scrolling-right+.el-table__fixed-right{
  border-left:  1px solid #3B4450;
  box-sizing: border-box;
}

离奇的bug

方法2：

调试发现right 减去 2px 也能实现，也就是：

.el-table--border .is-scrolling-right+.el-table__fixed-right{

  // 让right 在原有数值上 -2 
  right: 6px;

}

但我不知道这个 8px是怎么来的，是否和项目个性化的表格有关，不知道是不是动态的right

--------后续修改与发现

方法2出现的 8px 是我设置的-webkit-scrollbar 滚动条宽度！

方法1 当table 使用左固定列时，会失效，修改如下：

.el-table--border .is-scrolling-right+.el-table__fixed-right,
.el-table--border .is-scrolling-right+.el-table__fixed+.el-table__fixed-right{
  border-left:  1px solid #3B4450;
  box-sizing: border-box;
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

白白白白桃乌龙

关注关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

el-table使用fixed=“right“时最后一列边框消失

qq_24133535的博客

10-21

2485

现象：最后一列“邮编”设置了fixed=“right”，边框消失解决方法： <style> .el-table__fixed-header-wrapper { .el-table__header { th:not(.is-hidden):last-child { right: -1px; } } } </style>

前端：普通表格固定行列

weixin_46001736的博客

04-01

1269

前端：普通表格固定行列

参与评论您还未登录，请先登录后发表或查看评论

解决el-table使用fixed后错位问题

weixin_42119356的博客

01-24

2321

解决el-table使用fixed后错位问题

element-ui中el-table使用fixed=“right“时固定列左边框消失问题

xiaobaige6084的博客

07-11

1916

element-ui中el-table使用fixed="right"时，横向滚动条滚到最右，固定列左边框不显示，加上如下css样式即可解决。

elementplus的表格操作栏合并之后边框丢失和错位问题

热门推荐

jack_rose_me的博客

11-12

1万+

1、方法一试了不行对table 增加 ref=“multipleTable” 在请求数据后增加 doLayout() 方法； .finally(() => { this.$nextTick(() => { this.$refs.multipleTable.doLayout(); }); }); 2、方法二试了不行在<el-table>标签上加一个class="table-fixed" 在样式文件中增加如下css代码（利用样式...

vue2中使用el-table组件el-table-column固定列fixed=right后滚动时背景变成透明了

05-08

好的，我现在需要解决用户提到的在Vue2中使用Element UI的el-table组件时，当fixed='right'的列在滚动时背景变透明的问题。首先，我得理解用户的问题场景。用户可能是在表格右侧有固定列的情况下，当水平滚动时，...

03-28

然后，引用[3]提到当有children下级时，第一列不对齐的问题，可以通过设置indent属性为0解决。这可能在多级嵌套时需要注意。接下来，我需要整理实现步骤。根据引用[4]，可能需要使用el-table的expand插槽来展开子...

Vue Element UI el-table 显示样式重叠 (问题解决)

Bnana博客

04-09

6082

Vue Element UI el-table 显示样式重叠(问题解决) element ui 问题解决 element ui el-table 样式显示问题 element ui el-table 样式覆盖问题 element ui el-table 样式问题 element ui el-table 表格显示问题 element ui el-table 表格样式重叠叠加问题 element ui el-table 样式叠加显示问题解决 Vue Element UI 问题解决

element-plus表格组件el-table 的使用

lucky_ly的博客

08-17

2739

表格是在前端页面中是经常被用到的，尤其是管理系统，几乎每个页面都会存在表格，所以掌握表格组件是非常有必要的。element-plus提供el-table，el-table-column来渲染表格，

el-table 固定表头和固定列之后由于滚动条导致的表格线错位

qq_45915537的博客

07-05

3530

table 直接调用tabelRevise函数即可 tableRevise(this.$refs.dirctTable.$el) //修正el-table错位 function tableRevise(table) { const tableWrapper = table.querySelector('.el-table__body-wrapper') const tableBody = table.que...

el-table 右侧固定以后，左边边框消失

weixin_46531845的博客

04-23

2383

问题：固定列到右边，左边框在特定分辨率下不显示的问题。固定以后，操作栏右边边框还存在。但是修改页面的宽度以后，操作栏右边边框就隐藏了。调整页面宽度再次显示出来。总结：在特定分辨率下不显示解决办法： 1.重新添加边框 //表头 thead th:not(.is-hidden):last-child { border-left: 1px solid #EBEEF5; } //表单 .el-table__row { td:not(.is-hi

el-table固定列偶发拖拽出现边框消失的问题，固定列底部无法点击滑动的问题

weixin_44295184的博客

01-18

876

el-table固定列偶发拖拽出现边框消失的问题

el-table .el-table__fixed-right改变滚动条宽度之后，右侧显示底部文字

lmyh1111的博客

05-19

758

el-table .el-table__fixed-right 解决：改变表格滚动条宽度之后，右侧显示底部文字内容。

关于el-table固定列在右侧后缺失边框的解决办法

m0_60336681的博客

10-19

1636

关于el-table固定列在右侧后缺失边框的解决办法

el-table加fixed无数据底部线条显示

wxxmthgh的博客

05-24

529

el-table底部线条显示问题

el-table .el-table__fixed-right改变滚动条宽度之后，底部显示多于文字

02-12

### 解决 el-table 固定列右侧修改滚动条宽度后底部出现多余文字当处理 `el-table` 的固定列时，如果调整了滚动条的宽度，可能会遇到表格底部出现多余的空白或文字显示不正常的问题。这通常是因为表头和表体之间的宽度计算不同步所引起的。针对此问题，可以通过自定义 CSS 来修正这个问题： #### 自定义样式覆盖默认行为通过深入定制 `.my-el-table` 类中的样式来确保表头和表体的一致性[^3]。具体来说，可以尝试如下方法： ```css /deep/ .my-el-table { overflow-x: hidden; } /deep/ .el-table__header-wrapper { .el-table__header { width: calc(100% + 32px) !important; } } /deep/ .el-table__body-wrapper { width: calc(100% + 16px) !important; .el-table__body { width: calc(100% + 16px) !important; } } ``` 这段代码的作用在于强制设定表头和表体的实际宽度超出容器边界一定量（分别为32像素和16像素），从而避免由于滚动条的存在而导致的内容错位现象。另外，对于可能出现的高度变化影响到内容展示完整性的状况，建议检查是否有其他CSS规则干扰到了`.el-table__fixed-right` 或者其父级元素的高度设置。必要时可通过增加特定的选择器优先级来进行针对性修复。最后，考虑到浏览器兼容性和渲染差异带来的潜在问题，推荐测试不同的浏览器环境，并适当利用开发者工具调试视图模式下的实际表现情况。