在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完成(希望对你有帮助)
根据 UI 的出图 来,主要是 内部基本使用的 是 elementUI 的框架,所以设计的样式就与其类似和靠近
主要介绍 js 部分的修改,css 相对要修改比较简单。
在 jquery.ztree.core-3.5.js 文件中进行修改。先了解一下渲染的步骤,以及关键需要修改的地方:
将 ul 的 padding 取消掉
配合 css :
如果有帮助到你,可以给我一个赞嘛 * !!!