# 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 属性设置组织架构数据,数据格式参考下方数据示例,其中数据中约定且必须的属性为 textchildren

<!--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示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码