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

最新推荐文章于 2024-08-19 10:46:37 发布
原创 最新推荐文章于 2024-08-19 10:46:37 发布 · 924 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #vue.js #css3

本文解决 el-table 中固定列不随表格滚动的问题。关键在于为固定列设置高度，确保其与表体同步滚动。

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

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

 

jsPao
关注
el-table实现固定列，及解决固定列导致部分滚动条无法拖动的问题
askuld的博客
07-05 3053
当数据量动态变化时，可以为 Table 设置一个最大高度。通过设置max-height属性为 Table 指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条。fixed属性：列是否固定在左侧或者右侧，true 表示固定在左侧；可选值：true, left, right。
el-table设置指定列固定，不受滚动条影响
花椒和蕊的博客
05-14 7636
常规的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 952
问题描述 如下图所示，固定操作列在右侧，但是列表内容滚动，固定列没有随之滚动 解决方法 .el-table__fixed-body-wrapper{ bottom: 0; }
el-table 使用fixed 固定列 但是固定列不会随着Y轴滑动
ProgrammingWhite的博客
09-16 3789
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 1550
使用el-table的fixed属性固定表格列的时候滚动条被固定列覆盖部分无法拖动
Vue2中el-table数据可左右滚动的情况，解决cell使用el-popover随着页面滚动的问题
最新发布
10-31
解决方案的核心是让el-popover能够跟随表格的滚动而更新位置。我们可以考虑以下两种方法： 方法一：使用el-popover的`append-to-body`属性（默认即为true）并监听表格的滚动事件，在滚动时更新el-popover的位置。...
el-table组件有一个展开的功能，当主表格有很多列的时候，主表格会有个横向的滚动条，然后我给子表格宽度设置了一个值，我现在想要在主表格移动滚动条的时候，同时改变子表格横向的位置，我该怎么做
09-16
我们面对的问题是：在Element Plus的el-table组件中，当主表格有横向滚动条且展开了带有子表格的行时，我们希望当主表格横向滚动时，子表格也能同步滚动，即保持与主表格相同的横向滚动位置。 分析： 1. 首先，el...
el-table组件有一个展开的功能，主表的宽度超出可视区域的时候会产生一个滚动条，然后点击展开，子表格的宽度会先和主表格的最大宽度一致，然后超出主表格最大宽度的话会再展示一个滚动条，我现在想让子表格的宽度也是按照可视区域的来，并且住表格的滚动条滚动的时候不会影响到子滚动条
09-16
引用[1]提到：使用el-table的expand展开行时，如果主表格滚动，子表格会跟着滚动，而且子表格的fixed列固定没有生效。 引用[3]提到了横向滚动条的显示设置。 引用[4]提到了使用umy-ui的虚拟表格来解决大数据量...
<div class="horizontal-scroll"> <!-- 表单表格 --> <div class="table-container"> <div class="process-table"> <div class="table-header"> <div class="col">工序名称</div> <div class="col">英语名称</div> <div class="col">流程卡内容</div> <div class="col">工艺等待时间(h)</div> <div class="col">机器运行时间(H)</div> <div class="col">set_up时间</div> <div class="col">人工时间</div> <div class="col">单位</div> <div class="col">数量</div> <div class="col">router状况</div> <div class="col">工序代码</div> <div class="col">操作</div> </div> <div class="table-body"> <div v-for="(item, index) in formList" :key="index" class="table-row"> <!-- 名称 --> <div class="col"> <el-form-item> <el-input v-model="item.routerName" placeholder="工序名称" /> </el-form-item> </div> <!-- 英语名称 --> <div class="col"> <el-form-item > <el-input v-model="item.englishName" placeholder="English Name" /> </el-form-item> </div> <!-- 流程卡内容 --> <div class="col"> <el-form-item > <el-input v-model="item.routercont" type="textarea" :autosize="{ minRows: 1, maxRows: 3}" class="scrollable-textarea" /> </el-form-item> </div> <!-- 时间参数组 --> <div class="col"> <el-form-item> <el-input v-model="item.processWatitime" /> </el-form-item> </div> <!-- 运行(H) --> <div class="col"> <el-form-item> <el-input v-model="item.machineRuntime" /> </el-form-item> </div> <!-- set_up --> <div class="col"> <el-form-item> <el-input v-model="item.setuptime" placeholder="min/pcs" /> </el-form-item> </div> <!-- 人工 --> <div class="col"> <el-form-item> <el-input v-model="item.labortime" placeholder="min/pcs" /> </el-form-item> </div> <!-- 单位 --> <div class="col"> <el-form-item> <el-input v-model="item.routerUnit" /> </el-form-item> </div> <!-- 数量 --> <div class="col"> <el-form-item> <el-input v-model="item.quantity" /> </el-form-item> </div> <!-- 状况 --> <div class="col"> <el-form-item> <el-select v-model="item.routerStatus" placeholder="状态"> <el-option v-for="dict in dict.type.router_status" :key="dict.value" :label="dict.label" :value="dict.value" /> </el-select> </el-form-item> </div> <!-- 代码 --> <div class="col"> <el-form-item> <el-input v-model="item.processCode" /> </el-form-item> </div> <!-- 操作 --> <div class="col"> <el-button type="danger" icon="el-icon-delete" circle @click="removeProcess(index)" /> </div> </div> </div> </div> </div> </div> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="submitForm">确 定</el-button> <el-button @click="cancel">取 消</el-button> </div> </el-dialog> </div>整体修改为flex布局，表头和内容对齐，表头和内容横向滚动是一起的，内容部分可以纵向滚动
09-29
我们可以将整个表格容器设置为flex列布局，并且固定高度，然后内容区域纵向滚动。横向滚动条放在最外层容器上，这样表头和内容都会随着外层容器的横向滚动而滚动。 但是，这样表头也会被横向滚动影响，我们希望...
ElementUI el-table 固定列之后，横向滚动条在固定列的位置上无法滚动的问题
m0_60913515的博客
01-03 1556
【代码】ElementUI el-table 固定列之后，横向滚动条在固定列的位置上无法滚动的问题。
【VUE+ElementUI】el-table表格固定列el-table__fixed导致滚动条无法拖动
sunshineTing2的博客
04-03 2577
当设置了几个固定列之后，点击左侧滚动条却被遮挡
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 2440
在使用elementUI中的表格组件时，因项目需求，需要使前三列固定，后面的列了可以滚动，所以使用了官网中的fixed属性，但使用后出现了问题，就是前三列宽度的滚动条无法拖动了,实际上是前三列把滚动条遮挡住了，记录在此： .el-table__body-wrapper{ z-index: 2 } 在<el - table></el - table>标签上添加此样式class即可解决，也许有些微的瑕疵，但能解决问题，无伤大雅。 ...
解决 el-table 固定列 el-table__fixed 导致部分滚动条无法拖动的问题
Khada_Finger的博客
09-18 4315
关于 el-table 固定列无法拖动问题及解决方案。
el-table表设置固定列后，滚动条无法选中左右滑动
Zxl_sir的博客
08-19 1254
再给一个el-table表格设置左侧几个固定列后，发现横向滚动条在固定列下方的位置无法拖动，只有在非固定列的下方位置才可以拖动，这个问题在windows上用鼠标难以点击滑动，我在mac上由于使用触摸板滑动较多基本不会出现这个问题。问题出现原因：固定列将下方的滚动条盖住了，无法点击到滚动条触发滚动。初步解决方法：改变固定列高度，使滚动条暴露出来。
笔记：Element table表格固定列横向滚动条无法拖动的问题解决
sky8880的博客
12-01 757
表格固定列横向滚动条无法拖动的问题解决
解决el-table锁定列后锁定列对应位置的横向滚动条无法拖动问题
weixin_42401141的博客
03-01 2410
elementui el-table 固定列 滚动条 失效 无法拖动
element table组件列表固定列后横向滚动条的问题
FY18381366936的博客
10-19 875
el-table 横向滚动条
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值