el-table固定列不能跟随表格纵向滚动

最新推荐文章于 2024-08-19 10:46:37 发布
最新推荐文章于 2024-08-19 10:46:37 发布
阅读量842 收藏 3
点赞数
文章标签： 前端 vue.js css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/array__/article/details/126262603
版权

el-table滚动表格，设置固定列之后，固定列不会随着表格Y轴滚动。

表体单独设置了高度，固定列没有设置导致的问题。关键代码就是新增的那段代码。

 

jsPao
关注
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
10-17
在Vue2.0结合ElementUI2.0的项目开发中，常常会遇到表格列数不固定，需要根据数据动态渲染的情况。本篇文章将详细介绍如何实现`el-table`的循环动态列渲染。 首先，ElementUI的`el-table`组件通常通过`<el-table-...
【vue+el-table】表格操作列宽度跟随按钮个数自适应, 方法封装全局使用demo, 开箱即用
09-10
【vue+el-table】表格操作列宽度跟随按钮个数自适应, 方法封装全局使用demo, 开箱即用 【vue+el-table】表格操作列宽度跟随按钮个数自适应, 方法封装全局使用demo, 开箱即用 【vue+el-table】表格操作列宽度跟随按钮...
el-table实现固定列，及解决固定列导致部分滚动条无法拖动的问题
askuld的博客
07-05 2739
当数据量动态变化时，可以为 Table 设置一个最大高度。通过设置max-height属性为 Table 指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条。fixed属性：列是否固定在左侧或者右侧，true 表示固定在左侧；可选值：true, left, right。
el-table设置指定列固定，不受滚动条影响
花椒和蕊的博客
05-14 7440
常规的el-table表格，看官方文档示例就可以实现 就是在你想固定的列上加fixed 如果你固定的列不是最左边或最右边的，比如是第二列的，那你要把第一列和第二列都加个固定，单单给第二列加不起作用。 我这里封装了表格，用for循环循环出列表，加一个fixed，索引列也加一个fixed <el-table-column width="60" label="序号" type="index" align="center" fixed> <template slot-sc
elemnet-ui table固定列没有随列表滚动问题
gyypwrs的博客
04-06 923
问题描述 如下图所示，固定操作列在右侧，但是列表内容滚动，固定列没有随之滚动 解决方法 .el-table__fixed-body-wrapper{ bottom: 0; }
el-table 使用fixed 固定列 但是固定列不会随着Y轴滑动
ProgrammingWhite的博客
09-16 3577
el-table 使用fixed 固定列 但是固定列不会随着Y轴滑动 el-table-column prop=“date” label=“日期” 今天工作中遇到一个问题，在用el-table固定列功能的时候发现我固定的那一列不会随着未固定的表格一起沿Y轴滚动 ，像下面这种，右边动，左边不动 在网上找了一圈，发现大部分是固定列盖住了横向滚动轴的解决方法，和随Y轴滚动并没有什么关系，所以，经过我一番仔细研究，略有成就，分享出来，大家互相交流。 解决BUG： 找到el-table下面的 el-table_
el-table固定列之后滚动条无法拖动
qq_34263566的博客
04-07 1460
使用el-table的fixed属性固定表格列的时候滚动条被固定列覆盖部分无法拖动
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
10-15
这是因为固定列的DOM元素是独立于表格主体的，其高度可能与表格主体不同步，导致在垂直滚动时固定列无法完全显示。当表格宽度刚好能显示所有字段，处于临界状态时，固定列的高度（height）会变小，出现垂直滚动条。 ...
el-table合并列 合并单元格
09-03
el-element中el-table合并单元格 合并列。无限制列合并。通过循环数据源数据获取该列需要合并的行数。
ElementUI el-table 固定列之后，横向滚动条在固定列的位置上无法滚动的问题
m0_60913515的博客
01-03 1454
【代码】ElementUI el-table 固定列之后，横向滚动条在固定列的位置上无法滚动的问题。
【VUE+ElementUI】el-table表格固定列el-table__fixed导致滚动条无法拖动
sunshineTing2的博客
04-03 2299
当设置了几个固定列之后，点击左侧滚动条却被遮挡
ElementUI中el-table设置指定列固定不动,不受滚动条影响
热门推荐
BADAO_LIUMANG_QIZHI的博客
08-21 1万+
场景 使用el-table显示人员信息时，如果要显示的人员信息列比较多，就会出现滚定条。 如果希望前面指定的像工号、姓名等字段不用显示的话，可以设置指定列固定不动。 实现效果如下 注： 博客：https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 只需要在固定不动的列添加fixed属性即可。 <el-table-column label="姓名" al...
使用elementUi表格固定列时，滚动条拖不动
菜鸡互啄的博客
03-15 2383
在使用elementUI中的表格组件时，因项目需求，需要使前三列固定，后面的列了可以滚动，所以使用了官网中的fixed属性，但使用后出现了问题，就是前三列宽度的滚动条无法拖动了,实际上是前三列把滚动条遮挡住了，记录在此： .el-table__body-wrapper{ z-index: 2 } 在<el - table></el - table>标签上添加此样式class即可解决，也许有些微的瑕疵，但能解决问题，无伤大雅。 ...
解决 el-table 固定列 el-table__fixed 导致部分滚动条无法拖动的问题
Khada_Finger的博客
09-18 3910
关于 el-table 固定列无法拖动问题及解决方案。
el-table表设置固定列后，滚动条无法选中左右滑动
Zxl_sir的博客
08-19 1001
再给一个el-table表格设置左侧几个固定列后，发现横向滚动条在固定列下方的位置无法拖动，只有在非固定列的下方位置才可以拖动，这个问题在windows上用鼠标难以点击滑动，我在mac上由于使用触摸板滑动较多基本不会出现这个问题。问题出现原因：固定列将下方的滚动条盖住了，无法点击到滚动条触发滚动。初步解决方法：改变固定列高度，使滚动条暴露出来。
笔记：Element table表格固定列横向滚动条无法拖动的问题解决
sky8880的博客
12-01 732
表格固定列横向滚动条无法拖动的问题解决
解决el-table锁定列后锁定列对应位置的横向滚动条无法拖动问题
weixin_42401141的博客
03-01 2252
elementui el-table 固定列 滚动条 失效 无法拖动
element table组件列表固定列后横向滚动条的问题
FY18381366936的博客
10-19 779
el-table 横向滚动条
element问题总结之el-table使用fixed固定列后滚动条滑动到底部或者最右侧的时候错位问题
m0_50207524的博客
04-08 3858
在使用el-table固定行的时候移动滚动条会发现移动到底部或者移动到最右侧的时候会出现表头和内容错位或者是固定列的内容错位的情况。
el-table fixed固定列纵向滚动条和表格错位
最新发布
02-06
### 解决 Element-UI `el-table` 固定列与纵向滚动条导致的表格错位问题 对于 `el-table` 组件中的固定列和纵向滚动条组合使用时可能出现的表头错位现象，可以通过调整 CSS 和 JavaScript 来解决问题。 #### 方法一：CSS 方案 通过修改 `.el-table--scrollable-y .el-table__body-wrapper.is-scrolling-right` 的宽度来适应滚动条的存在。具体做法是在项目中加入如下全局样式： ```css /* 增加额外空间以容纳垂直滚动条 */ .el-table--scrollable-y .el-table__body-wrapper.is-scrolling-right { width: calc(100% + 6px); /* 6px 是竖向滚动条的大致宽度 */ } ``` 此方法适用于大多数场景下的简单修正[^1]。 #### 方法二：JavaScript 动态处理 当页面加载完毕或数据更新后调用 `doLayout()` 函数可以强制刷新表格布局，从而避免由于 DOM 变化引起的渲染错误。可以在组件内定义一个初始化函数，在获取到最新数据显示之前执行该命令： ```javascript init() { const _self = this; this.$nextTick(() => { setTimeout(() => { // &#39;tableref&#39; 应替换为你实际给 el-table 设置的 ref 属性值 _self.$refs.tableref.doLayout(); }, 100); }); } ``` 这种方法能够有效应对动态变化的数据集带来的潜在错位风险[^4]。 #### 特殊情况——右侧行动栏固定 如果存在最右边固定的行动栏，则可能还需要特别针对`.el-table__fixed-right` 进行优化设置，防止其覆盖水平方向上的滚动条: ```css /* 避免右侧固定列遮挡横向滚动条 */ .el-table__fixed-right::before { content: ""; height: 100%; position: absolute; top: 0; right: -17px; /* 根据实际情况微调这个数值 */ pointer-events: none; } ``` 以上措施综合应用通常能较好地解决因固定列配合纵向滚动条而引发的各种视觉异常状况[^3]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值