Vue获取el-table的滚动条高度以及定位

最新推荐文章于 2024-10-06 22:32:10 发布
最新推荐文章于 2024-10-06 22:32:10 发布
阅读量3.4k 收藏 11
点赞数 3
分类专栏： 踩坑 Vue 文章标签： vue.js javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AzeShinja/article/details/119945146
版权

Vue.js 表格滚动 bodyWrapper 定位 前端开发
关键词由CSDN通过智能技术生成
Vue 同时被 2 个专栏收录
55 篇文章 3 订阅
订阅专栏
踩坑
30 篇文章 0 订阅
订阅专栏

直接上代码

 <el-table
          ref="multipleTable"
          :data="tableData"

this.$refs.multipleTable.bodyWrapper.scrollTop = positionHeight;

这里需要使用bodyWrapper，博主之前试了$el等都没用，然后疯狂百度到的，分享一下

element的el-table中记录滚动条位置的示例代码
10-16
主要介绍了element的el-table中记录滚动条位置的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
10-17
在使用VUE2.0结合ElementUI2.0框架开发过程中，经常会遇到需要让表格控件自适应浏览器窗口高度的需求，同时保持表头固定，并在内容超出时显示滚动条。ElementUI为el-table元素提供了直接设置高度（height）属性的...
vue3 el-table 滚动
qq_46342447的博客
05-21 457
获取 el-table dom元素。
vue实战指南 eltable表格表头自定义高度
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
10-06 1286
基本概念与作用说明el-table组件的作用表头自定义高度的意义示例一：通过CSS样式自定义表头高度示例二：通过scoped样式自定义表头高度示例三：通过行高属性自定义表头高度示例四：通过插槽自定义表头内容示例五：动态调整表头高度实际工作中使用的技巧响应式设计动画效果多语言支持性能优化在Vue项目中，el-table组件是Element UI库提供的一个强大的表格组件，广泛用于展示和操作数据。然而，默认情况下，el-table的表头高度是固定的，有时候我们需要根据实际需求自定义表头的高度。
element框架＜el-table＞＜/el-table＞表格滚动条固定位置
nibabaoo的博客
02-01 2080
classList?el?},})/* table自定义指令样式 */
el-tab 滚动条滚动到指定位置
当然是最帅气的茶茶丸了！哇耶~
11-16 643
【代码】el-tab 滚动条滚动到指定位置。
Node-express项目--个人简历：login(登录)接口编写记录
2401_84437604的博客
04-28 705
/ 判断用户是否存在if (!user) {return res.status(400).json({ eamil: “用户不存在” })} else {// 判断密码是否正确res.status(200).json({ msg: “登录成功” })} else {return res.status(400).json({ password: “密码错误” })});})})测试：创建验证：在validation文件夹下新建login.js文件，用于验证登录。
vue项目记录页面滚动条高度，再次返回该页面时自动滚动到当前高度
as965874的博客
04-08 1221
一、离开当前页面之前保存滚动条高度 我的项目页面切换用到了elementUI的tabs组件,所以每次页面切换前都会调用beforeLeaveTab方法，故在该方法中保存离开页面时滚动条的高度。 beforeLeaveTab(tab, event) { //参数tab是要进入的页面的唯一值，event是要离开的页面的唯一值。 let _this = this // 存滚动条位置 if (_this.$el.querySelector('.tableQh'
vue方法中获取el-table的下标和序号
热门推荐
qq_42672401的博客
12-05 1万+
<el-table :data="userDatas" border style="width: 90%"> <el-table-column type="index" label="序号" width="100" align="center"></el-table-column> <el-table-column prop="us...
vue修改Element的el-table样式的4种方法
10-14
在Vue.js中，Element UI库提供了丰富的组件，其中包括el-table，用于创建数据表格。然而，有时我们可能需要根据项目需求自定义el-table的样式。本文将详细介绍四种在Vue中修改Element UI el-table样式的有效方法。 ...
vue使用keep-alive保持滚动条位置的实现方法
10-17
在开发使用Vue框架的应用时，我们常常需要在用户在页面间切换时保持滚动条的位置，以改善用户体验。然而，当我们使用Vue内置的<keep-alive>组件来缓存组件状态时，会发现滚动条位置并没有被自动保存。为了解决这个...
el-table锚点定位
Yeoloh的博客
06-05 592
el-table添加锚点滚动到指定位置
Vue通过el-table实现类windows上下选择文件滚动条跟踪以及手动滚动条移动后定位
AzeShinja的博客
09-30 787
首先清楚windows文件管理的逻辑 按 ↓ 键选择文件，如果文件已经离开窗口那么滚动条向下准确滚动 按 ↑ 键选择文件则滚动条准确向上滚动 当然以上的条件是文件在可视窗口内移动 如果用户操作滚动条使文件脱离可视窗口内，则重新定位， 重新定位有两个规则： { a. 如果文件在可视窗口上方，则定位过去后文件在可视窗口的一个元素 b. 如果文件在可视窗口的下方， 则定位过去后文件在可视窗口为最后一个元素 } HTML: 首选注册ref对于el-table <el-table
获取element-ui table表格的文档流,计算里面的滚动条高度
weixin_43869524的博客
09-07 2914
//表格记得加 ref 为什么用ref 是因为这个框架做过封装，当前element版本 2.8 <el-table id="lyx_tabe" class="xk-table" :data="tableData" row-key="id" :expand-row-keys="expandKey...
Vue 获取表格信息
weixin_52272515的博客
06-08 2341
【代码】Vue 获取表格信息。
vue+el-table 前端获取所有数据，手动实现分页+筛选
weixin_45279761的博客
07-02 7259
el-table做表格大家都很熟悉了，记下两个操作，怕忘记。 1.假如数据量–不多的话–，数据量太多会卡死。 <el-table ref="classReport" :data="tableListData" min-height="500" border @sort-change="sort_change"//筛选方法 v-loading="loading2"
Vue element 表格刷新页面记录当前滚动条位置，并跳转到滚动条位置
前端打工人的博客
08-05 5044
需求：当表格有很多条数据，页面有滚动条，需求是当需要刷新组件时导致页面刷新，或者是跳转页面编辑完回来后，需要跳转到当前表格滚动条的位置。方法前记得加个判断，是否有滚动高度，防止报错。1.首先在el-table 绑定。2.添加监听滚动方法。...
Vue3 el-table 动态高度（element-plus）
Li_Ning21的博客
04-27 1088
通过vue2的动态高度实现思路，实现vue3+el-table的动态高度实现
vue中实时获取滚动条距上高度
document_write的博客
07-19 3553
export default { name: 'App', data(){ return { scroll:'' } }, mounted(){ window.addEventListener('scroll', this.scrollTop) }, methods:{ scrollTop(){ this.scroll...
vue监听el-table滚动条事件不起作用
09-10
在Vue中，我们可以使用`v-directive`指令来监听HTML元素的滚动事件。但是，由于`el-table`是由Element UI库提供的一个组件，它对于滚动条事件的处理方式与普通的HTML元素有所不同，所以我们不能直接使用`v-directive`来监听滚动条事件。 如果我们想要监听`el-table`的滚动条事件，可以使用Element UI提供的一个API——`"scroll"`，并将其绑定到`el-table`组件上。例如，我们可以在`mounted`生命周期钩子中使用`this.$refs.table.$refs.bodyWrapper.addEventListener('scroll', this.handleScroll)`来监听`el-table`的滚动条事件。这里的`handleScroll`是一个自定义的方法，用于处理滚动条事件。 在`handleScroll`方法中，我们可以获取到滚动条的位置，然后根据需要执行相应的操作。例如，我们可以根据滚动条的位置来动态加载更多的数据，或者显示/隐藏一些特定的元素。 需要注意的是，为了能够正确地监听到`el-table`的滚动条事件，我们需要使用`$refs`来获取到`el-table`的DOM元素，因为它是在组件渲染后才会被渲染出来的。同时，由于`scroll`事件可能会频繁触发，我们可能需要在组件销毁时使用`removeEventListener`来取消对滚动条事件的监听，以避免可能的内存泄漏。 总之，通过使用Element UI提供的API，我们可以很容易地监听`el-table`的滚动条事件，并对其进行相应的处理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值