外贸网站开发,网站诊断内容,网站备案快吗,广州网站建设设计哪家好前面咱完成了自定义JuanTree组件各种功能的实现。在数据量很大的情况下#xff0c;我们讲了两种实现方式来提高渲染性能#xff1a;前端分页和节点数据懒加载。
前端分页小节#xff1a;Vue3扁平化Tree组件的前端分页实现
节点数据懒加载小节#xff1a;Element Tree Plu…前面咱完成了自定义JuanTree组件各种功能的实现。在数据量很大的情况下我们讲了两种实现方式来提高渲染性能前端分页和节点数据懒加载。
前端分页小节Vue3扁平化Tree组件的前端分页实现
节点数据懒加载小节Element Tree Plus版功能演示数据懒加载 关于扁平化结构Tree和嵌套结构Tree组件的渲染 嵌套结构的Tree组件是一种递归渲染性能上比起列表结构的v-for渲染比较一般。对于这种渲染方式在数据量很大的情况下只有通过懒加载可以提高渲染性能而扁平化结构则有更多的选择前端分页是一种方式还有一种更好的选择就是本节介绍的虚拟滚动。 下一小节我们将对自定义JuanTree组件来应用虚拟滚动解决数据量非常大的情况下的用户体验良好的高性能渲染。本小节讲原理和基本demo的实现喜欢的点个赞关注下后续会更精彩
功能演示 虚拟滚动的原理 demo实现
编写vitepress示例 滚动条的实现
考虑到原生滚动条太丑我们使用element-plus提供的el-scrollbar组件因为它简单好用且展示也很美观。
element plus在基于vite的vue3 tsx项目的整合请参考vite tsx项目的element plus集成 - 按需引入踩坑
demo示例源码
src/components/VirtualList.vue
实现非常简单易懂
script setup langts
import { computed, ref } from vueconst containerHeight 24 * 12 // 容器高度
const itemHeight 24 // 列表项高度
const visibleCount Math.ceil(containerHeight / itemHeight) // 可视区域列表元素数量
const totalCount 1000 // 列表元素总数
const data ref(Array.from({ length: totalCount }).map((_, index) ({ value: index })))
// 起始索引
const startIndex ref(0)
// 可视区域的数据
const visibleData computed(() data.value.slice(startIndex.value, startIndex.value visibleCount))
// 数据列表在Y轴的偏移量
const offsetY ref(0)
const onScroll (event: any) {const scrollTop event.scrollTop// 按照滚动的高度触发可视区域数据计算属性的重新计算。startIndex.value Math.floor(scrollTop / itemHeight)// 同步更新数据列表元素translate3d样式y轴的偏移量确保其始终与视口的最上端对齐offsetY.value scrollTop
}
/scripttemplateel-scrollbar classvl-container :heightcontainerHeight scrollonScrolldiv classvl-wrapper!-- 展示滚动条 --divclassvl-blank:style{height: ${totalCount * itemHeight}px}/div!-- 数据列表 --divclassvl-data:style{transform: translate3d(0, ${offsetY}px, 0)}div classitem v-for(item, index) in visibleData :keyindexItem {{ item.value }}/div/div/div/el-scrollbar
/templatestyle scoped langscss
.vl-wrapper {position: relative;.vl-blank {position: absolute;top: 0;right: 0;left: 0;}
}
/style
