# tui-org-horizontal 组织架构树（横向）V2.2.0+ 会员组件

介绍

组织架构树，横向展示，支持调整节点样式

注意

组件有递归调用，如果uni-app端没有使用easycom组件模式，则需要在组件中引入组件自身。

# 引入

# uni-app引入

第一种，手动引入（可全局引入）

import tuiOrgHorizontal from "@/components/thorui/tui-org-horizontal/tui-org-horizontal.vue"
export default {
	components:{
		tuiOrgHorizontal
	}
}

第二种，开启easycom组件模式，如果不了解如何配置，可先查看官网文档 (opens new window)。

# uni-app版本平台差异说明

App-Nvue	App-vue	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
升级中	✓	✓	✓	✓	✓	✓	✓

# 微信小程序引入（可在app.json中全局引入）

{
  "usingComponents": {
    "tui-org-horizontal": "/components/thorui/tui-org-horizontal/tui-org-horizontal"
  }
}

# 代码演示

部分功能演示，具体可参考示例程序以及文档API。

基础使用

通过 treeData 属性设置组织架构数据，click 方法为点击节点项时触发的事件。

<!--uni-app-->
<scroll-view scroll-x class="tui-scroll__view">
	<tui-org-horizontal :tree-data="treeData" @click="onClick"></tui-org-horizontal>
</scroll-view>

<!--微信小程序-->
<scroll-view scroll-x class="tui-scroll__view">
	<tui-org-horizontal tree-data="{{treeData}}" bindclick="onClick"></tui-org-horizontal>
</scroll-view>

//其中约定属性为：text，children，可通过fields属性来指定字段对应名称，没有下级时需要设置children为空数组
//其他属性可根据需要自行定义
treeData: [{
	text: '组织架构树',
	value: 1,
	children: [{
		text: '多级数据展示',
		value: 101,
		children: []
	}, {
		text: '自定义样式',
		value: 102,
		children: []
	}]
}]

//方法
onClick(e) {
	console.log(e)
}

<style>
	.tui-scroll__view {
		width: 100%;
		height: auto;
	}
</style>

# Slots

插槽名称	说明
-	-

# Props

属性名	类型	说明	默认值
treeData	Array	组织架构数据，数据格式见下方说明	[ ]
fields	Array	约定字段名称，可通过该属性自定义对应名称	['text', 'children']
width	Number, String	节点项宽度，单位rpx，为0则自适应	0
height	Number, String	节点项高度，单位rpx	80
padding	Number, String	节点项左右padding值，单位rpx，不设置宽度是有效	24
radius	Number, String	节点项圆角值，单位rpx	0
background	String	节点项背景色	#fff
size	Number, String	节点项字体大小，单位rpx	32
color	String	节点项字体颜色	#000
borderColor	String	节点项边框颜色	#555
lineWidth	Number, String	水平连接线条长度，单位rpx，通过该属性可调整水平方向间距	88
lineColor	String	连接线条颜色	#555
gap	Number, String	调整内容垂直方向间距，单位rpx	40

//treeData 数据结构说明 text与children为约定属性【可通过props => fields属性自定义对应名称】，其他属性可自行定义
treeData: [{
	//显示文本
	text: '组织架构树',
	//子节点
	children: [{
		//显示文本
		text: '多级数据展示',
		//子节点
		children: []
	}, {
		//显示文本
		text: '自定义样式',
		//子节点
		children: []
	}]
}]

# Events

注：uni-app端绑定事件使用@前缀，如@click；微信小程序原生使用bind前缀，如bindclick

事件名	说明	回调参数
click	点击节点项时触发	{ e: 节点对象数据 }

# 预览

请以移动端效果为准，touch事件目前尚未在PC端做兼容。

# 特别说明

该组件为 会员组件，非开源内容，需开通会员才可获取使用。

# 线上程序扫码预览


ThorUI组件库小程序码	H5二维码	ThorUI示例小程序码

← tui-org-tree 组织架构树 tui-row 24栅格化布局 →