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.vue"
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

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

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

预览

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

特别说明

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

线上程序扫码预览

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