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

最新推荐文章于 2024-05-21 09:09:30 发布
最新推荐文章于 2024-05-21 09:09:30 发布
阅读量3.2k 收藏 9
点赞数 2
分类专栏： 踩坑 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等都没用，然后疯狂百度到的，分享一下

AzeShinja
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
12-30
在开发中，需要表格控件根据浏览器高度进行调整，固定表头，且然后多余的出滚动条，官方给出的： 只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。 然后直接上template代码： ...
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
10-16
总之，通过监听表格的滚动事件、获取可视宽度以及使用适当的CSS样式，我们可以实现Vue中滚动表格的表头与列的对齐，即使列的宽度各不相同。这个解决方案允许我们创建用户友好的滚动表格，提供良好的阅读体验。如果你...
vue项目记录页面滚动条高度，再次返回该页面时自动滚动到当前高度
as965874的博客
04-08 1170
一、离开当前页面之前保存滚动条高度 我的项目页面切换用到了elementUI的tabs组件,所以每次页面切换前都会调用beforeLeaveTab方法，故在该方法中保存离开页面时滚动条的高度。 beforeLeaveTab(tab, event) { //参数tab是要进入的页面的唯一值，event是要离开的页面的唯一值。 let _this = this // 存滚动条位置 if (_this.$el.querySelector('.tableQh'
Element el-table 列表自动滚动
ALDNOAH_K的博客
12-20 2410
Element el-table 列表自动滚动
vue elment-ui table组件滚动条位置 和vxe-table 的table组件滚动条位置_this(2)
2401_84619287的博客
05-16 996
现阶段较热门是React、Vue两大框架，两者工作原理上存在共通点，也存在一些不同点，对于校招来说，不需要两个框架都学得特别熟，一般面试官会针对你简历中写的框架进行提问。排序算法根据考频高低主要有：快速排序、归并排序、堆排序、冒泡排序、插入排序、选择排序、希尔排序、桶排序、基数排序、Timsort这十种，这类考核点要么是算法的时间、空间复杂度、稳定度，要么是直接手写代码，故在理解算法原理的同时，对JS语言版的排序算法代码也要加强记忆。4，3，5】第二大的数字是 4，出现两次，所以返回 2。
vue3 el-table 滚动
最新发布
qq_46342447的博客
05-21 269
获取 el-table dom元素。
监听element-ui中table滚动条的滚动事件
weixin_46106673的博客
07-05 2803
当前端一次性获取大量数据时或者elementui的table组件加载大量数据时会造成页面卡顿，所以需要分批加载数据。通过监听table组件滚动条的滚动事件，分批加载数据，减轻页面渲染压力。
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...
el-table锚点定位
Yeoloh的博客
06-05 530
el-table添加锚点滚动到指定位置
Vue通过el-table实现类windows上下选择文件滚动条跟踪以及手动滚动条移动后定位
AzeShinja的博客
09-30 736
首先清楚windows文件管理的逻辑 按 ↓ 键选择文件，如果文件已经离开窗口那么滚动条向下准确滚动 按 ↑ 键选择文件则滚动条准确向上滚动 当然以上的条件是文件在可视窗口内移动 如果用户操作滚动条使文件脱离可视窗口内，则重新定位， 重新定位有两个规则： { a. 如果文件在可视窗口上方，则定位过去后文件在可视窗口的一个元素 b. 如果文件在可视窗口的下方， 则定位过去后文件在可视窗口为最后一个元素 } HTML: 首选注册ref对于el-table <el-table
获取element-ui table表格的文档流,计算里面的滚动条高度
weixin_43869524的博客
09-07 2831
//表格记得加 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 2225
【代码】Vue 获取表格信息。
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使用keep-alive保持滚动条位置的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue elementUI table表格数据 滚动懒加载的实现方法
10-17
这需要计算 `scrollHeight`（总高度）、`scrollTop`（滚动距离）和 `clientHeight`（可视区域高度）。当 `scrollHeight - scrollTop - clientHeight 时，表示用户已经滚动到底部。 5. **分页逻辑**： 虽然前端进行...
vue+el-table 前端获取所有数据，手动实现分页+筛选
weixin_45279761的博客
07-02 7110
el-table做表格大家都很熟悉了，记下两个操作，怕忘记。 1.假如数据量–不多的话–，数据量太多会卡死。 <el-table ref="classReport" :data="tableListData" min-height="500" border @sort-change="sort_change"//筛选方法 v-loading="loading2"
Vue element 表格刷新页面记录当前滚动条位置，并跳转到滚动条位置
前端打工人的博客
08-05 4912
需求：当表格有很多条数据，页面有滚动条，需求是当需要刷新组件时导致页面刷新，或者是跳转页面编辑完回来后，需要跳转到当前表格滚动条的位置。方法前记得加个判断，是否有滚动高度，防止报错。1.首先在el-table 绑定。2.添加监听滚动方法。...
vue中实时获取滚动条距上高度
document_write的博客
07-19 3490
export default { name: 'App', data(){ return { scroll:'' } }, mounted(){ window.addEventListener('scroll', this.scrollTop) }, methods:{ scrollTop(){ this.scroll...
动态计算el-table高度
树上骑个猴的博客
12-22 3967
如果你要求页面内容只能在一屏内显示，不想出现页面竖直滚动条，且页面使用el-table，那么就需要el-table动态计算高度 <el-table v-loading="loading" :data="tableData" :height="tableHeight" ref="table" highlight-current-row > <el-table-column ty
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、付费专栏及课程。

余额充值