在vue中使用ztree树形组件，如何将ztree图片,改成字体图标呢？求解答？求思路？

使用npm install jquery –save 在项目中安装ztree依赖文件 jquery

在index.html里面引用ztree样式文件zTreeStyle.css（前面的图标可以自定义可以参考官网）

3.在项目中引入ztree文件，在main.js中引入

网上给的资料是在这里同时引入jquery；但是项目中引入 报错

import from‘jquery′−在你的zTree.vue单文件中引入importfrom‘jquery′−在你的zTree.vue单文件中引入import from ‘jquery’

4.在template中创建盒子,一定要给盒子相应的高度

<div class="tree-box" >

<ul id="treeDemo" class="ztree" ></ul>

</div>

5.在 .vue文件中data配置setting 树，以及定义存放数据的zNodes

6.使用axios 后台请求数据,下图使用请求方式是封装好的

ok完成（希望对你有帮助）

Vue Element UI的Tree组件在加载大量节点时会出现明显的卡顿，电脑配置差点更是难受。即使使用懒加载，即每展开父节点再去加载子节点，若字节点数目同样众多，Tree组件在使用过程中依旧卡顿。这里提供一个jquery的方案，使用zTree替代Element UI的Tree组件，让树组件使用非常流畅。

因为树节点数目众多，使用zTree依旧延续展开父节点再去加载子节点的方式。

zTree： http://www.treejs.cn/v3/main.php#_zTreeInfo 。首先是zTree的标签：

参照zTree官方文档，配置zTree的setting：

展开父节点加载对应的子节点：

接下来设置滚动条。这里用到了vuescroll组件： https://vuescrolljs.yvescoding.org/zh/guide/

父节点的勾选状态有三种：勾选、半选（即只有部分子节点选中）、不勾选。

父节点勾选，则新加载的子节点全部勾选。

记录checkArray、pathArray

是。uniapp端不支持组件分离引用，因此无法引用ztree。uniapp是一个使用Vuejs开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web、以及各种小程序、快应用等多个平台。

---