工作中我们经常会用到element-ui组件库中的le-table组件来展示数据,但当table的数据源数量过大的时候统一展示可能会出现页面卡顿,且会影响用户体验,为此我们可以尝试对el-table中的数据做懒加载的效果展示:
1. 挂在阶段监听el-table的scroll滚动事件
2. 当table表格滚动条的位置+调试的固定高度+要显示数据的高度>=el-table-body(当前加载出的table数据总高度)时就可以向table数据源中push进新的数据了
// 1.在页面挂在阶段监听el-table组件的滚动事件
mounted() {
this.$refs.table.$el.addEventListener('scroll',scrollmethods)
},
scrollmethods(e) {
// 获取到table表格(可视)的dom
let realNode = e.srcElement;
// 获取到table所有数据的真实dom
let tableBOM = this.$refs.table.$el.querySelector('el-table-body');
// 如果table数据的总高度 <= 可视table滚动条到顶部的距离+550固定值(这个大家根据实际情况调试)+20条数据的高度
if(tableBOM.offsetHeight <= realNode.scrollTop + 550 + (20*3)) {
// 下面是模拟向table数据源中新添加新的数据
this.tableData = this.tableData.push(arr);
}
}
补充:另外也可以使用scrollHeitht(总高度)-scrollTop(页面被卷曲高度)-clientHeight(可视区高度)=0来进行判断,
offsetHeitht:指元素的像素高度,高度包含该元素的垂直内边距和边框,且是一个整数。
scrollHeight:指元素的总高度,包含滚动条中的内容。只读属性。不带px单位。
scrollTop:当元素出现滚动条时,向下拖动滚动条,内容向上滚动的距离。可读可写属性。不带px单位。如果该元素没有滚动条,则scrollTop的值为0,该值只能是正值。
clientHeight:元素客户区的大小,指的是元素内容及其边框所占据的空间大小,实际上就是可视区域的大小。文章来源:https://www.toymoban.com/news/detail-400479.html
若-页面被卷曲的高度-可视范围的高度=0就i加载数据文章来源地址https://www.toymoban.com/news/detail-400479.html
到了这里,关于vue中数据滚动显示 实现Element-UI中el-table内数据的懒加载的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!