# tui-tree-view 树型菜单

介绍

树型菜单:可收起展开,自定义内容,图标等。根据约定的数据结构传入数据即可。

注意

1、该组件需要依赖组件 tui-tree-node 使用,uni-app端默认使用的是easycom组件模式,如果使用时你选择手动引入,则需要在 tui-tree-node 组件中手动引入 tui-tree-node组件。

2、tui-tree-node 组件为递归调用,如果uni-app端没有使用easycom组件模式,则需要在组件中引入组件自身。

# 引入

# uni-app引入

第一种,手动引入(可全局引入)

import tuiTreeView from "@/components/thorui/tui-tree-view/tui-tree-view"
export default {
	components:{
		tuiTreeView
	}
}

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

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

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

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

{
  "usingComponents": {
    "tui-tree-view": "/components/thorui/tui-tree-view/tui-tree-view"
  }
}

# 代码演示

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

基础使用

通过 treeData 属性设置组织架构数据,数据格式参考下方数据示例。

<!--uni-app-->
<tui-tree-view :treeData="treeData" @click="onClick"></tui-tree-view>

<!--微信小程序-->
 <tui-tree-view treeData="{{treeData}}" bindclick="onClick"></tui-tree-view>
//其中约定属性为:text,value,src,activeSrc,collapsed,children,没有下级时需要设置children为空数组
//其他属性可根据需要自行定义
treeData: [{
	text: 'ThorUI',
	value: 1,
	src: '/static/components/treeview/folder.png',
	activeSrc: '/static/components/treeview/folder_open.png',
	collapsed: false,
	children: [{
		text: 'tui-actionsheet',
		value: 100,
		src: '/static/components/treeview/folder.png',
		activeSrc: '/static/components/treeview/folder_open.png',
		collapsed: false,
		children: [{
			text: 'tui-actionsheet.html',
			value: 100100,
			src: '/static/components/treeview/html.png'
		}, {
			text: 'tui-actionsheet.js',
			value: 100200,
			src: '/static/components/treeview/js.png'
		}, {
			text: 'tui-actionsheet.css',
			value: 100300,
			src: '/static/components/treeview/css.png'
		}, {
			text: 'tui-actionsheet.json',
			value: 100400,
			src: '/static/components/treeview/json.png'
		}]
	}, {
		text: 'tui-alert',
		value: 200,
		src: '/static/components/treeview/folder.png',
		activeSrc: '/static/components/treeview/folder_open.png',
		children: [{
			text: 'tui-alert.html',
			value: 200100,
			src: '/static/components/treeview/html.png'
		}, {
			text: 'tui-alert.js',
			value: 200200,
			src: '/static/components/treeview/js.png'
		}, {
			text: 'tui-alert.css',
			value: 200300,
			src: '/static/components/treeview/css.png'
		}, {
			text: 'tui-alert.json',
			value: 200400,
			src: '/static/components/treeview/json.png'
		}]
	}, {
		text: 'tui-badge',
		value: 300,
		src: '/static/components/treeview/folder.png',
		activeSrc: '/static/components/treeview/folder_open.png',
		children: [{
			text: 'tui-badge.html',
			value: 300100,
			src: '/static/components/treeview/html.png'
		}, {
			text: 'tui-badge.js',
			value: 300200,
			src: '/static/components/treeview/js.png'
		}, {
			text: 'tui-badge.css',
			value: 300300,
			src: '/static/components/treeview/css.png'
		}, {
			text: 'tui-badge.json',
			value: 300400,
			src: '/static/components/treeview/json.png'
		}]
	}, {
		text: 'tui-pagination',
		value: 400,
		src: '/static/components/treeview/folder.png',
		activeSrc: '/static/components/treeview/folder_open.png',
		children: [{
			text: 'tui-pagination.html',
			value: 400100,
			src: '/static/components/treeview/html.png'
		}, {
			text: 'tui-pagination.js',
			value: 400200,
			src: '/static/components/treeview/js.png'
		}, {
			text: 'tui-pagination.css',
			value: 400300,
			src: '/static/components/treeview/css.png'
		}, {
			text: 'tui-pagination.json',
			value: 400400,
			src: '/static/components/treeview/json.png'
		}]
	}, {
		text: 'tui-waterfall',
		value: 500,
		src: '/static/components/treeview/folder.png',
		activeSrc: '/static/components/treeview/folder_open.png',
		children: [{
			text: 'tui-waterfall.html',
			value: 500100,
			src: '/static/components/treeview/html.png'
		}, {
			text: 'tui-waterfall.js',
			value: 500200,
			src: '/static/components/treeview/js.png'
		}, {
			text: 'tui-waterfall.css',
			value: 500300,
			src: '/static/components/treeview/css.png'
		}, {
			text: 'tui-waterfall.json',
			value: 500400,
			src: '/static/components/treeview/json.png'
		}]
	}, {
		text: 'tui-tabbar',
		value: 600,
		src: '/static/components/treeview/folder.png',
		activeSrc: '/static/components/treeview/folder_open.png',
		children: [{
			text: 'tui-tabbar.html',
			value: 600100,
			src: '/static/components/treeview/html.png'
		}, {
			text: 'tui-tabbar.js',
			value: 600200,
			src: '/static/components/treeview/js.png'
		}, {
			text: 'tui-tabbar.css',
			value: 600300,
			src: '/static/components/treeview/css.png'
		}, {
			text: 'tui-tabbar.json',
			value: 600400,
			src: '/static/components/treeview/json.png'
		}]
	}, {
		text: 'tui-switch',
		value: 700,
		src: '/static/components/treeview/folder.png',
		activeSrc: '/static/components/treeview/folder_open.png',
		children: [{
			text: 'tui-switch.html',
			value: 700100,
			src: '/static/components/treeview/html.png'
		}, {
			text: 'tui-switch.js',
			value: 700200,
			src: '/static/components/treeview/js.png'
		}, {
			text: 'tui-switch.css',
			value: 700300,
			src: '/static/components/treeview/css.png'
		}, {
			text: 'tui-switch.json',
			value: 700400,
			src: '/static/components/treeview/json.png'
		}]
	}, {
		text: 'tui-picker',
		value: 800,
		src: '/static/components/treeview/folder.png',
		activeSrc: '/static/components/treeview/folder_open.png',
		children: [{
			text: 'tui-picker.html',
			value: 800100,
			src: '/static/components/treeview/html.png'
		}, {
			text: 'tui-picker.js',
			value: 800200,
			src: '/static/components/treeview/js.png'
		}, {
			text: 'tui-picker.css',
			value: 800300,
			src: '/static/components/treeview/css.png'
		}, {
			text: 'tui-picker.json',
			value: 800400,
			src: '/static/components/treeview/json.png'
		}]
	}]
}]

修改节点样式

如果需要调整节点样式,可通过以下变量进行设置,在页面css中参考示例定义以下变量即可。

其中变量名为约定值,仅可自定义变量值。

page {
	--tui-treeview-label-padding: 10px 15px;  /*节点padding值*/
	--tui-treeview-label-border:0; /*节点border*/
	--tui-treeview-label-margin:0;/*节点margin*/
	--tui-treeview-label-radius:0;/*节点圆角值*/
	--tui-treeview-label-bgcolor:transparent;/*节点背景色*/
	--tui-treeview-label-color:#000;/*节点文本颜色*/
	--tui-treeview-label-size:15px;/*节点文本大小*/
	--tui-treeview-icon-width:20px;/*节点图标宽度*/
	--tui-treeview-icon-height:20px;/*节点图标高度*/
	--tui-treeview-icon-mr:8px;/*节点图标 margin-right值*/
	--tui-treeview-children-pl:30px;/*子节点padding-left值*/
    --tui-treeview-triangle-bt:6px;/*三角箭头border-top宽度*/
	--tui-treeview-triangle-bl:8px;/*三角箭头border-left宽度*/
	--tui-treeview-triangle-mr:10px;/*三角箭头margin-right*/
}

# Slots

名称 说明
- -

# Props

参数 类型 说明 默认值
treeData Array 树型菜单数据,数据格式参考文档代码演示部分或者示例 [ ]
collapsible Boolean 是否可折叠 true
triangle Boolean 是否显示三角箭头 true

# Events

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

# 预览

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

# 线上程序扫码预览

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