[vue][element-ui][el-table]控制表格的滚动条滑动到最右边

解决表格宽度过长问题
最新推荐文章于 2025-09-24 13:22:42 发布
原创 最新推荐文章于 2025-09-24 13:22:42 发布 · 4.2k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#el-table的横向滚动 #表格横向滚动到最右边 #elTable滚动到最右边

本文介绍了一种解决表格宽度过长导致横向滚动条出现的方法。通过在编辑时利用JavaScript控制表格滚动条的位置，确保其始终处于最右侧，提供更好的用户体验。
场景复现

表格宽度过长产生了横向的滚动条,实行当前页的编辑时会触发表格的数据重新渲染,重新渲染时,会降滚动条拉到最左边,这就就要在列表动态渲染完之后,将滚动条拉回最右边

方法

refs[‘tableList’]上有一个bodyWrapper里面有scrollLeft 属性,可以设置表格左滑动的距离为整个表格的宽度,而表格的宽度在refs[‘tableList’].bodyWidth,替换字符串和变数字以后就可以了

JS部分
this.$nextTick(()=>{
  this.$refs.tableList.bodyWrapper.scrollLeft = Number(this.$refs.tableList.bodyWidth.replace('px',''))
})
element-ui 表格滚动栏 无效 失效 element-table 滚动栏失效 element表格滚动栏失效 解决 element -表格 滚动栏 不见失效 解决 表格滚动栏失效
半只
07-19 7447
滚动栏只有细细的一条线，根本看不见， 这个问题不知道是怎么出现的，有帖子说是因为固定列造成的， 有帖子说是 列文字溢出造成的。插件，因为这个插件套的就是 element-table组件，不需要额外代码，原装使用。可是这些问题我都没有出现，一开始项目是有滚动栏的，不知道从什么时候开始就变没了。不然 当前页面样式无法穿透到 element表格源css。我使用的比较多的就是。
vue3.0 使用Element Plus修改el-table表格的横纵滚动条颜色、宽高等样式
weixin_45652809的博客
10-18 1413
在 Vue 3.0 和 Element Plus 中修改 el-table 的滚动条样式，可能遇到了样式不生效的问题。可以将这些样式添加到你的全局样式文件中，或者直接在组件的 < style > 标签内使用 scoped 属性来局部应用这些样式。/* 横向滚动条的滑块 *//* 纵向滚动条的滑块 *//* 滚动条的轨道部分 *//* 滚动条整体部分 *//* 使滚动条不透明 *//* 滑块的背景颜色 *//* 轨道的背景颜色 *//* 修改滑块宽度 *//* 滑块的圆角 *//* 滑块的阴影 */
vue中出现横向滚动条，默认滑动到最右侧进行内容展示
故里的博客
09-09 6659
1.html <div ref="scrollRef" class="box"> <!-- 由内容撑起滚动条 --> </div> 2.css .box{ width: 100%; overflow-x: scroll; overflow-y: hidden; &::-webkit-scrollbar { display: none; } } 3.js //获取完数据后，执行 let height = t
el-table X轴方向（横向）滚动条默认滑到右边
qq_42174597的博客
07-01 5041
el-table 横向滚动条 默认滑到右边，修改原生属性 无法生效等问题。
Element UI表格固定列：Table固定列滚动方案
gitblog_01192的博客
09-24 608
在企业级Web应用开发中，表格（Table）组件作为数据展示的核心载体，经常面临数据量大、列数繁多的场景。当用户横向滚动表格查看数据时，关键列（如ID、操作按钮）的易读性和可访问性会显著下降。Element UI作为基于Vue.js 2.0的UI组件库，提供了灵活的表格固定列功能，支持左侧固定、右侧固定及多列固定场景。本文将从实现原理、使用指南、性能优化三个维度，深入解析Element UI表格固...
vue监听元素横向滚动到最右侧
weixin_45966674的博客
03-07 1375
界面上监听一个滚动事件 然后用这个事件监听滚动到最右侧。那么 要监听元素滚动到最右侧 然后加载下一页。就这么个导航栏 还有能左右拉动 还要分页。监听滚动到最右侧 参考代码如下。那么 就是监听元素滚动了。这周接了个神奇的需求。
el-table 有x轴滚动条，如何默认固定滚动在右侧
qq_40603125的博客
06-12 629
滚动方法最好设置一个定时器。
修改el-table底部滚动条 添加右边滚动条
苗雪松的博客
02-10 726
<template> <div class="dhc-table"> <el-row> <el-col :span="16"> <div class="table"> <el-scrollbar style="height: 100%"> <el-table :data="tableData" style="width: 100%">
监听element-ui table滚动事件的方法
01-19
做管理平台的项目,用到了element-ui，需要通过监听el-table滚动的位置来获取最新的数据，那么怎么样监听el-table的滚动呢？ 准备 我们默认的技术栈是 vue+element-ui template代码： <el data=logList show-...
若依ruoyi-vue element-ui 横向滚动条 动态横向滚动条
Xiaoweidumpb
05-28 1500
因为每次横向滑动都要到底部，引入插件。
ElementUI中el-table表格的滚动条在合计上边【Element-UI】
Umbrella_Um的博客
07-13 2974
默认滚动条是在下边的,不好看,这里改一下 Element-UI中的样式需要样式穿透修改，使用/deep/即可 /deep/{ .el-table { overflow-x: auto; } .el-table__header-wrapper, .el-table__body-wrapper, .el-table__footer-wrapper { overflow: visible; } .el-table::after { position: relative; }
基于Element-Plus的表格自动滚动hooks
Jimmy的前端博客
09-30 2982
近期在做页面的时候，公司有这么一个需求：要做一个看板，然后这个看板里面有很多列表，列表自动滚动，表格内的内容自动滚动。接到这种需求后，第一时间想的是找对应的插件去完成，最后发现都不能满足，这令我很脑壳疼，最后决定自己做
vue table 监听右滚动条触底事件，无法通过window的addEventListener监听滚动条触底
weixin_53892343的博客
05-30 484
binding.value()//执行在使用时绑定的函数，在这里即loadMorePerson方法。下方监听事件写在 methods 方法的同级下面。
element-ui table表格滚动条拉到最右侧 表头与内容不能对齐
m0_51041905的博客
12-20 3138
1.问题概述 当表格数据太多，会出现纵向滚动条，把滚动条拉到最右侧时，会出现表头与内容不能对齐的现象 2.解决方法 1.当页面数据加载完毕后，在后面加上 this.$nextTick(() => { this.$refs.table.doLayout(); }) doLayout是element提供的方法，它的作用是对Table进行重新布局。 2.别忘了给表格加上ref属性 <el-table ref="table"></el-table> 然后就大
element ui table 定时滚动
江湖行骗老中医
06-09 404
element ui table 定时滚动
vue el-table 固定列后 鼠标滚轮 左右滚动
cmmboy1990的博客
01-18 2893
1.效果： 2.代码： <template> <div class="app-container"> <el-table id="historyTable" :data="tableData" style="width: 100%" border> <el-table-column fixed prop="date" label="组织机构代码" width="150"> </el-table-column>
el-table设置表格高度自适应
热门推荐
weixin_41725862的博客
05-22 2万+
①标签 <el-table ref="table" :data="tableData" :height="tableHeight"></el-table> ②脚本 export default { data(){ return { tableHeight: 50, tableData: [] ...
Vue使用汇总之el-table实现鼠标拖动表格滚动
学习和工作总结，共勉！
02-25 2729
有时候我们需要在Element-UI中实现这样的一个效果，鼠标水平拖动，表格也水平滚动，这样可以隐去滚动条！ 一、元素增加三个事件 <template> <el-table @mousedown.native="mouseDownHandler" @mouseup.native="mouseUpHandler" @mousemove.native="mouseMoveHandler" ref=
vue点击左右按钮实现左右滚动
qq_41438838的博客
06-13 5952
https://blog.youkuaiyun.com/az44yao/article/details/125437069
el-table max-height 监听滚动条滑动到底部
最新发布
11-13
根据用户需求，需要在el-table设置max-height后监听滚动条滑动到底部的事件。结合引用内容，我们可以通过以下步骤实现： 1. 首先，确保el-table设置了max-height属性，这样当表格内容超出最大高度时会出现滚动条。 ...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值