手册版本 V5.0
组件名称
gui-tree : /graceUI/组件目录/gui-tree
兼容平台
| H5 | APP | 小程序 | NVUE |
| ✔ | ✔ | ✔ | ✔ |
组件属性
| 属性名称 | 类型 | 默认值 | 作用 |
| trees | Array | [] | 组件列表信息数据 |
| indent | Number | 28 | 每个层级的缩进距离，单位rpx |
| type | String | text | 组件类型, text : 文本展示 , radio : 单选形式, checkbox : 复选形式 |
| isIcon | Boolean | true | 文本形式时是否展示横线图标 |
| checkedId | [String, Number] | -1 | 单选默认选中 id |
| checkedIds | Array | [] | 复选选中的 id 集合 |
| allCanCheck | Boolean | true | 是否全部选项都可以点击选择， 如果设置false则只有子集才能选择 |
| isFold | Boolean | true | 文本模式下是否开启收缩/展开功能 [ 2020.07.27 新增 ] |
组件事件
01. taped
携带数据 : 被点击选项的索引关系，利用它完成 :
1.1 文本形式 : 获取点击数据
1.2 选择形式 : 获取点击数据更新选中 id
演示说明
01. 演示代码为您封装好了选项获取相关的函数，可以方便地获取选中信息，同时也是非常不错的递归函数学习资料 （:
02. 演示代码实现了多种模式的切换，您在应用时选择一种即可，代码会简化很多;
03. 文本形式下点击项目前面的图标进行层级收缩及展示；
皮肤样式
您可以通过修改对应的皮肤样式，来进一步修改组件的颜色、尺寸等 :
/* *** 树状列表样式 */
.gui-tree-icons{width:50rpx;} /* 图标样式 */
.gui-tree-icons-text{font-size:32rpx; color:rgba(69, 90, 100, 0.3);}
.gui-tree-title{line-height:80rpx; font-size:28rpx; width:200rpx;} /* 标题样式 */
.gui-tree-current{color:#2B2E3D;} /* 选中样式 */
/* 树状列表样式 *** */演示代码
UNI 普通版本
NVUE 版本
登录并购买 GraceUI 后可以查阅完整手册内容 。
