账户中心 退出系统
使用手册 模板中心 账户中心
快速开始
常见问题
更新日志
下载框架
快速部署
组件调用手动调用
自动加载easycom
NVUE 说明
版权要求
设计规范初版
基础布局 ( 6 )
页面布局从这开始哦 (:
Flex布局组件形式
Flex布局样式形式
竖向切换动态切换
元素定位Absolute
手势识别滑动距离、方向
基础样式 ( 8 )
文本颜色
背景样式
阴影效果
圆角边框
文本样式
内置图标
图标扩展
样式动画
常用布局 ( 23 )
宫格布局 九宫格
头部导航
底部导航
切换导航 单行模式
切换导航 多行模式
吸顶容器
动态吸顶
名片卡片
滚动区域
局部选项卡
全屏选项卡 模式一原理演示
全屏选项卡 模式二原理演示
全屏选项卡 实战演示
分段切换
折叠面板
普通表格
数据表格
分类展示
横向公告
返回顶部
时间轴
侧边抽屉
图标分类
常用列表 ( 9 )
通用列表
滑动列表 新版组件模式
新闻列表
评论列表
图文列表
树状列表
拖拽排序 竖向
可选列表 单选 | 多选
全选列表 多选 | 全选
常用组件 ( 26 )
徽章组件
圆角组件
标签组件
滚动公告
无缝滚动
按钮组件
进度按钮
搜索组件
星级评价
通用标题 更多、换一批
倒计时
轮播组件 新版本 更好用
轮播组件 原生模式
区间滑块
进度圆环
城市选择
地区联动 新版本 更灵活
步骤提示
链接组件
优惠券组件
为空展示
图片选择
多图上传
头像群组
数值动画
PK 投票
刷新与加载 ( 5 )
加载组件
全屏加载
下拉刷新 原生模式
刷新组件 滚动区域模拟模式
上拉加载 原生模式
提醒弹框 ( 9 )
遮罩弹出层
顶部消息框
模态对话框
底部对话框
底部消息框
底部操作表
右下消息框
弹出菜单
功能菜单
表单相关 ( 12 )
表单元素
表单验证
动态表单
分步提交
数值框
数字键盘
可选标签 单选 多选
可选标签 携带数据
可删标签
点选按钮
下拉选择
滑动解锁
日期时间 ( 6 )
日期及时间 带有农历
日期区间 日历形式
日期及时间 pickr模式
时间段选择 pickr模式
日程日历 日历+日程
横向日期
文章相关 ( 4 )
文本编辑器
编辑器解析
富文本加强
展开全文
JS 函数库 ( 6 )
工具介绍
时间转换
网络请求
随机数值
md5 转换
使用 promise
系统信息
地图使用 ( 3 )
位置标注 位置转换
周边信息 周边搜索
拖拽定位 中心坐标
常用界面 ( 21 )
搜索界面
登录注册
个人中心
头像裁剪
购物车
订单中心
条件筛选
商品详情
图片懒加载
骨架加载
抽奖活动
瀑布流
地址列表
添加地址
证件上传
滚动推荐
短信验证
排行榜
数据图表
商城套装
即时通讯
树状列表

组件名称

graceTree : /graceUI/组件目录/graceTree

功能描述

01. 自动无限层级;
02. 文本展示、单选、多选模式;
03. 提供完整的数据获取方法;
04. 如果数据来自 api 请求,请使用 if 保证请求数据完成后再创建组件,详见演示代码;

功能描述

属性名称类型默认值作用
treesArray[]组件列表信息数据
indentNumber28
每个层级的缩进距离,单位rpx
lineHeightString
80rpx数据行高
fontSizeString28rpx文本大小
fontColorString#323232文本颜色
typeStringtext组件类型, text : 文本展示 , radio : 单选形式, checkbox :  复选形式
isIconBooleantrue文本形式时是否展示横线图标
iconSizeString30rpx
单选、多选图标尺寸
checkedId[String, Number]-1单选默认选中 id
checkedIdsArray[]复选选中的 id 集合
checkedColorString#3688FF选中后图标的颜色
allCanCheckBooleantrue是否全部选项都可以点击选择,
如果设置false则只有子集才能选择
isFoldBooleantrue文本模式写是否开启收缩/展开功能 [ 2020.07.27 新增 ]

组件事件

01. taped
携带数据 : 被点击选项的索引关系,利用它完成 :
1.1 文本形式 : 获取点击数据
1.2 选择形式 : 获取点击数据更新选中 id

演示说明

01. 演示代码为您封装好了选项获取相关的函数,可以方便地获取选中信息,同时也是非常不错的递归函数学习资料 (:
02. 演示代码实现了多种模式的切换,您在应用时选择一种即可,代码会简化很多;

演示代码

UNI 普通版本
NVUE 版本
微信小程序独立版本
登录并购买 GraceUI 后可以查阅完整手册内容 。