## 引用样例


``` javascript
<template>
	<view class="vrapile-content-001">
		<view class="vrapile-content-001-tree">
			<vrapile-tree ref="vrapileTreeRef" :defaultProps="defaultProps" 
				:data="treeList" :divider="true" :unfold="true"
				:edit="true" @node-click="nodeClick" @add-item="addNode" 
				@edit-item="editNode" @long-press="longPressNode">
			</vrapile-tree>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				treeList: [
					{ id: "A01", parentId: "0", label: "A01-全部", name: "全部", level: 1, lastFlag: 0, orderNum: 1, children: [
						{ id: "A01001", parentId: "A01", label: "A01001-架构师题库", name: "架构师题库", level: 2, lastFlag: 0, orderNum: 1, children: [
							{ id: "A01001001", parentId: "A01001", label: "A01001001-题库一", name: "题库一", level: 3, lastFlag: 1, orderNum: 11, children: []},
							{ id: "A01001002", parentId: "A01001", label: "A01001002-题库二", name: "题库二", level: 3, lastFlag: 1, orderNum: 12, children: []}
						]},
						{ id: "A01003", parentId: "A01", label: "A01003-大数据AI题库", name: "大数据AI题库", level: 2, lastFlag: 0, orderNum: 13, children: [
							{ id: "A01003001", parentId: "A01003", label: "A01003001-题库一", name: "题库一", level: 3, lastFlag: 1, orderNum: 1, children: []}
						]},
						{ id: "A01004", parentId: "A01", label: "A01004-驾照考试题库", name: "驾照考试题库", level: 2, lastFlag: 0, orderNum: 4, children: []},
					]}
				],
				
				defaultProps: { id: "id", children: "children", label: "name" },
			};
		},	
		onShow(){
		},
		methods: {
			//节点单击事件
			nodeClick(e) {
				console.log("单击事件：" + JSON.stringify(e))
			},
			//节点新增点击事件
			addNode(e) {
				console.log("新增按钮点击事件：" + JSON.stringify(e))
			},
			//节点修改点击事件
			editNode(e) {
				console.log("修改按钮点击事件：" + JSON.stringify(e))
			},
			//节点长按事件
			longPressNode(e) {
				console.log("长按事件：" + JSON.stringify(e))
			},
		}
	};
</script>
<style scoped lang="scss">
	.vrapile-content-001{
		padding: 0;
		margin: 0;
		width: 750rpx;
		height: calc(100vh - 0px);
		background-color: #fff;
		display: flex;
		flex-direction: column;
	}
	.vrapile-content-001-tree{
		padding: 0rpx 10rpx 30rpx 10rpx;
		background-color: #ffffff;
		flex: 1;
		overflow-y: auto;
	}
</style>
```
<br >

## 功能说明


* 入参 *data* ：非必传，树数据结构列表，默认 *[]*

* 入参 *defaultProps* ：非必传，Json格式，关键字段对照，默认 *{ id: 'id', children: 'children', label : 'label' }*
``` javascript
    如：部门树，主键deptId、名称deptName、子集child，则defaultProps需设为：

    { id: "deptId", label : "deptName", children: "child" }
```


* 入参 *divider* ：非必传，分隔线，默认 *false*

* 入参 *unfold* ：非必传，是否展开，默认 *false*

* 入参 *edit* ：非必传，是否显示按钮，默认 *false*

* 函数 *node-click* ：单击，内容是Json数据体

* 函数 *add-item* ：添加按钮，内容是Json数据体

* 函数 *edit-item* ：编辑按钮，内容是Json数据体

* 函数 *long-press* ：长按，内容是Json数据体

<br >

  注：<font color="red">所有入参和函数都是非必传，用到哪个实现哪个即可</font>
<br >
<br >

## 演示说明

以下所有工程共用一个后端，账号互通
<font color="gray">（ *皆可用访客账号/密码：visitor/visitor* ）</font>

演示Demo：
<a href="https://www.ninecloud.top/udemo/tree/index.html" target="_blank">https://www.ninecloud.top/udemo/tree/index.html</a>

演示微信小程序：
<font color="gray">*九云题库*</font>

<img src="https://fs.ninecloud.top/uniapp/uquestion/qrcode.png" width="300">