el-tree数据量过大导致页面卡顿

问题：el-tree等树形结构，当数据量非常大，渲染会很慢

解决方案:

懒加载
方法：设置lazy属性为true，当点击父级节点时，再通过load方法加载子列表。
优点：使用简单。
缺点：不能做回显，无法展开全部节点。

虚拟列表
方法：使用插件或者自己实现一个虚拟列表（推荐：https://sangtian152.github.io/virtual-tree/zh/demo/）
优点：不论数据多少，都可以实现快速加载。
缺点：暂未发现。

虚拟列表使用流程：
1、安装插件

npm install @sangtian152/virtual-tree

2、在main.js中引入组件

1 import VlTree from '@sangtian152/virtual-tree';
2 import "@sangtian152/virtual-tree/lib/vl-tree.css";
3 Vue.use(VlTree);

3、使用

 1 <template>
 2     <vl-tree
 3       ref="treeForm"
 4       :height="600"
 5       :show-checkbox="true"
 6       :check-strictly="true"
 7       :node-key="'treeId'"
 8       :data="treedata"
 9       :props="deprops"
10       :default-expanded-keys="defaultExpand"
11       :default-checked-keys="defaultChecked"
12       :filter-method="filterNode"
13       @check="handleNodeClick">
14     </vl-tree>
15 </template>
16 
17 <script>
18 export default {
19     data() {
20         return {
21             deprops: { // 默认配置
22                 value: 'treeId', // treeId 为节点id，唯一值
23                 label: 'nodeName',
24                 children: 'childList',
25             },
26             treedata: [], // 数据
27             defaultExpand: [], // 默认展开节点
28             defaultChecked: [] // 默认选中节点，用于回显
29         }
30     },
31     methods: {
32         // 搜索
33         filterNode(value, data) {
34           if (!value) return true
35           return data.nodeName.indexOf(value) !== -1
36         },
37         // 选中节点
38         handleNodeClick(node, list) {
39           console.log(node, list) // 处理选中节点
40         }
41       }
42 }
43 </script>

以上解决方案已实践，可以满足需求，如有更好的方案，请留言告知，万分感谢~