2.4 在组件HTML中编写代码

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

2.5 效果展示

3 zTree基本功能

3.1 不显示连接线

3.1.1 官方文档

不显示标题之间的连接线

3.1.2 编程步骤

在基本配置对象中指定showLine属性的值为false即可

 setting = {
 data: {
 simpleData: {
 enable: true
 }
 },
 view: {
 showLine: false
 }
 };

3.2 不显示节点图标

3.2.1 官方文档

去掉节点前面的图标

3.2.2 编程步骤

将基本配置对象的showIcon属性设为false即可

setting = {
 data: {
 simpleData: {
 enable: true
 }
 },
 view: {
 showLine: false,
 showIcon: false
 }
 };

3.3 自定义节点图标

3.3.1 官方文档

更改节点的图标

3.3.2 编程步骤

为treeNode节点数据设置icon/iconOpen/iconClose属性即可

3.4 自定义字体

3.4.1 官方文档

更改节点字体的样式

3.4.2 编程步骤

为treeNode节点数据设置font属性即可，font属性的值是一个对象，该对象的内容和style的数据一样

3.4.3 效果展示

3.5 超链接

3.5.1 官方文档

点击节点标题就会自动跳转到对应的url

注意01：click属性只能进行最简单的 click 事件操作。相当于 的内容。 如果操作较复杂，请使用 onClick 事件回调函数。

3.5.2 编程步骤

为treeNode节点数据设置url、click属性即可

技巧01：设置click属性时，属性值必须是一些简单的onClick事件

技巧02：设置target属性时，属性值有 _blank 和 _self

_blank -> 用一个新窗口打开

_self -> 在原来的窗口打开