umy-ui表格如何获取滚动条高度

最新推荐文章于 2023-12-11 14:55:52 发布
最新推荐文章于 2023-12-11 14:55:52 发布
阅读量804 收藏 2
点赞数
文章标签： ui vue.js elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenglaugh1989/article/details/125636652
版权

el-table可以根据以下方式获取表格滚动条高度，

this.$refs.brandListTableRef.bodyWrapper.scrollTop

umy-ui中的u-table是对el-table的优化，解决大数据表格卡顿的问题，但利用上面的方法，却无法获取表格滚动条的高度了。提示的错误为：TypeError: Cannot read property ‘scrollTop’ of undefined
解决办法是在代码中添加“.$refs.singleTable”：

this.$refs.brandListTableRef.$refs.singleTable.scrollTop

总结：
umy-ui某些方法的实现不同于el-table，需要添加.$refs.singleTable才能正常运行，大家可以尝试一下。

chenglaugh1989
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
umy-ui封装，支持虚拟加载
11-10
4. **配置虚拟滚动**：在`<u-ux-table>`组件上设置`virtual-scroll`属性为`true`，并根据需要配置其他虚拟滚动相关的参数，如每屏显示行数。 5. **数据分页和懒加载**：为了配合虚拟加载，通常需要对后端接口进行...
umy-ui:umy-ui，一套为开发者准备的基于Vue 2.0的桌面端组件库，完美解决表格万级数据渲染卡顿，编辑表格卡顿问题
03-18
umy-ui一套为开发者准备的基于Vue 2.0的桌面端组件库，完美解决表格万级数据渲染卡顿，编辑表格卡顿问题回答下那些看见umy-ui的React哈，首先不要去看UI两字，我们是想后续做更多组件。所以搞成UI库。你完全可以按需...
获取滚动条高度 和 获取元素到浏览器顶部的距离
weixin_48854245的博客
10-26 323
获取滚动条高度 <template> <div> <div ref="pronbit">CT</div> </div> </template> <script> export default{ data(){ return{ //获取滚动条高度 scrollTop: '', //获取xx到顶部高度 topHeight:'' } }, created(){ //获取滚动条高度 abcde () {
ElementU表格组件Table高度自适应
许少年的读书笔记
10-01 985
如果你在构建管理后台，菜单栏横向摆放到整个View的顶部，下方是搜索框一些组件，然后最下面是表格来呈现数据，那么，当缩放浏览器窗口的时候，需要实现表格组件Table的高度自适应。 你可以通过如下方法实现： setTimeout(() => { this.customTableHeight = window.innerHeight - this.$refs.table.$el.of...
umy-ui uTable 树形结构实现搜索，并滚动到指定位置
weixin_43922504的博客
12-05 647
umy-ui uTable 树形结构实现搜索，并滚动到指定位置
Ext.ux.touch.grid 修改 行的高度
老邢的IT译站
10-12 171
Ext.ux.touch.grid是一个Sencha Touch 表格组件的插件，使用起来比较简单，但是使用过程中发现，即使表格内部的元素所占用的高度很小，表格的高度依然保持47个像素，于是尝试修改CSS，但是失败，因为这个控制最小高度的属性min-height：47px是写在div属性中，而且加了！import注释，所以只能修改js源码了：   在List.js的constructor里...
Ext.ux.grid.BufferView换行后无法适应行高问题【未解决】
ClumsyCat的专栏
04-01 950
EXTjs3.3.0版本 使用BufferVIew时，如果一行文字较多，那么换行以后就会出现下图所示结果，看着比较惨烈。 .x-grid3-cell-inner{ white-space:normal !important; }换行的css，不用加overflow就可以，在其他页面试过了。 换行后惨烈的效果。 读了几下代码，发现无从下手，不知道从哪里改，所以
vue elementUI table表格数据 滚动懒加载的实现方法
10-17
这需要计算 `scrollHeight`（总高度）、`scrollTop`（滚动距离）和 `clientHeight`（可视区域高度）。当 `scrollHeight - scrollTop - clientHeight 时，表示用户已经滚动到底部。 5. **分页逻辑**： 虽然前端进行...
mint-ui：mint-ui扩展。 mint-ui扩展
02-06
@ senntyou / mint-ui扩展。官方mint-ui仓库缺少很多功能，并且目前没有人维护了，所以我在这里添加了一些组件。 npm install @senntyou/mint-ui --saveimport { Picker,} from '@senntyou/mint-ui';Picker：投票...
uni-ui安装初始化
11-23
5. **使用组件**：现在你可以在Vue模板中直接使用uni-ui的组件，例如`<u-button>`，记得在`<template>`标签内引入： ```html <u-button>点击我</u-button> ``` 6. **运行项目**：最后，运行项目查看...
umy js虚拟化table
飞翔的熊blabla
11-09 900
参考 umy-ui开发文档 - 为开发者准备的基于 Vue 2.0 的桌面端组件库，完美解决表格万级数据渲染卡顿问题
vue大数据表格上万条数据，树型表格，解决el-table表格数据量过大渲染卡死的问题，使用umy-ui的大数据表格虚拟表格虚拟滚u-table解决。
海贼王某人的博客
09-19 6886
vue大数据表格上万条数据，树型表格，解决el-table表格数据量过大渲染卡死的问题，使用umy-ui的大数据表格虚拟表格虚拟滚u-table解决。，先看看效果吧，拿实例说话，直接渲染四万多条数据不分页，树形表格可以展开。
使用u-table/ux-grid虚拟滚动解决el-table数据量大渲染卡的问题、及表格根据浏览器大小动态调整高度问题
金乌的博客
06-13 5205
u-table的使用方法和el-table没什么区别。这里必须加的两个属性，不加的话无法实现虚拟表格，页面一样会卡死，第一个，use-virtual 开启虚拟滚动，第二，个 height 必须限制高度，这两个不加就是普通表格，加了之后就是虚拟表格。若想根据浏览器大小动态设置表格高度，可以通过vuex将屏幕大小的数据存储起来，通过监听屏幕大小，动态设置表格高度。新建umy-ui.scss文件，并引入。表格高度根据浏览器屏幕高度变化。
uni-table 表格的封装
Whit3ZzT的博客
06-20 1416
在实际的应用场景中，表格是一个非常常见的需求，如果每一个的表格都自己去手写的话非常的浪费时间，并且当中的代码冗余量非常大，所以很有必要进行封装。到这里的话基本上的表格封装就完成了，如果说还有其他的需求的话我这里没有写到也可以自行根据需求进行改造。此时基本就完成了表格的渲染，但是假如还需要操作列时，这个时候每一行的操作列都是空的，因为这里。这里的表头、表体、以及操作都是动态的，主要实现的方法在后续会进行讲解。循环渲染表头的每一列，这里的话表头就完成渲染了。中是不会保存操作列的数据的，所以需要传入一个。
elementui里的table表格组件大数据渲染严重的性能卡顿问题
.伊泽瑞尔
04-19 3228
elementui里的table表格组件在面对大数据量的时候渲染会出现严重的性能卡顿问题
element-ui、umy-ui使用table时的提示错误bug
最新发布
岁月流熵，用理智/秩序构建堡垒留存我们的光芒
12-11 247
一般我们会开启 show-overflow-tooltip进行提示（ps：框是黑底白字的），最近遇到一批白底黑字的提示框，开启关闭 show-overflow-tooltip都无法进行关闭。例如：el-table-column里开启插槽，再嵌套 el-descriptions -> el-descriptions-item -> span...2. u-table-column里是本身有bug，u-table-column 开启后有的表格有这个白框(可以正常显示)，有的没有。
大数据量树形数据表格展示, 虚拟表格,el-table, umy-ui, 表格懒加载
wxl_小白的博客
09-03 5475
1. 出现的问题 要展示树形数据表格,根据当前点击的表格行去请求新的数据并展示, 基于这种情况遇到以下问题 1). 当树形表格数据层级大于五级且数据量较多时, 浏览器崩溃 2). 当数据条数展示超出500以上时页面明显卡顿, 加载越多越卡直到崩溃 2. 根据问题找出解决方案 开发使用vue + element-ui 框架 基于el-table 尝试解决方案 2.1 不使用树形表格数据, 对数据做平铺展示, 手动模拟树形数据的功能及相关数据处理 <template slot-scope="s
umy-ui当将u-table放el-dialog中时，由于动态计算z-index所以鼠标放列上无法显示提示
HSL888的专栏
03-03 407
1.修改E:\E_XUE_WU\Project\sourcecode\client\node_modules\umy-ui\lib\theme-chalk\u-table.css中el-tooltip__popper：z-index:2050 E:\E_XUE_WU\Project\sourcecode\client\node_modules\umy-table\lib\theme-chalk\el-table.css中el-tooltip__popper：z-index:2050 ...
Element UI 中的Table表格组件自定义行高与整个表格自适应高度
热门推荐
小木鱼的博客
05-11 2万+
Element UI 中的Table表格组件行高与整个表格高度自适应
umy-ui 渲染十万条数据
07-11
对于渲染大量数据，可以考虑以下几种优化方式： 1. 虚拟滚动：使用虚拟滚动技术，只渲染可见区域内的数据，而不是将所有数据一次性渲染出来。这可以大幅减少渲染的时间和内存占用。 2. 分页加载：将数据分页加载，每次只加载当前页的数据，当用户滚动到下一页时再加载下一页的数据。这样可以提高页面的响应速度和用户体验。 3. 数据优化：对于大量数据，可以通过优化数据结构、压缩数据等方式减少数据的体积，从而加快渲染速度。 4. 批量更新：使用批量更新的方式进行渲染，而不是逐条更新。例如，可以将一批数据以数组的形式传递给渲染引擎，然后一次性进行渲染。 5. 懒加载：只在需要时才加载数据，而不是一次性加载所有数据。可以根据用户的操作或者滚动位置来触发加载。 以上是一些常见的优化方式，你可以根据具体情况选择适合的方法来提升渲染效率。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值