超大量数据，前端树形结构展示

后端返回了50万数据，让前端一次性展示成树，之前用的ant-design-vue的tree插件，卡的死死的，颠末大量实验，现发现三种树可以支持如此大数量的数据。

目次
第一种：vue-easy-tree
使用方式：
1.安装插件
2.引入插件
全局引入
组件引入
3.使用
 在使用虚拟滚动时，必须设置 node-key。
4.api（githup经常打不开，哎,复制了一下各人一起看）
基础用法
可选择
懒加载自界说叶子节点
默认展开和默认选中
禁用状态
树节点的选择
自界说节点内容
节点过滤
手风琴模式
可拖拽节点
Attributes
props
方法
Events
Scoped Slot
第二种：zTree(vue-giant-tree)延迟加载
1.安装插件
2.页面使用
第三种：vxe-table-plugin-virtual-tree
总结

---

---

第一种：vue-easy-tree

• 大数据量支持虚拟滚动
  
• 基本树形数据的展示
  
• 支持checkbox选择
  
• 支持懒加载
  
• 默认展开和默认选中
  
• 禁用节点
  
• 通过多种方式选中节点和获取选中的节点信息
  
• 支持自界说节点内容
  
• 支持节点过滤
  
• 非虚拟滚动下，支持手风琴模式
  
• 非懒加载时，支持节点拖拽
  

githup上有具体api介绍
https://github.com/wchbrad/vue-easy-tree/blob/aa225219e4dc9e88f0a633405fe3947991dfd224/element-ui-tree.zh-CN.md
使用方式：

1.安装插件

1. npm install @wchbrad/vue-easy-tree

复制代码

2.引入插件

全局引入

在 main.js 文件中引入：

1. import Vue from "vue";
2. import VueEasyTree from "@wchbrad/vue-easy-tree";
3. // 样式文件，可以根据需要自定义样式或主题
4. import "@wchbrad/vue-easy-tree/src/assets/index.scss"
6. Vue.use(VueEasyTree)

复制代码

组件引入

在组件中引入：

1. import VueEasyTree from "@wchbrad/vue-easy-tree";
2. // 样式文件，可以根据需要自定义样式或主题
3. import "@wchbrad/vue-easy-tree/src/assets/index.scss"
5. export default {
6.   components: {
7.     VueEasyTree
8.   }
9. }

复制代码

3.使用

 在使用虚拟滚动时，必须设置 node-key。


4.api（githup经常打不开，哎,复制了一下各人一起看）

基础用法

基础的树形结构展示。

1. <vue-easy-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></vue-easy-tree>
3. <script>
4.   export default {
5.     data() {
6.       return {
7.         data: [{
8.           label: '一级 1',
9.           children: [{
10.             label: '二级 1-1',
11.             children: [{
12.               label: '三级 1-1-1'
13.             }]
14.           }]
15.         }, {
16.           label: '一级 2',
17.           children: [{
18.             label: '二级 2-1',
19.             children: [{
20.               label: '三级 2-1-1'
21.             }]
22.           }, {
23.             label: '二级 2-2',
24.             children: [{
25.               label: '三级 2-2-1'
26.             }]
27.           }]
28.         }, {
29.           label: '一级 3',
30.           children: [{
31.             label: '二级 3-1',
32.             children: [{
33.               label: '三级 3-1-1'
34.             }]
35.           }, {
36.             label: '二级 3-2',
37.             children: [{
38.               label: '三级 3-2-1'
39.             }]
40.           }]
41.         }],
42.         defaultProps: {
43.           children: 'children',
44.           label: 'label'
45.         }
46.       };
47.     },
48.     methods: {
49.       handleNodeClick(data) {
50.         console.log(data);
51.       }
52.     }
53.   };
54. </script>

复制代码

可选择

实用于需要选择层级时使用。
本例还展示了动态加载节点数据的方法。

1. <vue-easy-tree
2.   :props="props"
3.   :load="loadNode"
4.   lazy
5.   show-checkbox
6.   @check-change="handleCheckChange">
7. </vue-easy-tree>
9. <script>
10.   export default {
11.     data() {
12.       return {
13.         props: {
14.           label: 'name',
15.           children: 'zones'
16.         },
17.         count: 1
18.       };
19.     },
20.     methods: {
21.       handleCheckChange(data, checked, indeterminate) {
22.         console.log(data, checked, indeterminate);
23.       },
24.       handleNodeClick(data) {
25.         console.log(data);
26.       },
27.       loadNode(node, resolve) {
28.         if (node.level === 0) {
29.           return resolve([{ name: 'region1' }, { name: 'region2' }]);
30.         }
31.         if (node.level > 3) return resolve([]);
33.         var hasChild;
34.         if (node.data.name === 'region1') {
35.           hasChild = true;
36.         } else if (node.data.name === 'region2') {
37.           hasChild = false;
38.         } else {
39.           hasChild = Math.random() > 0.5;
40.         }
42.         setTimeout(() => {
43.           var data;
44.           if (hasChild) {
45.             data = [{
46.               name: 'zone' + this.count++
47.             }, {
48.               name: 'zone' + this.count++
49.             }];
50.           } else {
51.             data = [];
52.           }
54.           resolve(data);
55.         }, 500);
56.       }
57.     }
58.   };
59. </script>

复制代码

懒加载自界说叶子节点

由于在点击节点时才进行该层数据的获取，默认情况下 Tree 无法预知某个节点是否为叶子节点，所以会为每个节点添加一个下拉按钮，假如节点没有下层数据，则点击后下拉按钮会消失。同时，你也可以提前告知 Tree 某个节点是否为叶子节点，从而避免在叶子节点前渲染下拉按钮。

1. <vue-easy-tree
2.   :props="props"
3.   :load="loadNode"
4.   lazy
5.   show-checkbox>
6. </vue-easy-tree>
8. <script>
9.   export default {
10.     data() {
11.       return {
12.         props: {
13.           label: 'name',
14.           children: 'zones',
15.           isLeaf: 'leaf'
16.         },
17.       };
18.     },
19.     methods: {
20.       loadNode(node, resolve) {
21.         if (node.level === 0) {
22.           return resolve([{ name: 'region' }]);
23.         }
24.         if (node.level > 1) return resolve([]);
26.         setTimeout(() => {
27.           const data = [{
28.             name: 'leaf',
29.             leaf: true
30.           }, {
31.             name: 'zone'
32.           }];
34.           resolve(data);
35.         }, 500);
36.       }
37.     }
38.   };
39. </script>

复制代码

默认展开和默认选中

可将 Tree 的某些节点设置为默认展开或默认选中
分别通过default-expanded-keys和default-checked-keys设置默认展开和默认选中的节点。需要注意的是，此时必须设置node-key，其值为节点数据中的一个字段名，该字段在整棵树中是唯一的。

1. <vue-easy-tree
2.   :data="data"
3.   show-checkbox
4.   node-key="id"
5.   :default-expanded-keys="[2, 3]"
6.   :default-checked-keys="[5]"
7.   :props="defaultProps">
8. </vue-easy-tree>
10. <script>
11.   export default {
12.     data() {
13.       return {
14.         data: [{
15.           id: 1,
16.           label: '一级 1',
17.           children: [{
18.             id: 4,
19.             label: '二级 1-1',
20.             children: [{
21.               id: 9,
22.               label: '三级 1-1-1'
23.             }, {
24.               id: 10,
25.               label: '三级 1-1-2'
26.             }]
27.           }]
28.         }, {
29.           id: 2,
30.           label: '一级 2',
31.           children: [{
32.             id: 5,
33.             label: '二级 2-1'
34.           }, {
35.             id: 6,
36.             label: '二级 2-2'
37.           }]
38.         }, {
39.           id: 3,
40.           label: '一级 3',
41.           children: [{
42.             id: 7,
43.             label: '二级 3-1'
44.           }, {
45.             id: 8,
46.             label: '二级 3-2'
47.           }]
48.         }],
49.         defaultProps: {
50.           children: 'children',
51.           label: 'label'
52.         }
53.       };
54.     }
55.   };
56. </script>

复制代码

禁用状态

可将 Tree 的某些节点设置为禁用状态
通过disabled设置禁用状态。

1. <vue-easy-tree
2.   :data="data"
3.   show-checkbox
4.   node-key="id"
5.   :default-expanded-keys="[2, 3]"
6.   :default-checked-keys="[5]">
7. </vue-easy-tree>
9. <script>
10.   export default {
11.     data() {
12.       return {
13.         data: [{
14.           id: 1,
15.           label: '一级 2',
16.           children: [{
17.             id: 3,
18.             label: '二级 2-1',
19.             children: [{
20.               id: 4,
21.               label: '三级 3-1-1'
22.             }, {
23.               id: 5,
24.               label: '三级 3-1-2',
25.               disabled: true
26.             }]
27.           }, {
28.             id: 2,
29.             label: '二级 2-2',
30.             disabled: true,
31.             children: [{
32.               id: 6,
33.               label: '三级 3-2-1'
34.             }, {
35.               id: 7,
36.               label: '三级 3-2-2',
37.               disabled: true
38.             }]
39.           }]
40.         }],
41.         defaultProps: {
42.           children: 'children',
43.           label: 'label'
44.         }
45.       };
46.     }
47.   };
48. </script>

复制代码

树节点的选择

本例展示如何获取和设置选中节点。获取和设置各有两种方式：通过 node 或通过 key。假如需要通过 key 来获取或设置，则必须设置node-key。

1. <vue-easy-tree
2.   :data="data"
3.   show-checkbox
4.   default-expand-all
5.   node-key="id"
6.   ref="tree"
7.   highlight-current
8.   :props="defaultProps">
9. </vue-easy-tree>
11. <div class="buttons">
12.   <el-button @click="getCheckedNodes">通过 node 获取</el-button>
13.   <el-button @click="getCheckedKeys">通过 key 获取</el-button>
14.   <el-button @click="setCheckedNodes">通过 node 设置</el-button>
15.   <el-button @click="setCheckedKeys">通过 key 设置</el-button>
16.   <el-button @click="resetChecked">清空</el-button>
17. </div>
19. <script>
20.   export default {
21.     methods: {
22.       getCheckedNodes() {
23.         console.log(this.$refs.tree.getCheckedNodes());
24.       },
25.       getCheckedKeys() {
26.         console.log(this.$refs.tree.getCheckedKeys());
27.       },
28.       setCheckedNodes() {
29.         this.$refs.tree.setCheckedNodes([{
30.           id: 5,
31.           label: '二级 2-1'
32.         }, {
33.           id: 9,
34.           label: '三级 1-1-1'
35.         }]);
36.       },
37.       setCheckedKeys() {
38.         this.$refs.tree.setCheckedKeys([3]);
39.       },
40.       resetChecked() {
41.         this.$refs.tree.setCheckedKeys([]);
42.       }
43.     },
45.     data() {
46.       return {
47.         data: [{
48.           id: 1,
49.           label: '一级 1',
50.           children: [{
51.             id: 4,
52.             label: '二级 1-1',
53.             children: [{
54.               id: 9,
55.               label: '三级 1-1-1'
56.             }, {
57.               id: 10,
58.               label: '三级 1-1-2'
59.             }]
60.           }]
61.         }, {
62.           id: 2,
63.           label: '一级 2',
64.           children: [{
65.             id: 5,
66.             label: '二级 2-1'
67.           }, {
68.             id: 6,
69.             label: '二级 2-2'
70.           }]
71.         }, {
72.           id: 3,
73.           label: '一级 3',
74.           children: [{
75.             id: 7,
76.             label: '二级 3-1'
77.           }, {
78.             id: 8,
79.             label: '二级 3-2'
80.           }]
81.         }],
82.         defaultProps: {
83.           children: 'children',
84.           label: 'label'
85.         }
86.       };
87.     }
88.   };
89. </script>

复制代码

自界说节点内容

节点的内容支持自界说，可以在节点区添加按钮或图标等内容
可以通过两种方法进行树节点内容的自界说：render-content和 scoped slot。使用render-content指定渲染函数，该函数返回需要的节点区内容即可。渲染函数的用法请参考 Vue 文档。使用 scoped slot 会传入两个参数node和data，分别表示当前节点的 Node 对象和当前节点的数据。注意：由于 jsfiddle 不支持 JSX 语法，所以render-content示例在 jsfiddle 中无法运行。但是在实际的项目中，只要精确地设置了相关依赖，就可以正常运行。

1. <div class="custom-tree-container">
2.   <div class="block">
3.     <p>使用 render-content</p>
4.     <vue-easy-tree
5.       :data="data"
6.       show-checkbox
7.       node-key="id"
8.       default-expand-all
9.       :expand-on-click-node="false"
10.       :render-content="renderContent">
11.     </vue-easy-tree>
12.   </div>
13.   <div class="block">
14.     <p>使用 scoped slot</p>
15.     <vue-easy-tree
16.       :data="data"
17.       show-checkbox
18.       node-key="id"
19.       default-expand-all
20.       :expand-on-click-node="false">
21.       <span class="custom-tree-node" slot-scope="{ node, data }">
22.         <span>{{ node.label }}</span>
23.         <span>
24.           <el-button
25.             type="text"
26.             size="mini"
27.             @click="() => append(data)">
28.             Append
29.           </el-button>
30.           <el-button
31.             type="text"
32.             size="mini"
33.             @click="() => remove(node, data)">
34.             Delete
35.           </el-button>
36.         </span>
37.       </span>
38.     </vue-easy-tree>
39.   </div>
40. </div>
42. <script>
43.   let id = 1000;
45.   export default {
46.     data() {
47.       const data = [{
48.         id: 1,
49.         label: '一级 1',
50.         children: [{
51.           id: 4,
52.           label: '二级 1-1',
53.           children: [{
54.             id: 9,
55.             label: '三级 1-1-1'
56.           }, {
57.             id: 10,
58.             label: '三级 1-1-2'
59.           }]
60.         }]
61.       }, {
62.         id: 2,
63.         label: '一级 2',
64.         children: [{
65.           id: 5,
66.           label: '二级 2-1'
67.         }, {
68.           id: 6,
69.           label: '二级 2-2'
70.         }]
71.       }, {
72.         id: 3,
73.         label: '一级 3',
74.         children: [{
75.           id: 7,
76.           label: '二级 3-1'
77.         }, {
78.           id: 8,
79.           label: '二级 3-2'
80.         }]
81.       }];
82.       return {
83.         data: JSON.parse(JSON.stringify(data)),
84.         data: JSON.parse(JSON.stringify(data))
85.       }
86.     },
88.     methods: {
89.       append(data) {
90.         const newChild = { id: id++, label: 'testtest', children: [] };
91.         if (!data.children) {
92.           this.$set(data, 'children', []);
93.         }
94.         data.children.push(newChild);
95.       },
97.       remove(node, data) {
98.         const parent = node.parent;
99.         const children = parent.data.children || parent.data;
100.         const index = children.findIndex(d => d.id === data.id);
101.         children.splice(index, 1);
102.       },
104.       renderContent(h, { node, data, store }) {
105.         return (
106.           <span class="custom-tree-node">
107.             <span>{node.label}</span>
108.             <span>
109.               <el-button size="mini" type="text" on-click={ () => this.append(data) }>Append</el-button>
110.               <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>
111.             </span>
112.           </span>);
113.       }
114.     }
115.   };
116. </script>
118. <style>
119.   .custom-tree-node {
120.     flex: 1;
121.     display: flex;
122.     align-items: center;
123.     justify-content: space-between;
124.     font-size: 14px;
125.     padding-right: 8px;
126.   }
127. </style>

复制代码

节点过滤

通过关键字过滤树节点
在需要对节点进行过滤时，调用 Tree 实例的filter方法，参数为关键字。需要注意的是，此时需要设置filter-node-method，值为过滤函数。

1. <el-input
2.   placeholder="输入关键字进行过滤"
3.   v-model="filterText">
4. </el-input>
6. <vue-easy-tree
7.   class="filter-tree"
8.   :data="data"
9.   :props="defaultProps"
10.   default-expand-all
11.   :filter-node-method="filterNode"
12.   ref="tree">
13. </vue-easy-tree>
15. <script>
16.   export default {
17.     watch: {
18.       filterText(val) {
19.         this.$refs.tree.filter(val);
20.       }
21.     },
23.     methods: {
24.       filterNode(value, data) {
25.         if (!value) return true;
26.         return data.label.indexOf(value) !== -1;
27.       }
28.     },
30.     data() {
31.       return {
32.         filterText: '',
33.         data: [{
34.           id: 1,
35.           label: '一级 1',
36.           children: [{
37.             id: 4,
38.             label: '二级 1-1',
39.             children: [{
40.               id: 9,
41.               label: '三级 1-1-1'
42.             }, {
43.               id: 10,
44.               label: '三级 1-1-2'
45.             }]
46.           }]
47.         }, {
48.           id: 2,
49.           label: '一级 2',
50.           children: [{
51.             id: 5,
52.             label: '二级 2-1'
53.           }, {
54.             id: 6,
55.             label: '二级 2-2'
56.           }]
57.         }, {
58.           id: 3,
59.           label: '一级 3',
60.           children: [{
61.             id: 7,
62.             label: '二级 3-1'
63.           }, {
64.             id: 8,
65.             label: '二级 3-2'
66.           }]
67.         }],
68.         defaultProps: {
69.           children: 'children',
70.           label: 'label'
71.         }
72.       };
73.     }
74.   };
75. </script>

复制代码

手风琴模式

对于同一级的节点，每次只能展开一个

1. <vue-easy-tree
2.   :data="data"
3.   :props="defaultProps"
4.   accordion
5.   @node-click="handleNodeClick">
6. </vue-easy-tree>
8. <script>
9.   export default {
10.     data() {
11.       return {
12.         data: [{
13.           label: '一级 1',
14.           children: [{
15.             label: '二级 1-1',
16.             children: [{
17.               label: '三级 1-1-1'
18.             }]
19.           }]
20.         }, {
21.           label: '一级 2',
22.           children: [{
23.             label: '二级 2-1',
24.             children: [{
25.               label: '三级 2-1-1'
26.             }]
27.           }, {
28.             label: '二级 2-2',
29.             children: [{
30.               label: '三级 2-2-1'
31.             }]
32.           }]
33.         }, {
34.           label: '一级 3',
35.           children: [{
36.             label: '二级 3-1',
37.             children: [{
38.               label: '三级 3-1-1'
39.             }]
40.           }, {
41.             label: '二级 3-2',
42.             children: [{
43.               label: '三级 3-2-1'
44.             }]
45.           }]
46.         }],
47.         defaultProps: {
48.           children: 'children',
49.           label: 'label'
50.         }
51.       };
52.     },
53.     methods: {
54.       handleNodeClick(data) {
55.         console.log(data);
56.       }
57.     }
58.   };
59. </script>

复制代码

可拖拽节点

通过 draggable 属性可让节点变为可拖拽。

1. <vue-easy-tree
2.   :data="data"
3.   node-key="id"
4.   default-expand-all
5.   @node-drag-start="handleDragStart"
6.   @node-drag-enter="handleDragEnter"
7.   @node-drag-leave="handleDragLeave"
8.   @node-drag-over="handleDragOver"
9.   @node-drag-end="handleDragEnd"
10.   @node-drop="handleDrop"
11.   draggable
12.   :allow-drop="allowDrop"
13.   :allow-drag="allowDrag">
14. </vue-easy-tree>
16. <script>
17.   export default {
18.     data() {
19.       return {
20.         data: [{
21.           id: 1,
22.           label: '一级 1',
23.           children: [{
24.             id: 4,
25.             label: '二级 1-1',
26.             children: [{
27.               id: 9,
28.               label: '三级 1-1-1'
29.             }, {
30.               id: 10,
31.               label: '三级 1-1-2'
32.             }]
33.           }]
34.         }, {
35.           id: 2,
36.           label: '一级 2',
37.           children: [{
38.             id: 5,
39.             label: '二级 2-1'
40.           }, {
41.             id: 6,
42.             label: '二级 2-2'
43.           }]
44.         }, {
45.           id: 3,
46.           label: '一级 3',
47.           children: [{
48.             id: 7,
49.             label: '二级 3-1'
50.           }, {
51.             id: 8,
52.             label: '二级 3-2',
53.             children: [{
54.              id: 11,
55.               label: '三级 3-2-1'
56.             }, {
57.               id: 12,
58.               label: '三级 3-2-2'
59.             }, {
60.               id: 13,
61.               label: '三级 3-2-3'
62.             }]
63.           }]
64.         }],
65.         defaultProps: {
66.           children: 'children',
67.           label: 'label'
68.         }
69.       };
70.     },
71.     methods: {
72.       handleDragStart(node, ev) {
73.         console.log('drag start', node);
74.       },
75.       handleDragEnter(draggingNode, dropNode, ev) {
76.         console.log('tree drag enter: ', dropNode.label);
77.       },
78.       handleDragLeave(draggingNode, dropNode, ev) {
79.         console.log('tree drag leave: ', dropNode.label);
80.       },
81.       handleDragOver(draggingNode, dropNode, ev) {
82.         console.log('tree drag over: ', dropNode.label);
83.       },
84.       handleDragEnd(draggingNode, dropNode, dropType, ev) {
85.         console.log('tree drag end: ', dropNode && dropNode.label, dropType);
86.       },
87.       handleDrop(draggingNode, dropNode, dropType, ev) {
88.         console.log('tree drop: ', dropNode.label, dropType);
89.       },
90.       allowDrop(draggingNode, dropNode, type) {
91.         if (dropNode.data.label === '二级 3-1') {
92.           return type !== 'inner';
93.         } else {
94.           return true;
95.         }
96.       },
97.       allowDrag(draggingNode) {
98.         return draggingNode.data.label.indexOf('三级 3-2-2') === -1;
99.       }
100.     }
101.   };
102. </script>

复制代码

Attributes

参数阐明类型可选值默认值data展示数据array——empty-text内容为空的时候展示的文本String——node-key每个树节点用来作为唯一标识的属性，整棵树应该是唯一的String——props设置选项，具体看下表object——render-after-expand是否在第一次展开某个树节点后才渲染其子节点boolean—trueload加载子树数据的方法，仅当 lazy 属性为true 时生效function(node, resolve)——render-content树节点的内容区的渲染 FunctionFunction(h, { node, data, store }——highlight-current是否高亮当前选中节点，默认值是 false。boolean—falsedefault-expand-all是否默认展开全部节点boolean—falseexpand-on-click-node是否在点击节点的时候展开大概收缩节点， 默认值为 true，假如为 false，则只有点箭头图标的时候才会展开大概收缩节点。boolean—truecheck-on-click-node是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点。boolean—falseauto-expand-parent展开子节点的时候是否自动展开父节点boolean—truedefault-expanded-keys默认展开的节点的 key 的数组array——show-checkbox节点是否可被选择boolean—falsecheck-strictly在显示复选框的情况下，是否严格的遵循父子不相互关联的做法，默认为 falseboolean—falsedefault-checked-keys默认勾选的节点的 key 的数组array——current-node-key当前选中的节点string, number——filter-node-method对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐蔽Function(value, data, node)——accordion是否每次只打开一个同级树节点展开boolean—falseindent相邻级节点间的程度缩进，单位为像素number—16item-size每个节点的高度,单位为像素number—26icon-class自界说树节点的图标string--lazy是否懒加载子节点，需与 load 方法联合使用boolean—falsedraggable是否开启拖拽节点功能boolean—falseallow-drag判断节点能否被拖拽Function(node)——allow-drop拖拽时判定目标节点能否被放置。type 参数有三种情况：'prev'、'inner' 和 'next'，分别表示放置在目标节点前、插入至目标节点和放置在目标节点后Function(draggingNode, dropNode, type)—— props

参数阐明类型可选值默认值label指定节点标签为节点对象的某个属性值string, function(data, node)——children指定子树为节点对象的某个属性值string——disabled指定节点选择框是否禁用为节点对象的某个属性值boolean, function(data, node)——isLeaf指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效boolean, function(data, node)—— 方法

Tree 内部使用了 Node 类型的对象来包装用户传入的数据，用来保存目前节点的状态。 Tree 拥有如下方法：
方法名阐明参数filter对树节点进行筛选操作吸取一个恣意类型的参数，该参数会在 filter-node-method 中作为第一个参数updateKeyChildren通过 keys 设置节点子元素，使用此方法必须设置 node-key 属性(key, data) 吸取两个参数，1. 节点 key 2. 节点数据的数组getCheckedNodes若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点所构成的数组(leafOnly, includeHalfChecked) 吸取两个 boolean 类型的参数，1. 是否只是叶子节点，默认值为 false 2. 是否包含半选节点，默认值为 falsesetCheckedNodes设置目前勾选的节点，使用此方法必须设置 node-key 属性(nodes) 吸取勾选节点数据的数组getCheckedKeys若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点的 key 所构成的数组(leafOnly) 吸取一个 boolean 类型的参数，若为 true 则仅返回被选中的叶子节点的 keys，默认值为 falsesetCheckedKeys通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性(keys, leafOnly) 吸取两个参数，1. 勾选节点的 key 的数组 2. boolean 类型的参数，若为 true 则仅设置叶子节点的选中状态，默认值为 falsesetCheckedAll虚拟滚动时，快速全选大概扫除全选的方法，使用setCheckedKeys可能会卡顿(checked) 吸取一个 boolean 类型的参数，若为 true 则全选全部节点，若为 false 则取消全部节点的选中/半选状态，默认值为 falsesetChecked通过 key / data 设置某个节点的勾选状态，使用此方法必须设置 node-key 属性(key/data, checked, deep) 吸取三个参数，1. 勾选节点的 key 大概 data 2. boolean 类型，节点是否选中 3. boolean 类型，是否设置子节点 ，默认为 falsegetHalfCheckedNodes若节点可被选择（即 show-checkbox 为 true），则返回目前半选中的节点所构成的数组-getHalfCheckedKeys若节点可被选择（即 show-checkbox 为 true），则返回目前半选中的节点的 key 所构成的数组-getCurrentKey获取当前被选中节点的 key，使用此方法必须设置 node-key 属性，若没有节点被选中则返回 null—getCurrentNode获取当前被选中节点的 data，若没有节点被选中则返回 null—setCurrentKey通过 key 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性(key) 待被选节点的 key，若为 null 则取消当前高亮的节点setCurrentNode通过 node 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性(node) 待被选节点的 nodegetNode根据 data 大概 key 拿到 Tree 组件中的 node(data) 要获得 node 的 key 大概 dataremove删除 Tree 中的一个节点，使用此方法必须设置 node-key 属性(data) 要删除的节点的 data 大概 nodeappend为 Tree 中的一个节点追加一个子节点(data, parentNode) 吸取两个参数，1. 要追加的子节点的 data 2. 子节点的 parent 的 data、key 大概 nodeinsertBefore为 Tree 的一个节点的前面增加一个节点(data, refNode) 吸取两个参数，1. 要增加的节点的 data 2. 要增加的节点的后一个节点的 data、key 大概 nodeinsertAfter为 Tree 的一个节点的后面增加一个节点(data, refNode) 吸取两个参数，1. 要增加的节点的 data 2. 要增加的节点的前一个节点的 data、key 大概 node Events

事件名称阐明回调参数node-click节点被点击时的回调共三个参数，依次为：通报给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。node-contextmenu当某一节点被鼠标右键点击时会触发该事件共四个参数，依次为：event、通报给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。check-change节点选中状态发生厘革时的回调共三个参数，依次为：通报给 data 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点check当复选框被点击的时候触发共两个参数，依次为：通报给 data 属性的数组中该节点所对应的对象、树目前的选中状态对象，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性current-change当前选中节点厘革时触发的事件共两个参数，依次为：当前节点的数据，当前节点的 Node 对象node-expand节点被展开时触发的事件共三个参数，依次为：通报给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身node-collapse节点被关闭时触发的事件共三个参数，依次为：通报给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身node-drag-start节点开始拖拽时触发的事件共两个参数，依次为：被拖拽节点对应的 Node、eventnode-drag-enter拖拽进入其他节点时触发的事件共三个参数，依次为：被拖拽节点对应的 Node、所进入节点对应的 Node、eventnode-drag-leave拖拽离开某个节点时触发的事件共三个参数，依次为：被拖拽节点对应的 Node、所离开节点对应的 Node、eventnode-drag-over在拖拽节点时触发的事件（雷同欣赏器的 mouseover 事件）共三个参数，依次为：被拖拽节点对应的 Node、当前进入节点对应的 Node、eventnode-drag-end拖拽结束时（可能未成功）触发的事件共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点（可能为空）、被拖拽节点的放置位置（before、after、inner）、eventnode-drop拖拽成功完成时触发的事件共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点、被拖拽节点的放置位置（before、after、inner）、event Scoped Slot

name阐明—自界说树节点的内容，参数为 { node, data }
第二种：zTree(vue-giant-tree)延迟加载



巨树：基于ztree封装的 Vue 树形组件，轻松实现海量数据的高性能渲染。
Vue 的数据监听机制决定了在大数据量场景下的渲染性能非常低下，基于 Vue 实现的通例树组件险些无法胜任上万条数据的高性能渲染，在 IE 欣赏器（即便是 IE11）中很容易导致页面卡死甚至欣赏器崩溃。
为了摆脱数据监听，只能放弃通过 Vue 渲染，采用通例 DOM 操作的方式。在这个范畴ztree是当之无愧最成熟的方案，因此 vue-giant-tree 直接基于 ztree 做上层封装，以组件的情势将 ztree 的设置和事件袒露出来，使其可以方便的在 Vue 项目中安装使用。
vue-giant-tree 仅仅是给 ztree 套了一层 Vue 组件的壳，趁便提供了一套更现代化的皮肤，因为主打大数据量场景，所以取名巨树。
针对树节点很多，但是每级节点数据不多的情况造成的总数据量大，速率很快。但针对每个节点数据很多，但总节点不多的大量数据情况无效。（比如如今数据是1x 20 x 10 x 25 x 100 五个层级，每个层级最大只有100符合，假如是1x 25x 20000 ,一个节点有2万数据，优化不明显），前端书写的时候都是dom操作，还是有些麻烦的
 
githup链接：https://github.com/tower1229/Vue-Giant-Tree
zTree的api文档链接：Demo [zTree -- jQuery tree plug-ins.]
1.安装插件

1. npm i vue-giant-tree --save

复制代码

注意：组件依赖 jQuery，务必在页面中提前加载 jQuery，
2.页面使用

zTree组件页面代码

1. <template>
2.   <div class="ztree vue-giant-tree" :id="ztreeId"></div>
3. </template>
4. <script>
5. require("@ztree/ztree_v3/js/jquery.ztree.all");
6. export default {
7.   props: {
8.     setting: {
9.       type: Object,
10.       require: false,
11.       default: function () {
12.         return {};
13.       },
14.     },
15.     nodes: {
16.       type: Array,
17.       require: true,
18.       default: function () {
19.         return [];
20.       },
21.     },
22.   },
23.   data() {
24.     return {
25.       ztreeId: "ztree_" + parseInt(Math.random() * 1e10),
26.       ztreeObj: null,
27.       list: [],
28.       ztreeSetting: {
29.         view: {
30.           showIcon: false, // default to hide icon
31.         },
32.         callback: {
33.           onAsyncError: (...arg) => {
34.             this.$emit("onAsyncError", ...arg);
35.           },
36.           onAsyncSuccess: (...arg) => {
37.             this.$emit("onAsyncSuccess", ...arg);
38.           },
39.           onCheck: (...arg) => {
40.             this.$emit("onCheck", ...arg);
41.           },
42.           onClick: (...arg) => {
43.             this.$emit("onClick", ...arg);
44.           },
45.           onCollapse: (...arg) => {
46.             this.$emit("onCollapse", ...arg);
47.           },
48.           onDblClick: (...arg) => {
49.             this.$emit("onDblClick", ...arg);
50.           },
51.           onDrag: (...arg) => {
52.             this.$emit("onDrag", ...arg);
53.           },
54.           onDragMove: (...arg) => {
55.             this.$emit("onDragMove", ...arg);
56.           },
57.           onDrop: (...arg) => {
58.             this.$emit("onDrop", ...arg);
59.           },
60.           onExpand: (...arg) => {
61.             this.$emit("onExpand", ...arg);
62.           },
63.           onMouseDown: (...arg) => {
64.             this.$emit("onMouseDown", ...arg);
65.           },
66.           onMouseUp: (...arg) => {
67.             this.$emit("onMouseUp", ...arg);
68.           },
69.           onRemove: (...arg) => {
70.             this.$emit("onRemove", ...arg);
71.           },
72.           onRename: (...arg) => {
73.             this.$emit("onRename", ...arg);
74.           },
75.           onRightClick: (...arg) => {
76.             this.$emit("onRightClick", ...arg);
77.           },
78.         },
79.       },
80.     };
81.   },
82.   watch: {
83.     nodes: {
84.       handler: function (nodes) {
85.         this.list = nodes;
86.         // update tree
87.         if (this.ztreeObj) {
88.           this.ztreeObj.destroy();
89.         }
90.         this.$nextTick(() => {
91.           this.ztreeObj = $.fn.zTree.init(
92.             $("#" + this.ztreeId),
93.             Object.assign({}, this.ztreeSetting, this.setting),
94.             this.list
95.           );
96.           this.$emit("onCreated", this.ztreeObj);
97.         });
98.       },
99.       deep: true,
100.       immediate: true,
101.     },
102.   },
103. };
104. </script>
106. <style>
107. /* beauty ztree! */
108. .ztree {
109.   text-align: left;
110.   font-size: 14px;
111. }
112. .vue-giant-tree li {
113.   list-style-type: none;
114.   white-space: nowrap;
115.   outline: none;
116. }
117. .vue-giant-tree li ul {
118.   position: relative;
119.   padding: 0 0 0 20px;
120.   margin: 0;
121. }
122. .vue-giant-tree .line:before {
123.   position: absolute;
124.   top: 0;
125.   left: 10px;
126.   height: 100%;
127.   content: "";
128.   border-right: 1px dotted #dbdbdb;
129. }
130. .vue-giant-tree .roots_docu:before,
131. .vue-giant-tree .roots_docu:after,
132. .vue-giant-tree .center_docu:before,
133. .vue-giant-tree .bottom_docu:before,
134. .vue-giant-tree .center_docu:after,
135. .vue-giant-tree .bottom_docu:after {
136.   position: absolute;
137.   content: "";
138.   border: 0 dotted #dbdbdb;
139. }
140. .vue-giant-tree .roots_docu:before {
141.   left: 10px;
142.   height: 50%;
143.   top: 50%;
144.   border-left-width: 1px;
145. }
146. .vue-giant-tree .roots_docu:after {
147.   top: 50%;
148.   left: 11px;
149.   width: 50%;
150.   border-top-width: 1px;
151. }
152. .vue-giant-tree .center_docu:before {
153.   left: 10px;
154.   height: 100%;
155.   border-left-width: 1px;
156. }
157. .vue-giant-tree .center_docu:after {
158.   top: 50%;
159.   left: 11px;
160.   width: 50%;
161.   border-top-width: 1px;
162. }
163. .vue-giant-tree .bottom_docu:before {
164.   left: 10px;
165.   height: 50%;
166.   border-left-width: 1px;
167. }
168. .vue-giant-tree .bottom_docu:after {
169.   top: 50%;
170.   left: 11px;
171.   width: 50%;
172.   border-top-width: 1px;
173. }
174. .vue-giant-tree li a {
175.   display: inline-block;
176.   line-height: 22px;
177.   height: 22px;
178.   margin: 0;
179.   cursor: pointer;
180.   transition: none;
181.   vertical-align: middle;
182.   color: #555555;
183. }
184. .vue-giant-tree .node_name {
185.   display: inline-block;
186.   padding: 0 3px;
187.   border-radius: 4px;
188. }
189. .vue-giant-tree .curSelectedNode .node_name {
190.   color: #000;
191.   background-color: #c9e9f7;
192. }
193. .vue-giant-tree .curSelectedNode_Edit {
194.   height: 20px;
195.   opacity: 0.8;
196.   color: #000;
197.   border: 1px #6cc2e8 solid;
198.   background-color: #9dd6f0;
199. }
200. .vue-giant-tree .tmpTargetNode_inner {
201.   opacity: 0.8;
202.   color: #fff;
203.   background-color: #4fcbf0;
204.   filter: alpha(opacity=80);
205. }
206. .vue-giant-tree .rename {
207.   font-size: 12px;
208.   line-height: 22px;
209.   width: 80px;
210.   height: 22px;
211.   margin: 0;
212.   padding: 0;
213.   vertical-align: top;
214.   border: 0;
215.   background: none;
216. }
217. .vue-giant-tree .button {
218.   position: relative;
219.   display: inline-block;
220.   line-height: 22px;
221.   height: 22px;
222.   width: 22px;
223.   cursor: pointer;
224.   text-align: center;
225.   vertical-align: middle;
226. }
228. .vue-giant-tree .button.edit {
229.   color: #25ae88;
230. }
231. .vue-giant-tree .button.remove {
232.   color: #cb4042;
233. }
234. .vue-giant-tree .button.chk {
235.   position: relative;
236.   width: 14px;
237.   height: 14px;
238.   margin: 0 4px 0 0;
239.   border: 1px solid #d7dde4;
240.   border-radius: 2px;
241.   background: #fff;
242. }
243. .vue-giant-tree .chk.radio_true_full,
244. .vue-giant-tree .chk.radio_false_full,
245. .vue-giant-tree .chk.radio_true_full_focus,
246. .vue-giant-tree .chk.radio_false_full_focus,
247. .vue-giant-tree .chk.radio_false_disable,
248. .vue-giant-tree .chk.radio_true_disable,
249. .vue-giant-tree .chk.radio_true_part,
250. .vue-giant-tree .chk.radio_false_part,
251. .vue-giant-tree .chk.radio_true_part_focus,
252. .vue-giant-tree .chk.radio_false_part_focus {
253.   border-radius: 8px;
254. }
255. .vue-giant-tree .button.chk:after {
256.   position: absolute;
257.   top: 1px;
258.   left: 4px;
259.   width: 4px;
260.   height: 8px;
261.   content: "";
262.   transition: -webkit-transform 0.2s ease-in-out;
263.   transition: transform 0.2s ease-in-out;
264.   transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
265.   -webkit-transform: rotate(0deg) scale(0);
266.   transform: rotate(0deg) scale(0);
267.   border-right: 2px solid #fff;
268.   border-bottom: 2px solid #fff;
269. }
270. .vue-giant-tree .button.checkbox_false_full_focus {
271.   border-color: #ccc;
272. }
273. .vue-giant-tree .button.checkbox_true_full,
274. .vue-giant-tree .button.checkbox_true_full_focus,
275. .vue-giant-tree .button.checkbox_true_part,
276. .vue-giant-tree .button.checkbox_true_part_focus,
277. .vue-giant-tree .button.checkbox_true_disable {
278.   border-color: #39f;
279.   background-color: #39f;
280. }
281. .vue-giant-tree .button.checkbox_true_full:after,
282. .vue-giant-tree .button.checkbox_true_full_focus:after,
283. .vue-giant-tree .button.checkbox_true_disable:after {
284.   -webkit-transform: rotate(45deg) scale(1);
285.   transform: rotate(45deg) scale(1);
286. }
287. .vue-giant-tree .button.checkbox_true_part:after,
288. .vue-giant-tree .button.checkbox_true_part_focus:after {
289.   top: 5px;
290.   left: 2px;
291.   width: 10px;
292.   height: 1px;
293.   -webkit-transform: rotate(0deg) scale(1);
294.   transform: rotate(0deg) scale(1);
295.   border-right: 0;
296. }
297. .vue-giant-tree .button.radio_true_full,
298. .vue-giant-tree .chk.radio_true_full_focus,
299. .vue-giant-tree .chk.radio_true_part,
300. .vue-giant-tree .chk.radio_true_part_focus {
301.   border-color: #39f;
302. }
303. .vue-giant-tree .button.radio_true_full:after,
304. .vue-giant-tree .chk.radio_true_full_focus:after,
305. .vue-giant-tree .chk.radio_true_part:after,
306. .vue-giant-tree .chk.radio_true_part_focus:after {
307.   top: 3px;
308.   left: 3px;
309.   width: 8px;
310.   -webkit-transform: rotate(0deg) scale(1);
311.   transform: rotate(0deg) scale(1);
312.   border: 0;
313.   border-radius: 4px;
314.   background: #39f;
315. }
316. .vue-giant-tree .button.checkbox_true_disable,
317. .vue-giant-tree .button.checkbox_false_disable,
318. .vue-giant-tree .chk.radio_false_disable,
319. .vue-giant-tree .chk.radio_true_disable {
320.   cursor: not-allowed;
321. }
322. .vue-giant-tree .button.checkbox_false_disable {
323.   background-color: #f3f3f3;
324. }
325. .vue-giant-tree .button.noline_close:before,
326. .vue-giant-tree .button.noline_open:before,
327. .vue-giant-tree .button.root_open:before,
328. .vue-giant-tree .button.root_close:before,
329. .vue-giant-tree .button.roots_open:before,
330. .vue-giant-tree .button.roots_close:before,
331. .vue-giant-tree .button.bottom_open:before,
332. .vue-giant-tree .button.bottom_close:before,
333. .vue-giant-tree .button.center_open:before,
334. .vue-giant-tree .button.center_close:before {
335.   position: absolute;
336.   top: 5px;
337.   left: 5px;
338.   content: "";
339.   transition: -webkit-transform ease 0.3s;
340.   transition: transform ease 0.3s;
341.   transition: transform ease 0.3s, -webkit-transform ease 0.3s;
342.   -webkit-transform: rotateZ(0deg);
343.   transform: rotateZ(0deg);
344.   -webkit-transform-origin: 25% 50%;
345.   transform-origin: 25% 50%;
346.   border: 6px solid;
347.   border-color: transparent transparent transparent #666;
348. }
349. .vue-giant-tree .button.noline_open:before,
350. .vue-giant-tree .button.root_open:before,
351. .vue-giant-tree .button.roots_open:before,
352. .vue-giant-tree .button.bottom_open:before,
353. .vue-giant-tree .button.center_open:before {
354.   -webkit-transform: rotateZ(90deg);
355.   transform: rotateZ(90deg);
356. }
357. .vue-giant-tree .button.ico_loading {
358.   margin-right: 2px;
359.   background: url("data:image/gif;base64,R0lGODlhEAAQAKIGAMLY8YSx5HOm4Mjc88/g9Ofw+v///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFCgAGACwAAAAAEAAQAAADMGi6RbUwGjKIXCAA016PgRBElAVlG/RdLOO0X9nK61W39qvqiwz5Ls/rRqrggsdkAgAh+QQFCgAGACwCAAAABwAFAAADD2hqELAmiFBIYY4MAutdCQAh+QQFCgAGACwGAAAABwAFAAADD1hU1kaDOKMYCGAGEeYFCQAh+QQFCgAGACwKAAIABQAHAAADEFhUZjSkKdZqBQG0IELDQAIAIfkEBQoABgAsCgAGAAUABwAAAxBoVlRKgyjmlAIBqCDCzUoCACH5BAUKAAYALAYACgAHAAUAAAMPaGpFtYYMAgJgLogA610JACH5BAUKAAYALAIACgAHAAUAAAMPCAHWFiI4o1ghZZJB5i0JACH5BAUKAAYALAAABgAFAAcAAAMQCAFmIaEp1motpDQySMNFAgA7")
360.     0 center no-repeat;
361. }
362. .vue-giant-tree .tmpTargetzTree {
363.   opacity: 0.8;
364.   background-color: #2ea9df;
365.   filter: alpha(opacity=80);
366. }
367. .vue-giant-tree .tmpzTreeMove_arrow {
368.   position: absolute;
369.   width: 18px;
370.   height: 18px;
371.   color: #4fcbf0;
372. }
373. </style>
374. <style>
375. ul.ztree.zTreeDragUL {
376.   margin: 0;
377.   padding: 0;
378.   position: absolute;
379.   overflow: hidden;
380.   background-color: #dedede;
381.   border: 1px #4fcbf0 dotted;
382.   border-radius: 4px;
383.   opacity: 0.7;
384. }
386. .zTreeMask {
387.   position: absolute;
388.   z-index: 10000;
389.   opacity: 0;
390.   background-color: #cfcfcf;
391. }
392. </style>

复制代码

在需要使用的页面引入ztree组件
 

1. <template>
2. <div style="width:30%;">
3.       <h1 class="T">
4.            zTree(vue-giant-tree)延迟加载
5.       </h1>
6.      <div class="wrap flex-1">
7.            <div class="c" style="height:600px;overflow:auto">
8.                 <tree :setting="setting" :nodes="nodes" @onClick="onClick @onCheck="onCheck" @onCreated="handleCreated" />
9.                     </div>
10.                 </div>
11.             </div>
12. </template>
14. <script>
15. export default {
16.     name: "app",
17.     components: {
18.         VueEasyTree,
19.         tree: resolve => require(["./ztree.vue"], resolve)
20.     },
21.     data() {
22.         return {
23.             nodes: [],
24.             showIndex: 0,
25.             ztreeObj: null,
26.             setting: {
27.                 check: {
28.                     enable: true
29.                 },
30.                 data: {
31.                     simpleData: {
32.                         enable: false,
33.                         pIdKey: "pid",
34.                     },
35.                     key:{
36.                       name:'departName'
37.                     }
38.                 },
39.                 view: {
40.                     showIcon: false,
41.                     addHoverDom: this.addHoverDom,
42.                     removeHoverDom: this.removeHoverDom,
43.                 }
44.             }
45.         };
46.     },
47.   methods: {
48.         addHoverDom(treeid, treeNode) {
49.             const item = document.getElementById(`${treeNode.tId}_a`);
50.             if (item && !item.querySelector('.tree_extra_btn')) {
51.                 const btn = document.createElement('sapn');
52.                 btn.id = `${treeid}_${treeNode.id}_btn`;
53.                 btn.classList.add('tree_extra_btn');
54.                 btn.innerText = '删除';
55.                 btn.addEventListener('click', (e) => {
56.                     e.stopPropagation()
57.                     this.clickRemove(treeNode)
58.                 })
59.                 item.appendChild(btn);
60.             }
62.         },
63.         removeHoverDom(treeid, treeNode) {
64.             const item = document.getElementById(`${treeNode.tId}_a`);
65.             if (item) {
66.                 const btn = item.querySelector('.tree_extra_btn');
67.                 if (btn) {
68.                     item.removeChild(btn)
69.                 }
70.             }
71.         },
72.         clickRemove(treeNode) {
73.             console.log('remove', treeNode)
74.             this.ztreeObj && this.ztreeObj.removeNode(treeNode)
75.         },
76.         onClick: function (evt, treeId, treeNode) {
77.             // 点击事件
78.             console.log(evt.type, treeNode);
79.         },
80.         onCheck: function (evt, treeId, treeNode) {
81.             // 选中事件
82.             console.log(evt.type, treeNode);
83.         },
84.         handleCreated: function (ztreeObj) {
85.             this.ztreeObj = ztreeObj;
86.             // onCreated 中操作ztreeObj对象展开第一个节点
87.             ztreeObj.expandNode(ztreeObj.getNodes()[0], true);
88.             //  ztreeObj.expandAll(true);
90.         },
91.         update: function () {
92.             // 更新示例数据
93.             this.showIndex = this.showIndex === 0 ? 1 : 0;
94.         }
95.     }
96. };
97. </script>
99. <style scoped>
101. .T {
102.     font-size: 34px;
103.     margin: 0 0 30px;
104.     overflow: hidden;
105. }
109. </style>

复制代码

第三种：vxe-table-plugin-virtual-tree
 

这个插件是为相识决vxe-table的v2.0版本不支持虚拟树，vxe-table的3.0版本如今支持虚拟树了，也可以使用vxe-table v3.0。
githup链接：https://github.com/x-extends/vxe-table-plugin-virtual-tree
api链接:
​​​​xe-table v2
这个插件只用了展示树形结构，大概表格树还是比较方便的，但是数据量太大时候，勾选操作还是略卡。但是十万数据以内速率还不错，关键是它可以做成表格树。
 

总结：

具体用哪一种，看你的具体情况了。
假如仅仅是树形展示，那就第一种vue-easy-tree，方便简朴。假如数据量超级大，节点多，但是每个节点的数量不多，还要兼容ie，那就第二种zTree，假如要展示表格树，那就第三种vue-virtual-tree

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。