研究了一下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-treeclass="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" :data-obj="treeDataProps" @click="subTree">确定</u-button></view></view>
</template><script>export default {data(){return {treeObj:{optionList:arr},filterText: '',defaultProps: {children: 'children',label: 'label'},currentCheckData: {}, // 当前选中的值treeData:null}},created() {},props: {show: {type: Boolean,default: false},treeDataProps:{type:Object,default:function(){return {}}},defaultCheckedKeys:{type:Array,default:function(){return []}}},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;let treeDataProps = this.treeDataProps;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>

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