利用 bodyWrapper 实现表格自动滚动

最新推荐文章于 2024-05-22 18:40:48 发布
最新推荐文章于 2024-05-22 18:40:48 发布
阅读量4.6k 收藏 16
点赞数 4
分类专栏： Element UI Vue 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52054631/article/details/120744652
版权 
<el-table ref="myTable">
	......
</el-table>

Vue2获取element表格的bodyWrapper

this.$refs.myTable.bodyWrapper

Vue3获取element表格的bodyWrapper

const myTable = ref(null)

onMounted(() => {
   
	const tableBody = myTable.value
最低0.47元/天 解锁文章
潘小盒
关注
  • 4
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
监听element-ui table滚动事件的方法
10-17
当使用Element-UI的`el-table`组件时，监听滚动事件可以帮助我们实现无限滚动加载，即用户滚动到表格底部时自动加载下一页数据。 ### 方法 1. **设置表格基础结构** 首先，我们需要创建一个包含`el-table`的Vue模板...
el-table 中获取 bodyWrapper 的方法
hongtoushan的博客
11-03 6986
以前获取 bodyWrapper 方法是： this.$refs.myTable.bodyWrapper 现在这种方法获取不到了，要改为： this.$refs.myTable.$elTable.bodyWrapper 或者 this.$refs.myTable.$refs.table.bodyWrapper
vue中实现自动滚动表格
weixin_43959153的博客
07-07 9204
需要配合vue-seamless-scroll插件 vue-seamless-scroll官方说明文档：https://github.com/chenxuan0000/vue-seamless-scroll/blob/master/document/README.md vue-seamless-scroll在线demo：https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-default 介意看到
修改table/el-table滚动条
最新发布
m0_62782752的博客
05-22 234
修改el-table 默认滚动条。修改table 默认滚动条。
ElementUI表格table使用JS控制滚动
苏一恒
08-11 1774
ElementUI表格table使用JS控制滚动 需求 通过js来控制表格的某一行出现在可视区域中 分析和实现 在ElementUI中，并支持表格table组件的滚动，我这里通过js控制table的scrollTop来实现需求 框架封装好了的组件el-table，然而我们并不能直接获取到table，我通过一步步定位到table在el-table的位置，这里就不再阐述定位过程，直接上结果： <el-table :data="tableData" :highlight-current
element ui plus 找不到bodyWrapper实现两个表格同步滚动的方法。
weixin_45266081的博客
12-12 1018
element ui plus 找不到bodyWrapper实现两个表格同步滚动的方法。
vue-element-admin el-table滚动条移到合计的下方
节节竹的博客
06-15 2171
vue-element-admin 里面要是有合计的情况下，滚动条是在合计的上方，我们的需求是改到合计的下方
ElementUi 表格的滚动条获取
cvvvvvvvvvv的博客
02-18 1972
在el-table身上有个bodyWrapper属性，我们可以通过这个属性拿到真实DOM从而来操作滚动条 代码： <el-table ref="chatListRef">...</el-table> // 滚动条滚动到底部 this.$refs.chatListRef.bodyWrapper.scrollTop = this.$refs.chatListRef.bodyWrapper.scrollHeight ...
aci_BodyWrapper.zip_数学计算_Python_
08-11
在有限元方法中，复杂的物理问题被分解成许多小的、简单的元素，每个元素都可以用简单的数学函数描述，从而实现数值求解。 在Python编程环境中，进行数学计算非常常见，因为Python提供了强大的数学库，如NumPy、...
vue3 如何实现 表格内容无缝滚动，我又写了一堆冗余代码
洋茄子炒鸡蛋的博客
03-24 9386
近期在开发可视化大屏项目，除去各种echarts图表和地图展示之外还有多个表格。现在来了一个需求，需要将大屏中的所有表格设置为内容无缝滚动。本着程序员的七宗罪原则第一时间推脱了一下，但没推脱成功。
解决elemen-ui Table表格动态计算高度的bug----el-table__body-wrapper
热门推荐
能先森的博客
12-31 1万+
相信大家在使用element-ui–Table表格组件时，都遇到过需要监听屏幕窗口的大小，动态计算table的height，达到适配屏幕尺寸的友好界面项目。网上有各种各样的办法，同样可以实现动态计算table表格的高度；但是大家有没有发现切换路由到其他界面再返回到当前界面，table的表格高度少了24px（我自己测试是24px,可能会更高）。其实，这是element-ui内部的一个bug；接下来给...
Vue3监听ElementUI的table的滚动事件
weixin_53035812的博客
03-02 2527
onMounted(() => { console.log( priceTable.value.layout.table, "priceTable.value.bodyWrapper" ); let table = priceTable.value.layout.table.refs.bodyWrapper; table.addEventListener( "scroll", () =&g.
vue el-table 滚动条样式设置(谷歌、火狐)
u013992330的博客
03-01 4938
对于el-table滚动条的样式，webkit（谷歌为代表）和 moz（火狐）的设置是不同的，因此需要分别进行设置。 webkit（谷歌） // 滚动条大小设置 ::v-deep .el-table__body-wrapper::-webkit-scrollbar { /*纵向滚动条*/ width: 5px; /*横向滚动条*/ height: 5px; } // 滚动条滑块样式设置 ::v-deep .el-table__body-wrapper::-webkit-scrollb
【Vue】表格可拖拽滚动
weixin_43790653的博客
12-06 2121
Vue3使用Element-plus时如何实现表格可拖拽滚动
前端-表头固定，内容滚动
面朝大海，春暖花开
06-12 2548
原理： 利用两个table，一个div包装一个table表头，一个div包装一个table的body #div-table-wrapper { width: 500px; margin-top: 50px; margin-left: 200px; margin-bottom: 100px; }
vue3应用elementPlus table并滚动显示
左直拳的马桶_日用桶
10-28 4034
使用element plus的table，然后获取里面的dom对象，使用定时器设置滚动
vue elment-ui table组件滚动条位置 和vxe-table 的table组件滚动条位置
IT博客技术分享
11-25 7491
1. 先说elment-ui table组件滚动条位置 element ui table 添加数据行后滚动条滚动到对应的行头或行尾问题 滚动到第一行： this.$refs.table.bodyWrapper.scrollTop =0; 滚动到最后一行： this.$refs.table.bodyWrapper.scrollTop =this.$refs.table.bodyWrapper.scrollHeight; 改成： this.$nextTick(() => { let scr
elementUI el-table 默认滚动条在表格的最底部
grootbaby
11-07 3284
elementUI 框架，获取不到表格里面的某个元素的 id，但是 el-table 里有个 bodyWrapper 它指向的是 el-table 的表格内容部分，存在 scrollTop，scrollHeight 属性，所以可以用下面方法来实现滚动条在底部的效果。（备注： 需给对应的el-table 设置ref 属性，，本案例中ref 设置为editTable）另外，如果要在不同屏幕下表格高度需要适应屏幕的话，需要用到 window.onresize 函数。
el-table监听表格滚动
03-25
A：可以通过监听 `scroll` 事件来实现 el-table 表格的滚动监听。具体实现如下： ```html <template> <el-table ref="table" :data="tableData" height="400" style="width: 100%" @scroll="handleTableScroll" > <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> </template> <script> export default { data() { return { tableData: [ { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' } ] } }, methods: { handleTableScroll(event) { // 获取 el-table 的 body 元素 const bodyWrapper = this.$refs.table.$refs.bodyWrapper // 判断滚动到底部 if (bodyWrapper.scrollTop + bodyWrapper.clientHeight >= bodyWrapper.scrollHeight) { console.log('滚动到底部了') } } } } </script> ``` 在上面的代码中，我们通过 `@scroll="handleTableScroll"` 监听了 el-table 的滚动事件，并在 `handleTableScroll` 中进行了滚动到底部的判断。具体实现中，我们获取 el-table 的 `body` 元素，然后通过比较 `scrollTop` 和 `scrollHeight` 来判断是否滚动到底部。如果触发了滚动到底部的条件，那么就可以执行对应的逻辑。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值