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

后端返回了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.安装插件

npm install @wchbrad/vue-easy-tree

2.引入插件

全局引入

在 main.js 文件中引入：

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

组件引入

在组件中引入：

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

3.使用

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

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

基础用法

基础的树形结构展示。

可选择

适用于需要选择层级时使用。

本例还展示了动态加载节点数据的方法。

懒加载自定义叶子节点

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

默认展开和默认选中

可将 Tree 的某些节点设置为默认展开或默认选中

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

禁用状态

可将 Tree 的某些节点设置为禁用状态

通过disabled设置禁用状态。

树节点的选择

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

通过 node 获取 通过 key 获取 通过 node 设置 通过 key 设置 清空

自定义节点内容

节点的内容支持自定义，可以在节点区添加按钮或图标等内容

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

使用 render-content

使用 scoped slot

{{ node.label }} Append Delete

节点过滤

通过关键字过滤树节点

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

手风琴模式

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

可拖拽节点

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

Attributes

参数	说明	类型	可选值	默认值
data	展示数据	array	—	—
empty-text	内容为空的时候展示的文本	String	—	—
node-key	每个树节点用来作为唯一标识的属性，整棵树应该是唯一的	String	—	—
props	配置选项，具体看下表	object	—	—
render-after-expand	是否在第一次展开某个树节点后才渲染其子节点	boolean	—	true
load	加载子树数据的方法，仅当 lazy 属性为true 时生效	function(node, resolve)	—	—
render-content	树节点的内容区的渲染 Function	Function(h, { node, data, store }	—	—
highlight-current	是否高亮当前选中节点，默认值是 false。	boolean	—	false
default-expand-all	是否默认展开所有节点	boolean	—	false
expand-on-click-node	是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。	boolean	—	true
check-on-click-node	是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点。	boolean	—	false
auto-expand-parent	展开子节点的时候是否自动展开父节点	boolean	—	true
default-expanded-keys	默认展开的节点的 key 的数组	array	—	—
show-checkbox	节点是否可被选择	boolean	—	false
check-strictly	在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false	boolean	—	false
default-checked-keys	默认勾选的节点的 key 的数组	array	—	—
current-node-key	当前选中的节点	string, number	—	—
filter-node-method	对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏	Function(value, data, node)	—	—
accordion	是否每次只打开一个同级树节点展开	boolean	—	false
indent	相邻级节点间的水平缩进，单位为像素	number	—	16
item-size	每个节点的高度,单位为像素	number	—	26
icon-class	自定义树节点的图标	string	-	-
lazy	是否懒加载子节点，需与 load 方法结合使用	boolean	—	false
draggable	是否开启拖拽节点功能	boolean	—	false
allow-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. 是否包含半选节点，默认值为 false
setCheckedNodes	设置目前勾选的节点，使用此方法必须设置 node-key 属性	(nodes) 接收勾选节点数据的数组
getCheckedKeys	若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点的 key 所组成的数组	(leafOnly) 接收一个 boolean 类型的参数，若为 true 则仅返回被选中的叶子节点的 keys，默认值为 false
setCheckedKeys	通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性	(keys, leafOnly) 接收两个参数，1. 勾选节点的 key 的数组 2. boolean 类型的参数，若为 true 则仅设置叶子节点的选中状态，默认值为 false
setCheckedAll	虚拟滚动时，快速全选或者清除全选的方法，使用setCheckedKeys可能会卡顿	(checked) 接收一个 boolean 类型的参数，若为 true 则全选所有节点，若为 false 则取消所有节点的选中/半选状态，默认值为 false
setChecked	通过 key / data 设置某个节点的勾选状态，使用此方法必须设置 node-key 属性	(key/data, checked, deep) 接收三个参数，1. 勾选节点的 key 或者 data 2. boolean 类型，节点是否选中 3. boolean 类型，是否设置子节点 ，默认为 false
getHalfCheckedNodes	若节点可被选择（即 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) 待被选节点的 node
getNode	根据 data 或者 key 拿到 Tree 组件中的 node	(data) 要获得 node 的 key 或者 data
remove	删除 Tree 中的一个节点，使用此方法必须设置 node-key 属性	(data) 要删除的节点的 data 或者 node
append	为 Tree 中的一个节点追加一个子节点	(data, parentNode) 接收两个参数，1. 要追加的子节点的 data 2. 子节点的 parent 的 data、key 或者 node
insertBefore	为 Tree 的一个节点的前面增加一个节点	(data, refNode) 接收两个参数，1. 要增加的节点的 data 2. 要增加的节点的后一个节点的 data、key 或者 node
insertAfter	为 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、event
node-drag-enter	拖拽进入其他节点时触发的事件	共三个参数，依次为：被拖拽节点对应的 Node、所进入节点对应的 Node、event
node-drag-leave	拖拽离开某个节点时触发的事件	共三个参数，依次为：被拖拽节点对应的 Node、所离开节点对应的 Node、event
node-drag-over	在拖拽节点时触发的事件（类似浏览器的 mouseover 事件）	共三个参数，依次为：被拖拽节点对应的 Node、当前进入节点对应的 Node、event
node-drag-end	拖拽结束时（可能未成功）触发的事件	共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点（可能为空）、被拖拽节点的放置位置（before、after、inner）、event
node-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.安装插件

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