Tree 树组件

该组件用于树结构数据的单选/多选

打开该组件会创建遮罩层，阻止用户页面上其他操作。

基本使用

• 通过visible参数配置是否显示树选择器
• 支持v-model双向数据绑定
• 通过props参数自定义节点属性字段名称

<template>

<u-tree
	v-model='key'
	:visible.sync='visible'
	:data='treeData'
	:props="{
		'key': 'id',
		'label': 'name'
	}"
	@submit='submit'
	@cancel='cancel'>
</u-tree>
</template>

<script>
	export default {
		data() {
			return {
				treeData: []
			}
		},
		created() {
			this.initTreeData()
		},
		methods: {
			initTreeData () {
				const treeData = []
				for (let i = 0;i <3;i++) {
					const data = []
					for (let j = 0;j <3;j++) {
						const sData = []
						for (let k = 0;k <3;k++) {
							const subData = []
							for (let l = 0;l <3;l++) {
								const subKey = i.toString() + '-' + j.toString() + '-' + k.toString() + '-' + l.toString()
								subData.push({
									id: subKey,
									name: '站点' + subKey
								})
							}
							const sKey = i.toString() + '-' + j.toString() + '-' + k.toString()
							sData.push({
								id: 'site' + sKey,
								name: '站点' + sKey
							})
							sData.push({
								id: sKey,
								name: '区域' + sKey,
								children: subData
							})
						}
						const key = i.toString() + '-' + j.toString()
						data.push({
							id: key,
							name: '区域' + key,
							children: sData
						})
					}
					const treeKey = i.toString()
					treeData.push({
						id: treeKey,
						name: '区域' + treeKey,
						children: data
					})
				}
				this.treeData = treeData
			},
			submit (value) {
				console.log(value)
			},
			cancel () {
				console.log('cancel')
			}
		}
	}
</script>

单选模式

• 将multiple参数置为false开启单选模式

<template>

<u-tree
	v-model='key'
	:visible.sync='visible'
	:data='treeData'
	:props="{
		'key': 'id',
		'label': 'name'
	}"
	:multiple='false'
	@submit='submit'
	@cancel='cancel'>
</u-tree>
</template>

<script>
	export default {
		data() {
			return {
				treeData: []
			}
		},
		created() {
			this.initTreeData()
		},
		methods: {
			initTreeData () {
				const treeData = []
				for (let i = 0;i <3;i++) {
					const data = []
					for (let j = 0;j <3;j++) {
						const sData = []
						for (let k = 0;k <3;k++) {
							const subData = []
							for (let l = 0;l <3;l++) {
								const subKey = i.toString() + '-' + j.toString() + '-' + k.toString() + '-' + l.toString()
								subData.push({
									id: subKey,
									name: '站点' + subKey
								})
							}
							const sKey = i.toString() + '-' + j.toString() + '-' + k.toString()
							sData.push({
								id: 'site' + sKey,
								name: '站点' + sKey
							})
							sData.push({
								id: sKey,
								name: '区域' + sKey,
								children: subData
							})
						}
						const key = i.toString() + '-' + j.toString()
						data.push({
							id: key,
							name: '区域' + key,
							children: sData
						})
					}
					const treeKey = i.toString()
					treeData.push({
						id: treeKey,
						name: '区域' + treeKey,
						children: data
					})
				}
				this.treeData = treeData
			},
			submit (value) {
				console.log(value)
			},
			cancel () {
				console.log('cancel')
			}
		}
	}
</script>

所有节点可选

• mustLeaf参数表明是否仅可选叶子节点

<template>

<u-tree
	v-model='key'
	:visible.sync='visible'
	:data='treeData'
	:props="{
		'key': 'id',
		'label': 'name'
	}"
	:mustLeaf='false'
	@submit='submit'
	@cancel='cancel'>
</u-tree>
</template>

<script>
	export default {
		data() {
			return {
				treeData: []
			}
		},
		created() {
			this.initTreeData()
		},
		methods: {
			initTreeData () {
				const treeData = []
				for (let i = 0;i <3;i++) {
					const data = []
					for (let j = 0;j <3;j++) {
						const sData = []
						for (let k = 0;k <3;k++) {
							const subData = []
							for (let l = 0;l <3;l++) {
								const subKey = i.toString() + '-' + j.toString() + '-' + k.toString() + '-' + l.toString()
								subData.push({
									id: subKey,
									name: '站点' + subKey
								})
							}
							const sKey = i.toString() + '-' + j.toString() + '-' + k.toString()
							sData.push({
								id: 'site' + sKey,
								name: '站点' + sKey
							})
							sData.push({
								id: sKey,
								name: '区域' + sKey,
								children: subData
							})
						}
						const key = i.toString() + '-' + j.toString()
						data.push({
							id: key,
							name: '区域' + key,
							children: sData
						})
					}
					const treeKey = i.toString()
					treeData.push({
						id: treeKey,
						name: '区域' + treeKey,
						children: data
					})
				}
				this.treeData = treeData
			},
			submit (value) {
				console.log(value)
			},
			cancel () {
				console.log('cancel')
			}
		}
	}
</script>

API

Props

参数	说明	类型	默认值	可选值
theme FPI	主题模式，普通模式normal，关怀模式care	String	normal	care
v-model/value	选中节点key值，多选模式下，；类型为数组，单选模式下，类型为数字或者字符串	String, Number, Array	[]	-
data	树结构数据	Array	[]
visible	组件是否可见	Boolean	false
props	自定义节点属性	Object	{ label: 'label', key: 'key', children: 'children' }
mustLeaf	仅叶子节点可选	Boolean	true
multiple	是否多选	Boolean	true
can-submit	是否可以提交	Boolean	true
can-submit-null-data	是否可以提交空数组	Boolean	false
confirmText	'确定', 文字	string	-	确定
cancelText	'取消', 文字	string	-	取消

Events

事件名	说明	回调参数
node-click	点击树节点的回调	data: 点击的节点,index：点击的树结构的层级。父节点为 0
submit	点击确定的回调	value: 选中的节点key
cancel	点击取消的回调	--