elementui table组建的表格把横向滚动条固定在屏幕最下方显示

最新推荐文章于 2025-04-02 15:07:25 发布
原创 最新推荐文章于 2025-04-02 15:07:25 发布 · 4.4k 阅读 · 20 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js

本文介绍如何使用elementuitable组件实现表格的横向滚动条固定在屏幕底部显示。通过设置table标签的height属性为tableMaxHeight，并计算该高度值为窗口可视高度减去170像素。

elementui table组建的表格把横向滚动条固定在屏幕最下方显示

在table标签加上:height=“tableMaxHeight”

<el-table
      v-loading="listLoading"
      :data="listData"
      highlight-current-row
      default-expand-all
      element-loading-text="正在加载数据"
      border
      size="mini"
      style="width: 100%;"
      :row-class-name="tableRowClassName"
      @current-change="handleCurrentChange"
      :height="tableMaxHeight"
    >

然后计算:height="tableMaxHeight"的高度

computed: {
    tableMaxHeight() {
      return window.innerHeight - 170 + 'px';
    }
  },

监控tableMaxHeight的值

图片示例：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

antd vue实现table的分页组件固定位置的效果
峰会路转的博客
12-01 3533
有些时候业务需要所有页面的table高度一直，底部的分页也全部固定在同一个位置，视觉效果上一致，具体的实现方法。
Vue3 - 解决 iView 表格组件 Table 滚动条无法拖动问题，表格固定列时滚动条失效导致拖拽没反应，把表格的某列固定后横向或纵向滚动条无法滚动的问题处理（有合计行或固定时导致失效无法拖曳）
🏆 前端领域优质创作者
07-14 3427
vue3，iview，表格组件，table，滚动条，无法拖曳，拖动，无效，不生效，没反应，无法滚动，鼠标拖住不动，设置固定列，横向滚动条在固定列的位置上无法滚动的问题，vue3iview表格固定后滚动条无法拖动，解决iview带合计行表格固定列后滚动条无法拖拽的问题，table固定列后,进度条无法拖拽iview固定列导致滚动条失效，也不报错，样式，无法覆盖，deep，iviewtable组件当固定高度后，fixed某一列会出现盖住滚动条的情况，滚动条始终位于可视区域的实现，详细解决方案，如何解决这个问题
解决 Vue element ui 的table水平滚动条固定底部（两个姿势）
热门推荐
@baby张~的博客
03-28 2万+
前提条件，需求： 使用vue element UI 的table 由于横向数据比较长，小屏幕电脑会出现水平滚动条，假如每页20条数据，那么我想对第一条数据进行操作，我得先滚动到table最下面，再拉动水平滚动条到最右边，再回滚到最上面，对末尾的操作进行点击。 这样操作太繁琐，所以提出需求：屏幕过小出现水平滚动条时候，将table的水平滚动条固定再屏幕底部。 element ui 的table并...
【Element-plus】如何让滚动条永远在最底部（支持在线演示）
Emily's Blog
10-13 7257
在某些场景下，你可能希望滚动条保持在最底部，以确保用户始终看到最新的内容或信息。通过短短几行代码即可实现这个功能，文章内含实现思路以及支持在线演示。
element-ui table组件显示横向滚动条，固定在底部
A873054267的博客
11-06 1万+
只需要在table的属性中设置maxheight 并绑定window.onresize事件，使得浏览器调整时也能出现滚动条，否则会消失或出现大片空白。. window.onresize=() =>{ //动态设置表的最大高度，使得横向滚动条在浏览器底部出现 this.tableMaxHeight=document.body.clientHeight-380 } ...
将el-table的横向滚动条固定在可视屏幕的下方
huatoudd的博客
10-26 2548
elementui table横向滚动条固定在屏幕最下方显示 原因：数据一多，横向滚动条需要配合纵向滚动条拖动才能看到，十分不方便 解决方法：在el-table中增加 height属性 返回窗口的文档显示区的高度，并且赋值给el-table computed: { tableMaxHeight() { return window.innerHeight - 170 + 'px'; } ...
vue elementUI table表格数据 滚动懒加载的实现方法
10-17
总的来说，Vue 和 ElementUI 结合实现滚动懒加载，既能够保证大量数据的流畅显示，又能够提升用户体验。关键在于合理利用数据绑定、事件监听和组件特性，同时结合前端与后端的分页逻辑，确保数据加载的平滑与高效。...
解决elementui-plus使用el-table的合计功能时横向滚动条显示在了合计上方
qq_43807473的博客
04-02 768
滚动条是一直显示在el-table__body-wrapper上的我们只需要把放在el-table__body-wrapper上的滚动条显示在el-table__footer-wrapper上再开启滚动监听就可以了。这里边注意因为el-table__footer-wrapper用的是el-scrollbar组件，所以。需求：如何在el-table使用合计功能时让横向滚动条显示在最下方。2、监听el-table__footer-wrapper的滚动。实际上不是直接可滚动的元素，而是。
利用纯css实现table固定列与表头中间横向滚动的思路和实例
09-24
本篇文章主要探讨如何利用纯CSS实现table固定列与表头，同时在中间部分添加横向滚动条，以确保用户体验。 首先，我们面临的问题是表格内容因列数过多而产生换行，这影响了视觉效果。为了解决这个问题，可以使用CSS...
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
10-15
补充知识：ElementUI的Table组件在处理固定列时，有时会在屏幕尺寸刚好能容纳全部列时出现固定列显示不全的问题。这是因为固定列的DOM元素是独立于表格主体的，其高度可能与表格主体不同步，导致在垂直滚动时固定列...
el-table 横向滚动条固定在可视窗口底部
weixin_39786536的博客
05-10 1474
1 安装 npm install el-table-horizontal-scroll。这个组件默认的样式个人觉得不太仔细看不见。，将鼠标悬停在表格上时，该栏将显示；或者可以将其更改为always，网上一个大佬写的，是真的厉害。
element table滚动条固定视图底部
xuanyuan_jia的博客
06-08 2908
问题： 使用elementui做表格的时候，发现内容超出浏览器宽度，table出现滚动条，但是滚动条一直固定在表格最下面，查看右边需要滚动到底部再拉动横向滚动条，所以固定横向滚动条在页面底部。 解决方案： //1.css控制 //2. 自制滚动条（未完成 html: <div class="taberContainer" @contextmenu.prevent.capture> <el-table :data="excelData" tooltip-effect="dark
element ui表格横向滚动条固定在表格最下面（vue）
weixin_44056717的博客
08-03 1217
element ui表格横向滚动条固定在表格最下面
elementui el-table 横向滚动条保持在可视范围中
Lazy_Sleep的博客
02-06 6736
实现效果 当列表内容部分可见时，保持横向滚动条在下方。 实现 原理 这里涉及到两个Dom元素，类名分别为 el-table__body-wrapper、el-table__body 通过观察发现横向滚动条在于el-table__body-wrapper上，el-table__body则是实际的列表内容，当el-table__body宽度超出el-table__body-wrapper时就会出现横向滚动条。 因此只需要动态的修改el-table__body-wrapper的height即可实现想要的效果。
element ui的table组件横向滚动条始终位于可视区域
qq_56162766的博客
04-19 4536
element ui的table组件横向滚动条始终位于可视区域
关于element ui 表格下方固定横向滚动条方法
qq_35410433的博客
08-30 3996
在我们日常开发页面时，会遇到表格的纵向滚动条能够自动生成，横向滚动条只能是到了表格最后一行后才能回展示出来，这样查看表格数据需要先滚动到表格的最下方然后再横向调整，再滚动回最上方才能查看上方表格最右侧的完整数据。1.el-table增加 :max-height 属性。2.定义 tableHeight变量。...
Element 中表格固定列后横向滚动条无法拖动的问题解决
分享前端工程化、动效魔法与性能之舞！
12-03 7517
在Element-UI中，当对表格列进行固定后，底部的横向滚动条就无法拖动了，主要的问题就是固定区域盖住了横向滚动条，解决的办法就是将固定区域底部留出一个滚动条高度的距离。 如下图所示为对固定列区域调整后的效果图： 下面是解决问题所需的代码： .el-table .el-table__fixed { height:auto !important; bottom:16px; } 需要注意的是，上面的代码需要放在全局的样式文件中才有效果。 ......
Element 中表格固定列后横向滚动条无法拖动
找师父的小白的博客
12-16 772
当我把表格当中前几列fixed=left的时候底下的滚动条会失效，直接无法拖动 如何解决？ .el-table .el-table__fixed { height:auto !important; bottom:16px; } 需要注意的是，上面的代码需要放在全局的样式文件中才有效果。 参考文章： https://blog.csdn.net/weixin_40629244/article/details/110506532 今天也是努力搬砖的小花????吖~ 就酱！啾咪????~
elementui表格横向滚动条长显示
最新发布
06-17
### 解决 ElementUI 表格横向滚动条强制显示的设置方法 在 ElementUI 的 `el-table` 组件中，表格的横向滚动条默认仅在内容超出容器宽度时才会显示。如果需要强制显示横向滚动条，可以通过以下方法实现： #### 方法一：通过 CSS 强制设置滚动条 可以为 `.el-table__body-wrapper` 设置 `overflow-x: scroll` 和固定宽度，从而强制显示横向滚动条。 ```css .el-table__body-wrapper { overflow-x: scroll !important; /* 强制显示横向滚动条 */ width: calc(100% + 17px); /* 考虑滚动条的宽度 */ } ``` 这种方法会确保即使内容未超出容器宽度，横向滚动条也会显示[^1]。 #### 方法二：使用 `el-scrollbar` 组件优化滚动条样式 ElementUI 提供了 `el-scrollbar` 组件，可以通过该组件自定义滚动条的样式，并且可以隐藏原生滚动条，从而达到更好的视觉效果。 ```vue <template> <div class="table-container"> <el-scrollbar> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"></el-table-column> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </el-scrollbar> </div> </template> <style> .table-container { width: 100%; height: 300px; overflow: hidden; } .table-container .el-scrollbar { height: 100%; } .table-container .el-scrollbar__wrap { overflow: scroll; } </style> ``` 通过 `el-scrollbar` 组件，可以更灵活地控制滚动条的行为和样式[^3]。 #### 方法三：动态调整表格列宽以避免滚动条 如果希望避免横向滚动条的出现，可以通过 JavaScript 动态调整表格列的宽度，使表格内容适应容器宽度。 ```javascript function adjustTableColumnWidth(tableRef) { const table = tableRef.$el.querySelector('.el-table__body'); const containerWidth = table.offsetWidth; const columns = tableRef.columns; let totalWidth = 0; columns.forEach((column) => { totalWidth += column.width || 0; }); if (totalWidth > containerWidth) { const scale = containerWidth / totalWidth; columns.forEach((column) => { column.width = (column.width || 0) * scale; }); } } // 在 Vue 生命周期中调用 this.$nextTick(() => { adjustTableColumnWidth(this.$refs.table); }); ``` 这种方法适用于需要动态调整表格列宽以适应容器宽度的场景[^4]。 ### 注意事项 - 如果表格内容较多，建议结合虚拟滚动技术优化性能。 - 使用 `el-scrollbar` 时需要注意其内部容器的高度设置，避免因高度不足导致滚动条无法正常工作。 --- ###
评论 7
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

诸葛亮写代码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值