ElementUi 表格的滚动条获取

最新推荐文章于 2024-05-16 10:07:37 发布
最新推荐文章于 2024-05-16 10:07:37 发布
阅读量1.8k 收藏 1
点赞数 1
文章标签： elementui vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cvvvvvvvvvv/article/details/123008020
版权

在el-table身上有个bodyWrapper属性，我们可以通过这个属性拿到真实DOM从而来操作滚动条
在这里插入图片描述

在这里插入图片描述
代码：

  <el-table ref="chatListRef">...</el-table>

   // 滚动条滚动到底部
          this.$refs.chatListRef.bodyWrapper.scrollTop = this.$refs.chatListRef.bodyWrapper.scrollHeight
小脚裤了都
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
利用 bodyWrapper 实现表格自动滚动
weixin_52054631的博客
10-13 4505
<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.$refs.bodyWrapper }) return
jsp中为表格添加水平滚动条的方法
10-21
下面小编就为大家带来一篇jsp中为表格添加水平滚动条的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
12-10
做页面的时候可能会用到位置固定的层，读取 document.body.scrollTop 来设置层的位置，像这样：­ [removed] = function (){ var oFix = document.getElementById(“divfix”); oFix.style.top = document.body.scrollTop + “px”; } 可是怎么没有达到预期效果呢，输出 document.body.scrollTop 的值一看，一直都是 0。原来是 DTD 的问题,要是页面直接用 开头的话就没有问题了。但是要符合 web 标准，DTD 当然是不能少的。具有 D
jQuery头部固定表格滚动条代码
06-24
jQuery头部固定表格滚动条代码是一款通过鼠标控制表格列表数据滚动效果代码。
Vue2.0+ElementUI实现表格翻页的实例
08-29
下面小编就为大家带来一篇Vue2.0+ElementUI实现表格翻页的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue elementUI table表格数据 滚动懒加载的实现方法
01-19
在项目中遇到了一个性能问题 vue+elementUI table表格展示数据，当数据很多的时候，不能一页显示完，同时一次请求数据量太大，会增加网页渲染的时间，影响体验， 这个时候常常有两种方法处理， 1、分页，如下   2、如果我不想分页，又想在一页显示全部数据呢？这个时候其实就可以用数据懒加载了 如下一开始表格只显示31行数据 当将滚动条拉到低的时候，就会再加载31条数据，如果剩下的数据不足31，那就加载剩下的   根据项目需求，这需要一页可以看到全部数据，所以我选择了第二中方式 那么第二种方式要怎么去实现呢？ 在了解它的原理前，你需要分清楚三个属性： scrollHeight：指元素
[element-ui] el-table 行内新增，滚动条自动滚到最顶部，或者最底部
qq_14993591的博客
11-23 2722
【代码】[element-ui] el-table 行内新增，滚动条自动滚到最顶部，或者最底部。
vue elment-ui table组件滚动条位置 和vxe-table 的table组件滚动条位置
IT博客技术分享
11-25 7374
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表格table使用JS控制滚动
苏一恒
08-11 1726
ElementUI表格table使用JS控制滚动 需求 通过js来控制表格的某一行出现在可视区域中 分析和实现 在ElementUI中，并支持表格table组件的滚动，我这里通过js控制table的scrollTop来实现需求 框架封装好了的组件el-table，然而我们并不能直接获取到table，我通过一步步定位到table在el-table的位置，这里就不再阐述定位过程，直接上结果： <el-table :data="tableData" :highlight-current
表格操作之el-table行内新增自动滚到最顶部或者最底部
weixin_44482361的博客
10-23 4496
el-table新增一条行内数据 <el-button type=“text” @click=“addBtn”>新增 ##(一定要在table里面加 ref=“xxxxxxxx”) // 新增按钮 addBtn() { let rowObj = { id: null, topDepth: ‘’, bottomDepth: ‘’, thickness: ‘’, interpConclusionName: ‘’, remark: ‘’, } this.tableData.push(rowObj)
elementUI el-table 默认滚动条在表格的最底部
grootbaby
11-07 3157
elementUI 框架，获取不到表格里面的某个元素的 id，但是 el-table 里有个 bodyWrapper 它指向的是 el-table 的表格内容部分，存在 scrollTop，scrollHeight 属性，所以可以用下面方法来实现滚动条在底部的效果。（备注： 需给对应的el-table 设置ref 属性，，本案例中ref 设置为editTable）另外，如果要在不同屏幕下表格高度需要适应屏幕的话，需要用到 window.onresize 函数。
jquery给表格加滚动条
03-23
jquery给表格加滚动条的一个示例，用于普通table
前端滚动条滚动到指定位置
weixin_47030180的博客
05-09 7712
滚动条滚动到指定位置
umy-ui表格如何获取滚动条高度
chenglaugh1989的博客
07-06 781
umy-ui中的u-table获取表格滚动条的高度
ElementUI中el-table表格的滚动条在合计上边
m0_37825704的博客
01-18 1690
位置 注：不要加scope 代码： <style> .el-table { overflow-x: auto; } .el-table__header-wrapper, .el-table__body-wrapper, .el-table__footer-wrapper { overflow: visible; } .el-table::after { position: relative; } .el-table--scrollab...
umy-ui —— table检索字段自动滚到指定位置并高亮
记录美好生活
11-22 1713
通过input输入框，输入要查找的数据字段，点击确定可以定位到查找的那行数据、并把改行显示高亮
vue elementui中使表的滚动条 滚到顶部或底部
u012970538的博客
09-14 2054
1.设置table的ref为tableList。
element plus table 滚动监听 触底
weixin_45042868的博客
06-21 3191
参考了网上的其他的element ui 的滚动触底的方法，但是无法获取bodyWrapper的scrollTop,这里我就直接去找了那个提供实际滚动的容器.el-scrollbar__wrap了。
el-table滚动条设置及设置滚动条后多出空白列修改
最新发布
JunJiu0420的博客
05-16 131
空白列修改：给el-table-column设置适当的宽度，直到空白列消失。
elementui表格隐藏滚动条
09-14
要在 ElementUI 表格中隐藏滚动条，你可以使用以下方法之一： 1. 使用 CSS 样式： 在样式文件中为表格容器添加 `overflow: hidden;` 的样式，这将隐藏任何溢出的内容和滚动条。例如： ```css .el-table__body-wrapper { overflow: hidden; } ``` 2. 使用 ElementUI 的 `show-scrollbar` 属性： 在 `el-table` 组件上设置 `show-scrollbar` 属性为 `false`，这将禁用滚动条的显示。例如： ```html <el-table :data="tableData" show-scrollbar="false"> <!-- 表格内容 --> </el-table> ``` 请注意，这两种方法都会隐藏滚动条，但第一种方法可能会导致内容被裁剪。如果你的表格有大量的数据且需要滚动来查看全部内容，建议使用第二种方法。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值