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

html-css016

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

使用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完成(希望对你有帮助)

根据 UI 的出图 来,主要是 内部基本使用的 是 elementUI 的框架,所以设计的样式就与其类似和靠近

主要介绍 js 部分的修改,css 相对要修改比较简单。

在 jquery.ztree.core-3.5.js 文件中进行修改。先了解一下渲染的步骤,以及关键需要修改的地方:

将 ul 的 padding 取消掉

配合 css :

如果有帮助到你,可以给我一个赞嘛 * !!!