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

最新推荐文章于 2025-04-24 15:04:34 发布
最新推荐文章于 2025-04-24 15:04:34 发布
阅读量4k 收藏 4
点赞数 1
文章标签： el-table的横向滚动 表格横向滚动到最右边 elTable滚动到最右边
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/webfullstack/article/details/114625272
版权
场景复现

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

方法

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

JS部分
this.$nextTick(()=>{
  this.$refs.tableList.bodyWrapper.scrollLeft = Number(this.$refs.tableList.bodyWidth.replace('px',''))
})
vue element-ui表格的滚动条样式修改
weixin_43829905的博客
12-30 7668
vue element-ui表格的滚动条样式修改 默认element-ui table固定表头或列时，当表列过多出现滚动时，滚动条效果如下，效果不是很好看（个人感觉） 修改前效果： 修改后效果： 满意度加加 直接加全局代码样式修改就可以了 /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 6px; /*滚动条宽度*/ height: 8px; /*滚动条高度*/ background-color: white;
【记录52】el-table-column 添加fixed属性 滚动条无法滑动
~牧马~
01-15 789
使用element UI组件，用到el-table的el-table-column的fixed属性时，当滚动条长度小于固定列时，滚动条无法通过鼠标去点击滑动操作。
vue中出现横向滚动条，默认滑动到最右侧进行内容展示
故里的博客
09-09 6508
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 4868
el-table 横向滚动条 默认滑到右边，修改原生属性 无法生效等问题。
vue3，element ui框架中为el-table表格实现自动滚动,并实现表头汇总数据
最新发布
一个努力搬砖的前端开发
04-24 1016
vue3，element ui框架中表格实现自动滚动,并实现表头汇总数据
vue监听元素横向滚动到最右侧
weixin_45966674的博客
03-07 1299
界面上监听一个滚动事件 然后用这个事件监听滚动到最右侧。那么 要监听元素滚动到最右侧 然后加载下一页。就这么个导航栏 还有能左右拉动 还要分页。监听滚动到最右侧 参考代码如下。那么 就是监听元素滚动了。这周接了个神奇的需求。
el-table 有x轴滚动条，如何默认固定滚动在右侧
qq_40603125的博客
06-12 583
滚动方法最好设置一个定时器。
修改el-table底部滚动条 添加右边滚动条
苗雪松的博客
02-10 701
<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-...
表格滚动分页加载——使用element-plus的无限滚动v-infinite-scroll与el-table同时使用出现滚动条定位到底部导致一直请求接口
qq_45840993的博客
09-26 9145
不知道UI抽什么风，所有列表都没用分页器，一律采用滚动加载。但我又是个懒蛋，不想手写所以就用了element-plus的无限滚动，但是v-infinite-scroll和el-table这俩搁一块就有bug了啊！！！在网上找了半天没遇到相似问题，现在来记录一下。本次开发中其实可以不用el-table的，因为这个列表并不展示头部，但是我又极其热爱el-table，所以不顾老大劝阻还是用了。好了好了，问题就是——。
vue+elementUI el-row和el-col 自动滚动table表格组件封装—基础版
彤先森的博客
01-17 986
vue 自动滚动table表格组件封装—基础版
基于Element-Plus的表格自动滚动hooks
Jimmy的前端博客
09-30 2898
近期在做页面的时候，公司有这么一个需求：要做一个看板，然后这个看板里面有很多列表，列表自动滚动，表格内的内容自动滚动。接到这种需求后，第一时间想的是找对应的插件去完成，最后发现都不能满足，这令我很脑壳疼，最后决定自己做
vue table 监听右滚动条触底事件，无法通过window的addEventListener监听滚动条触底
weixin_53892343的博客
05-30 465
binding.value()//执行在使用时绑定的函数，在这里即loadMorePerson方法。下方监听事件写在 methods 方法的同级下面。
element-ui table表格滚动条拉到最右侧 表头与内容不能对齐
m0_51041905的博客
12-20 3086
1.问题概述 当表格数据太多，会出现纵向滚动条，把滚动条拉到最右侧时，会出现表头与内容不能对齐的现象 2.解决方法 1.当页面数据加载完毕后，在后面加上 this.$nextTick(() => { this.$refs.table.doLayout(); }) doLayout是element提供的方法，它的作用是对Table进行重新布局。 2.别忘了给表格加上ref属性 <el-table ref="table"></el-table> 然后就大
vue el-table 固定列后 鼠标滚轮 左右滚动
cmmboy1990的博客
01-18 2828
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 2630
有时候我们需要在Element-UI中实现这样的一个效果，鼠标水平拖动，表格也水平滚动，这样可以隐去滚动条！ 一、元素增加三个事件 <template> <el-table @mousedown.native="mouseDownHandler" @mouseup.native="mouseUpHandler" @mousemove.native="mouseMoveHandler" ref=
vue点击左右按钮实现左右滚动
qq_41438838的博客
06-13 5881
https://blog.youkuaiyun.com/az44yao/article/details/125437069
element问题总结之el-table使用fixed固定列后滚动条滑动到底部或者最右侧的时候错位问题
m0_50207524的博客
04-08 3994
在使用el-table固定行的时候移动滚动条会发现移动到底部或者移动到最右侧的时候会出现表头和内容错位或者是固定列的内容错位的情况。
el-table表滚动条无法选中左右滑动
01-17
### 解决 Element UI `el-table` 表格滚动条左右滑动无法选中的问题 对于Element UI的`el-table`组件，在处理表格内部内容时，可能会遇到滚动条左右滑动影响单元格选中的情况。这通常是因为浏览器默认行为会将鼠标滚轮事件优先用于页面整体滚动而非特定区域内的交互。 为了确保在水平滚动时不干扰用户的点击或拖拽操作，可以采取以下几种优化措施： #### 方法一：调整CSS样式防止冒泡 通过自定义`.el-table__body-wrapper`类下的伪元素样式，阻止其捕获鼠标的移动事件，从而不影响到实际的数据行的选择功能[^2]。 ```css .el-table__body-wrapper { /* 防止触发父级容器的滚动 */ pointer-events: none; } /* 仅允许子节点响应指针事件 */ .el-table__row { pointer-events: auto; } ``` #### 方法二：利用JavaScript控制焦点状态 如果上述纯前端解决方案未能完全解决问题，则可以在Vue实例内编写逻辑代码来管理输入设备的状态变化。例如监听窗口级别的mousedown和mouseup事件，并在此期间临时禁用表体外层包裹器(`.el-table__body-wrapper`)上的任何可能引起冲突的行为[^5]。 ```javascript // 组件挂载完成后执行 mounted() { window.addEventListener('mousedown', this.handleMouseDown); window.addEventListener('mouseup', this.handleMouseUp); }, methods:{ handleMouseDown(event){ const tableBodyWrapper = document.querySelector('.el-table__body-wrapper'); if (!event.target.closest('.el-table')) { // 如果点击发生在表格外部则不作处理 return; } // 记录当前是否有按住左键按下动作发生 this.isLeftButtonDown = true; // 设置标志位以指示是否应该忽略接下来的一次mousemove事件 setTimeout(() => {this.ignoreNextMouseMove=false},0); // 禁用其他不必要的滚动机制直到松开按钮为止 tableBodyWrapper.style.userSelect='none'; tableBodyWrapper.style.pointerEvents='none'; }, handleMouseUp(){ this.isLeftButtonDown = false; const tableBodyWrapper = document.querySelector('.el-table__body-wrapper'); // 恢复正常的用户选择与交互能力 tableBodyWrapper.style.removeProperty('user-select'); tableBodyWrapper.style.removeProperty('pointer-events'); // 清除计时器变量以防内存泄漏 clearTimeout(this.mouseDownTimerId); } } ``` 以上两种方式都可以有效改善用户体验，使得即使存在较大的数据集导致需要水平滚动查看全部字段的情况下，仍然能够顺利地完成多行记录的选择操作。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值