# tui-org-tree 组织架构树
介绍
组织架构树:简单展示,可自定义节点样式。
注意
1、该组件需要依赖组件 tui-org-node
使用,uni-app端默认使用的是easycom组件模式,如果使用时你选择手动引入,则需要在 tui-org-tree
组件中手动引入 tui-org-node
组件。
2、tui-org-node
组件为递归调用,如果uni-app端没有使用easycom组件模式,则需要在组件中引入组件自身。
# 引入
# uni-app引入
第一种,手动引入(可全局引入)
import tuiOrgTree from "@/components/thorui/tui-org-tree/tui-org-tree.vue"
export default {
components:{
tuiOrgTree
}
}
第二种,开启easycom组件模式,如果不了解如何配置,可先查看 官网文档 (opens new window)。
# uni-app版本平台差异说明
App-Nvue | App-vue | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|---|
升级中 | √ | √ | √ | √ | √ | √ | √ |
# 微信小程序引入(可在app.json中全局引入)
{
"usingComponents": {
"tui-org-tree": "/components/thorui/tui-org-tree/tui-org-tree"
}
}
# 代码演示
部分功能演示,具体可参考示例程序以及文档API。
基础使用
通过 treeData
属性设置组织架构数据,数据格式参考下方数据示例,其中数据中约定且必须的属性为 text 和 children。
<!--uni-app-->
<tui-org-tree :treeData="treeData" @click="handleClick"></tui-org-tree>
<!--微信小程序-->
<tui-org-tree treeData="{{treeData}}" bindclick="handleClick"></tui-org-tree>
//其中约定属性为:text,children,没有下级时需要设置children为空数组
//其他属性可根据需要自行定义
treeData: [{
text: '组织架构树',
value: 1,
//vertical,horizontal 为空则自适应排列
align: '',
children: [{
text: '多级数据展示',
value: 101,
page: '../org-tree_default/org-tree_default',
children: []
}, {
text: '自定义样式',
value: 102,
page: '../org-tree_style/org-tree_style',
children: []
}]
}]
修改节点样式
如果需要调整节点样式,可通过以下变量进行设置,在页面css中参考示例定义以下变量即可。
其中变量名为约定值,仅可自定义变量值。
page {
--tui-line-color: #f74d54; /*连接线条颜色*/
--tui-org-label-size:30rpx; /*label字体大小*/
--tui-org-label-color: #fff; /*label字体颜色*/
--tui-org-label-padding:16rpx; /*labelpadding值*/
--tui-org-label-bgcolor: #f74d54; /*label背景颜色*/
--tui-org-label-border: 1px solid #f74d54; /*label border样式*/
--tui-org-label-radius: 0; /*label圆角*/
--tui-org-label-weight:500; /*label字体粗细*/
/*以下为V1.6.5(ThorUI示例V1.1.0)新增*/
--tui-org-active-bgcolor:#5677fc; /*节点选中后背景色*/
--tui-org-active-color:#fff;/*节点选中后字体颜色*/
--tui-org-active-border:1px solid #5677fc;/*节点选中后border样式*/
--tui-org-label-width:20px;/*label节点宽度,当text纵向排列时使用*/
--tui-collapsable-sign-bgcolor:#fff;/*+加号容器背景色*/
--tui-collapsable-sign-border:1px solid #555;/*+加号容器border样式*/
--tui-collapsable-sign-color:#555;/*+加号颜色*/
}
# Slots
名称 | 说明 |
---|---|
- | - |
# Props
参数 | 类型 | 说明 | 默认值 |
---|---|---|---|
treeData | Array | 组织架构数据,数据格式参考文档代码演示部分或者示例 | [ ] |
collapsibleV1.6.5 | Boolean | 是否可折叠(收起展开) | false |
# Events
事件名 | 说明 | 回调参数 |
---|---|---|
click | 点击label节点时触发 | { e: 节点对象数据 } |
# 预览
请以移动端效果为准,touch事件目前尚未在PC端做兼容。
# 线上程序扫码预览
![]() | ![]() | ![]() |
---|---|---|
ThorUI组件库小程序码 | H5二维码 | ThorUI示例小程序码 |