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>

// data 数据 及 方法
export default {
 data() {
 	return {
 		//其中约定属性为：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: []
 			}]
 		}]
 	}
 },
 methods: {
 	handleClick(e) {
 		console.log(e)
 		let url = e.page;
 		if (url) {
 			console.log(url)
 			// this.tui.href(url)
 		} else {
 			console.log('点击子级标签进入内页~')
 		}
 	},
 }
}

<!--微信小程序-->
<tui-org-tree treeData="{{treeData}}" bindclick="handleClick"></tui-org-tree>

// data 数据 及 方法
Page({
  data: {
    //其中约定属性为：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: []
    	}]
    }]
  },
  handleClick(e) {
      console.log(e)
      let url = e.detail.page;
      if (url) {
 		console.log(url)
      } else {
        tui.toast('点击子级标签进入内页~')
      }
   }
})

// Make sure to add code blocks to your code group

修改节点样式

如果需要调整节点样式，可通过以下变量进行设置，在页面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	组织架构数据，数据格式参考文档代码演示部分或者示例	[ ]
collapsible V1.6.5+	Boolean	是否可折叠（收起展开）	false
fields V2.2.0+	Array	约定字段名称，可通过该属性自定义对应名称	['text', 'children']

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

Events

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

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

预览

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

特别说明

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

线上程序扫码预览

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