el-tree树状的使用

研究了一下elementUi框架里的tr-tree的用法。趁着现在还有些头热，先记下我所学习到的内容吧。
el-tree在实际工作中使用还是蛮多的，比如权限控制，商品无限级分类……都会用上它。（最终的效果如下图所示）

//树结构如下
let arr = [{
		value: 1,
		label: '中国',
		children: [{
				value: 3,
				label: '广东',
				children: [{
					value: 5,
					label: '广州'
				}, {
					value: 6,
					label: '梅州',
					children: [{
						value: 90,
						label: '五华'
					}]
				}, ]
			},
			{
				value: 4,
				label: '广西',
				children: [{
					value: 9,
					label: '柳州'
				}]
			}
		]
	},
	{
		value: 2,
		label: '日本'
	}
],

<!--data="treeObj.optionList"   不用多说，就是后端返回的数据，是一个树状数据-->
<!--props="defaultProps"	用来定义data数据里的哪个字段用来做el-tree的children属性，以及label显示的是data数据里的哪个字段-->
<!--node-key	每个树节点用来做为唯一的标识属性，可以简单理解为el-tree 树的id值 -->
<!--check-strictly	表示在显示复选框的情况下，是否严格的遵循父子不互相关联的做法,布尔值-->
<!--check-strictly true，选子组的时候，父级不会关联，而false,选子组的时候，父组也会被选中-->

<!--default-expand-all	是否展开所有，加上这个属性就是展开所有级-->
<!--default-checked-keys 默认选中的id值，是一个数组。当 check-strictly 设为 false时，它会自动沟选父组的框-->
<!--show-checkbox	是否为复选框状态-->
<!--highlight-current	 高亮状态【我本人还没有研究透】-->
<!--treeNodeClick	选中节点时的执行方法-->
<!--filter-node-method	过滤，一般结合 el-input 使用。是一个函数 -->
<template>
	<view class="">
		<view class="myTree">
			<el-input placeholder="请输入节点名称搜索" v-model="filterText"></el-input>
			<el-tree
			  class="filter-tree"
			  :data="treeObj.optionList"
			  :props="defaultProps"        
			  node-key="value"
			  :check-strictly="false"
			  default-expand-all
			  :default-checked-keys="defaultCheckedKeys"
			  show-checkbox
			  :highlight-current='true' 
			  @check="treeNodeClick"
			  :filter-node-method="filterNode"
			  ref="tree">
			</el-tree>
			<u-button type="primary" @click="subTree">确定</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				defaultCheckedKeys:[],
				treeObj:{optionList:arr},
				filterText: '',
				defaultProps: {
					children: 'children',
					label: 'label'
				},
				currentCheckData: {}, // 当前选中的值
				treeData:null
			}
		},
		created() {
			
		},
		props: {},
		watch: {
			//这个是监听输入框变化时重新生成树状结构
			filterText(val) {
				this.$refs.tree.filter(val); //这个是一个固定的写法
			}
		},
		created() {
		},
		mounted() {
		},
		destroyed() {
		},
		methods:{
			filterNode(value, data) {
				if (!value) return true;
				return data.label.indexOf(value) !== -1;
			},
			// 点击时设置单选
			treeNodeClick(data) {//重点在这儿
				//let tempData = this.$refs.tree.getCheckedKeys()
				if(data.hasOwnProperty('children')){
					//判断当前节点是否为最终的节点
					//即该节点是没有子级的
					this.currentCheckData = {}
					//this.$emit('getTreeData', {})
					this.$refs.tree.setCheckedKeys([])
					return false;
				}else{
					if(this.currentCheckData.value === data.value){//返选
						this.currentCheckData = {}
						//this.$emit('getTreeData', {})
						this.$refs.tree.setCheckedKeys([])//反选状态下，重置为空
						this.treeData = null;
					}else{
						this.currentCheckData = data
						//this.$emit('getTreeData', data)
						this.$refs.tree.setCheckedKeys([data.value])
						this.treeData = data;
						//console.log(data);
						//this.$emit('getTreeData',data);
					}
				}
			},
			subTree(){
				let data = this.treeData;
				if(data == null){
					this.$refs.uTips.show({
						title: '请选择一个子节点',
						type: 'warning',
						duration: '2300'
					})					
				}else{
					this.$emit('getTreeData',data);
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.myTree{
		width: 96%;
		margin: 0 auto;
	}
</style>

先贴一段我学习的代码吧。