位置: IT常识 - 正文
解决el-tree子节点过多导致渲染缓慢问题(el-tree方法)
编辑：rootadmin推荐整理分享解决el-tree子节点过多导致渲染缓慢问题(el-tree方法)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:el-tree添加节点,el-tree方法,el-tree自定义节点,el-tree怎么获取选中的节点,el-tree怎么获取选中的节点,el-tree resolve,el–tree,el–tree,内容如对您有帮助，希望把文章链接给更多的朋友！
在使用el-tree中，通常会调用后端接口从而去渲染tree。若后端返回数据量过于庞大，则会导致el-tree渲染缓慢的问题。此时我们通常会使用懒加载tree的方式，也就是点击某一个节点后去调取接口动态获取该节点的子数据。这种方式的确会对性能友好很多。但如果在节点数量在万级以上会有明显的卡顿，若数据量在五万以上可能会导致el-tree假死的情况。
2、解决方案在市面上可能会有多种解决方案，我个人推荐 @wchbrad/vue-easy-tree这个包。这是一个作者结合el-tree结合虚拟滚动封装的的一个虚拟滚动tree组件，作者博客出处：
vue 实现 tree 树形大量数据的多功能虚拟滚动-Virtual Tree_Brad_chao的博客-CSDN博客_vue树形数据展示
下面是一篇虚拟滚动的文章。作者非常详细的介绍了虚拟滚动。
解决加载大量列表DOM导致浏览器性能瓶颈的虚拟滚动技术_程序员_Cc的博客-CSDN博客_虚拟滚动
3、使用方式使用npm下载：
npm install @wchbrad/vue-easy-tree
yarn下载
yarn add @wchbrad/vue-easy-tree组件中进行引入：
import VueEasyTree from "@wchbrad/vue-easy-tree";// 样式文件，可以根据需要自定义样式或主题import "@wchbrad/vue-easy-tree/src/assets/index.scss"export default { components: { VueEasyTree }}我使用vue-easy-tree的感觉就是兼容el-tree基本功能并支持大量数据虚拟滚动操作
5、demo演示说明：通过一个小demo演示并对比el-tree与vue-easy-tree的渲染效率区别
如下图，通过两个按钮来对比两者之间的区别。base作为叶子节点数量。此时我将基数给予1w作为测试
<template> <div class="hello"> <!-- vue-easy-tree --> <el-button @click="()=>{ isBlock=true isBlock2 = false}" >vue-easy-tree</el-button> <!-- el-tree --> <el-button @click="()=>{ isBlock2=true isBlock=false }">el-tree</el-button> <vue-easy-tree ref="veTree" node-key="id" height="calc(100vh - 30px)" :data="treeData" :props="props" v-if="isBlock" ></vue-easy-tree> <el-tree ref="veTree" node-key="id" height="calc(100vh - 30px)" :data="treeData" :props="props" v-if="isBlock2" ></el-tree> </div></template><script>import VueEasyTree from "@wchbrad/vue-easy-tree";// 样式文件，可以根据需要自定义样式或主题import "@wchbrad/vue-easy-tree/src/assets/index.scss";export default { name: "HelloWorld", components: { VueEasyTree, }, data() { return { props: { label: "name", children: "children", }, isBlock:false, isBlock2:false, treeData: [], }; }, created() { const data = [], root = 8, children = 3, base = 10000; for (let i = 0; i < root; i++) { data.push({ id: `${i}`, name: `test-${i}`, children: [], }); for (let j = 0; j < children; j++) { data[i].children.push({ id: `${i}-${j}`, name: `test-${i}-${j}`, children: [], }); for (let k = 0; k < base; k++) { data[i].children[j].children.push({ id: `${i}-${j}-${k}`, name: `test-${i}-${j}-${k}`, }); } } } this.treeData = data; },};</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped></style>我们先看下el-tree：
如图 我们点击了节点后大概几秒中之后才展开所有节点。并且在收缩节点时也会有明显的卡顿
我们再看看vue-easy-tree的效果。无卡顿，我们通过控制台可以看出，el-tree渲染了所有节点，而虚拟滚动只渲染了可视区域的节点。所以不会卡顿。
以上就是vue-easy-tree的用法。需要的小伙伴可以进行参考哦，仅供参考。业务场景不同需求也不同
上一篇：莱奇沃思州立公园，纽约 (© Jay O'Brien/Danita Delimont)(莱奇沃思田园城市)
下一篇：Windows7旗舰版系统极品飞车17已停止工作的解决方(win7旗舰系统)
