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示例小程序码