怎么把el-table的横向滚动条固定在屏幕底部？

最新推荐文章于 2024-09-04 16:40:18 发布
最新推荐文章于 2024-09-04 16:40:18 发布
阅读量4.4k 收藏 5
点赞数
文章标签： javascript css vue.js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43051529/article/details/107975391
版权

1.将.el-table 标签css属性设置为position:absolute;width:auto;max-width:none
2.将.el-table 父标签添加css属性 position:relative;overflow:auto;height:80%

tips: 属性更改是全局的，不要写在scoped内

commissionor
关注
el-table 横向滚动条固定在可视窗口底部
s_156的博客
06-30 7270
有一个需求,当的宽度超出浏览器宽度时，虽然el_table底部会出现滚动条，但是每次需要先滚动到底部，才能使用el-table的滚动体，很是麻烦。因此当el_table的宽度超出屏幕宽度时，要在可视范围底部添加一个横向的滚动条，在网上找了四篇不同方法，全都试了一遍，四个方法的原文地址以及效果图我都贴出来了，看个人选择了，我自己用的第二个，一个大佬写的。
element table滚动条固定视图底部
xuanyuan_jia的博客
06-08 2567
问题： 使用elementui做表格的时候，发现内容超出浏览器宽度，table出现滚动条，但是滚动条一直固定在表格最下面，查看右边需要滚动到底部再拉动横向滚动条，所以固定横向滚动条在页面底部。 解决方案： //1.css控制 //2. 自制滚动条（未完成 html: <div class="taberContainer" @contextmenu.prevent.capture> <el-table :data="excelData" tooltip-effect="dark
el-table 横向滚动条固定在可视窗口底部（可用）
最新发布
m0_50337423的博客
09-04 152
https://github.com/mizuka-wu/el-table-horizontal-scroll#install https://www.bilibili.com/read/cv15185833/
element-ui table组件显示横向滚动条，固定在底部
热门推荐
A873054267的博客
11-06 1万+
只需要在table的属性中设置maxheight 并绑定window.onresize事件，使得浏览器调整时也能出现滚动条，否则会消失或出现大片空白。. window.onresize=() =>{ //动态设置表的最大高度，使得横向滚动条在浏览器底部出现 this.tableMaxHeight=document.body.clientHeight-380 } ...
将el-table的横向滚动条固定在可视屏幕的下方
huatoudd的博客
10-26 2330
elementui table横向滚动条固定在屏幕最下方显示 原因：数据一多，横向滚动条需要配合纵向滚动条拖动才能看到，十分不方便 解决方法：在el-table中增加 height属性 返回窗口的文档显示区的高度，并且赋值给el-table computed: { tableMaxHeight() { return window.innerHeight - 170 + 'px'; } ...
element的el-table中记录滚动条位置的示例代码
10-16
在本篇示例代码中，将重点介绍如何在Element UI的el-table组件中记录和恢复滚动条位置。 通常情况下，直接通过JavaScript的`scrollTop`属性赋值来控制滚动条位置，这种方法简单直接。但在一些特定的场景下，例如在...
elementUI el-table 默认滚动条在表格的最底部
grootbaby
11-07 3461
elementUI 框架，获取不到表格里面的某个元素的 id，但是 el-table 里有个 bodyWrapper 它指向的是 el-table 的表格内容部分，存在 scrollTop，scrollHeight 属性，所以可以用下面方法来实现滚动条在底部的效果。（备注： 需给对应的el-table 设置ref 属性，，本案例中ref 设置为editTable）另外，如果要在不同屏幕下表格高度需要适应屏幕的话，需要用到 window.onresize 函数。
el-table 横向滚动条 固定
06-13
您可以使用以下 CSS 样式来固定 el-table 组件的横向滚动条： ``` .el-table__body-wrapper { overflow-x: auto; overflow-y: hidden; } .el-table__body { min-width: 100%; } .el-table__fixed-body { ...
Vue3 - Element Plus 表格组件 table 设置横纵滚动条样式，覆盖修改 el-table 表格固定宽高时滚动条的宽度、高度、颜色等（提供详细示例代码，解决各种样式覆盖失败问题）
王佳斌
02-21 3307
vue3，element plus，el-table，table表格组件，设置滚动条样式，修改覆盖滚动条颜色和宽度，element plus更改table表格滚动条样式，vue3修改el-table滚动条颜色高度宽度，设置表格滚动条样式，怎么设置element plus表格组件的滚动条宽高颜色，如何设置table固定高度时的滚动条样式，修改el-table滚动条样式不生效怎么办，如何修改表格Table组件中滚动条的样式，Element-plus中表格Table组件中滚动条样式修改，deep覆盖样式失败，滚动
el-table-bar-base:element-ui 表格滚动条插件
08-04
修复表格宽度足够的情况下仍然会出现横向滚动条的 bug v2.1.2 提供纵向滚动功能，开启此功能传入height属性即可。具体见 API 列表 v2.1.0 修复 IE11 无法使用的 bug v2.0.9 新增native属性，在设置表格fixed贴合情况...
element框架＜el-table＞＜/el-table＞表格滚动条固定位置
nibabaoo的博客
02-01 1906
classList?el?},})/* table自定义指令样式 */
el-table 滚动轴固定到底部
weixin_42234899的博客
10-24 1743
el-table 滚动轴固定到底部
element ui表格横向滚动条固定在表格最下面（vue）
weixin_44056717的博客
08-03 1077
element ui表格横向滚动条固定在表格最下面
记Element table 列固定 合计 滚动条处于底部
零杠六
05-30 1895
因为用的是Element ui 所有就会有一些刁钻的需求 要求第一列拖拽时需要固定并且滚动条需要在列表下面不能在合计上面， 本人秉承用最少的代码解决最麻烦的需求就用上了dom操作将合计这一行添加至了列表的父盒子内并修改了固定列的高度 不多bb ， 上代码 <el-table id="ScrollX" ref="TableEl"></el-table> let TableBox=this.$refs.TableEl.$el; //先获取当前tab表格 let DataTable=T
el-table横纵向滚动条固定在可视屏幕内，并自适应分辨率
qq_67447855的博客
03-09 2312
需求：在使用el-table中，当每页数据过多时浏览器会自动产生纵向滚动条，拖动后表头也看不到了，当表头过长后，也会产生横向滚动条，但是横向滚动条固定在table最底部，不利于操作。思路：利用自定义指令中的el找出table的dom元素，获取到视窗总高度，获取到table离视窗上面的高度，获取到指令中回传想设置的离底部的高度，计算后获得table高度，并设置css，再通过resize监听动态获取高度，设置高度。
elementui table组建的表格把横向滚动条固定在屏幕最下方显示
qq_630354780的博客
11-05 4250
elementui table组建的表格把横向滚动条固定在屏幕最下方显示 在table标签加上:height=“tableMaxHeight” <el-table v-loading="listLoading" :data="listData" highlight-current-row default-expand-all element-loading-text="正在加载数据" border size="mini
el-table设置横向滚动条
03-13
el-table是Element UI框架中的一个表格组件，用于展示数据。要设置el-table的横向滚动条，可以通过设置table的属性scroll-x来实现。 具体步骤如下： 1. 在el-table标签上添加属性scroll-x，将其值设置为true，表示开启横向滚动条。 2. 如果表格内容过长，需要设置表格的宽度，可以通过设置table的属性width来指定宽度。 3. 如果表格内容超出了指定的宽度，横向滚动条会自动出现。 下面是一个示例代码： ``` <template> <el-table :data="tableData" :width="tableWidth" :scroll-x="true"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> <!-- 其他列 --> </el-table> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 18, address: '北京市' }, { name: '李四', age: 20, address: '上海市' }, // 其他数据 ], tableWidth: '100%', // 设置表格宽度 }; }, }; </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值