记Element table 列固定 合计 滚动条处于底部

已于 2023-01-31 17:05:47 修改
阅读量1.9k 收藏
点赞数 1
分类专栏： 便捷方法 前端日记 文章标签： elementui vue.js javascript
于 2022-05-30 16:12:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40568570/article/details/125048368
版权
本文介绍了如何使用Element UI实现表格列固定，并确保滚动条始终位于合计行下方。通过DOM操作，将合计行添加到列表父元素中，并调整固定列的高度，以满足需求。
摘要由CSDN通过智能技术生成

因为用的是Element ui 所以就会有一些刁钻的需求 要求第一列拖拽改变宽度时需要固定并且滚动条需要在列表下面不能在合计上面，
本人秉承用最少的代码解决最麻烦的需求就用上了dom操作将合计这一行添加至了列表的父盒子内并修改了固定列的高度
不多bb ， 上代码

<el-table id="ScrollX" ref="TableEl"></el-table>


let TableBox=this.$refs.TableEl.$el;
最低0.47元/天 解锁文章
零杠六
关注
专栏目录
解决element UI中el_table的合计栏在滚动条下方问题
qq_32103525的博客
08-17 5153
解决element UI中el_table的合计栏在滚动条下方问题 最近做项目，公司要求在表格中加入“合计”行。查看element文档后使用自定义方法进行添加。添加后页面中，合计行在横向滚动条下方。 导致出现这个问题的原因是：此时的滚动条是表内容的滚动条。而合计行是属于表尾。 解决方法： 这里要的滚动条是整个table的滚动条，所以将表头、表内容、表尾的滚动条设为visible。我在el_table外包裹了一个div，将该div的滚动条显示。 <style> .itemTrading .e
element table滚动条固定视图底部
xuanyuan_jia的博客
06-08 2651
问题： 使用elementui做表格的时候，发现内容超出浏览器宽度，table出现滚动条，但是滚动条一直固定在表格最下面，查看右边需要滚动到底部再拉动横向滚动条，所以固定横向滚动条在页面底部。 解决方案： //1.css控制 //2. 自制滚动条（未完成 html: <div class="taberContainer" @contextmenu.prevent.capture> <el-table :data="excelData" tooltip-effect="dark
element表格表尾合计行滚动条定位在纵向滚动底部
huanhuan03的博客
07-08 1630
element表尾合计行 element表尾滚动条 el-table表格底部滚动条
elementplus组件el-table横向滚动条固定在可视窗口底部
最新发布
qq_40057216的博客
10-14 426
2，列过多屏幕放不下时，el-table会出现横向的滚动条，但是需要先滚动到底部，才能使用el-table的滚动体，特别麻烦，所以希望横向滚动条能固定在可视窗口底部。1，列表条目少时，el-table高度自然撑开，当列表条目过多时，el-table高度自适应屏幕的大小并且出现纵向的滚动条；在网上搜索了各种各样的方案，都很繁琐且不能满足本人的需求。
vue-element-admin el-table滚动条移到合计的下方
节节竹的博客
06-15 2374
vue-element-admin 里面要是有合计的情况下，滚动条是在合计的上方，我们的需求是改到合计的下方
Element-UI之table 合计行在滚动条下方-兼容fixed的解决办法
weixin_46635404的博客
12-21 1167
【代码】Element-UI之table 合计行在滚动条下方-兼容fixed的解决办法。
将el-table的横向滚动条固定在可视屏幕的下方
huatoudd的博客
10-26 2384
elementui table横向滚动条固定在屏幕最下方显示 原因：数据一多，横向滚动条需要配合纵向滚动条拖动才能看到，十分不方便 解决方法：在el-table中增加 height属性 返回窗口的文档显示区的高度，并且赋值给el-table computed: { tableMaxHeight() { return window.innerHeight - 170 + 'px'; } ...
elementui table固定列的时候，滚动条被遮挡无法拖动
qq_36711388的博客
06-30 2835
elementUI的el-table左固定列把底部滚动条覆盖导致拖动无效，是因为左边固定表格部分高度覆盖了左边表格的滚动条高度，因此无法拖动，这时候我们只需要改变固定表格区域的高度。 代码如下： <style lang="scss" scoped> .el-table { /deep/.el-table__fixed { height:auto !important; // 此处的important表示优先于element.style bottom:17px
element-table表格排序问题和表格高度出现滚动条底部汇总行不显示问题
qq_37100378的博客
11-09 741
这两天在用element-table做数据报表，时不时的会遇到个梗，记录一下： 1. element-table 排序； el-table 表格自带了sortable功能进行切换排序，但我实际用上发现并不能给我想要的结果； 例如： 我想升序排列 <el-table-column prop="je" label="金额" sortable width="140" header-align="center" align="right"></el-table-column> 结果却是乱
三、Element-UI之table 合计行在滚动条下方的解决办法
panchang199266的博客
08-07 5599
问题如下： 解决办法： 特别注意：不能加上 scoped ，否则样式无法生效！这样会带来一个问题，fixed 效果就会消失 <style lang="stylus"> .el-table overflow auto .el-table--scrollable-x .el-table__body-wrapper overflow-x visible .el-tabl...
table固定列 横向滚动_解决elementui合计行在滚动条下方的问题
weixin_39706861的博客
11-30 1872
这段时间做后台管理项目,涉及到element表格的合计功能,但是当出现横向滚动条的时候发现合计一行在滚动条的下方,不符合产品需求.百度了一下,网上好多处理方案,基本上都是修改样式,如下面的代码:.el-table { overflow: auto;} .el-table--scrollable-x .el-table__body-wrapper { overflow-x: visible;...
因为用的是Element ui 所以就会有一些刁钻的需求 要求第一列拖拽改变宽度时需要固定并且滚动条需要在列表下面不能在合计上面，本人秉承用最少的代码解决最麻烦的需求就用上了dom操作将合计这一行添
zhk0705的博客
03-05 370
因为用的是Element ui 所以就会有一些刁钻的需求 要求第一列拖拽改变宽度时需要固定并且滚动条需要在列表下面不能在合计上面，本人秉承用最少的代码解决最麻烦的需求就用上了dom操作将合计这一行添。
el-table 横向滚动条固定在可视窗口底部
热门推荐
ZMJ_QQ的博客
04-21 4万+
有一个需求,当el-table的宽度超出浏览器宽度时，虽然el_table底部会出现滚动条，但是每次需要先滚动到底部，才能使用el-table的滚动体，很是麻烦。因此当el_table的宽度超出屏幕宽度时，要在可视范围底部添加一个横向的滚动条，在网上找了四篇不同方法，全都试了一遍，四个方法的原文地址以及效果图我都贴出来了，看个人选择了，我自己用的第二个，一个大佬写的。...
ElementUI中Table的合计统计栏在滚动条的下方
weixin_42826294的博客
09-19 3365
如图所示，当表格中设置了show-summary会出现合计统计栏，当表格的列数多时，就会导致滚动条在统计栏的上方，如下图所示： 解决办法： 在文件的最底部，再新建一个style标签块，记得去掉scoped: <style lang="scss"> .uncon { .el-table { overflow: auto; } .el-table--scrollable-x .el-table__body-wrapper { overflow-x: visible;
element框架＜el-table＞＜/el-table＞表格滚动条固定位置
nibabaoo的博客
02-01 2114
classList?el?},})/* table自定义指令样式 */
element UI中怎么把el-table的滚动条放在合计栏
09-19
在Element UI中，如果你想将`el-table`的滚动条放置在表的底部，尤其是当需要在总计行（通常包含合计的列）区域滚动时，可以使用一些CSS技巧。默认情况下，Element UI的表格滚动条会跟随内容滚动。但是，如果你想要特殊定制，可以尝试以下步骤： 1. 首先，确保你有一个`el-table-column`来专门用于显示合计信息，并将其设为固定的(`fixed`)，通常是设置为`right`或`bottom`定位，这样它会位于表格底部。 ```html <el-table-column type="summary" label="合计" fixed="bottom"></el-table-column> ``` 2. 然后，你可以通过CSS来阻止整个表格的内容区域滚动，只让合计部分保持滚动： ```css .el-table__body { overflow-y: hidden; /* 阻止内容区滚动 */ } .el-table__footer-wrapper { overflow-y: auto; /* 允许合计区滚动 */ } ``` 请注意，这需要你在项目样式文件（如`.vue`文件中的`style`标签或`.scss`、`.less`等单独的样式文件中）添加上述CSS规则。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值