vue数据嵌套层数未知情况下，我们怎样渲染，已经解决。

后端返回的数据是树的结构，这个结构嵌套的层数不一定多少层数。
咱们本文章里的内容和element，iview等里面的tree组件一样的。element，iview等里面的tree组件扩展性不好，不如自己写一个。来满足自己需求。

代码难度等级：★★★☆☆（三颗星）

代码介绍：

封装了两个组件，一个父组件simplTree.vue，一个子组件simplTreeChild.vue，在使用的时候我们直接调用父组件<simplTree :data="treeData" ref="simplTree" :clickEvent="selectObject"></simplTree>绑定数据和事件。 最重要的地方是子组件里面的写法，自己调用自己（递归算法）。我在子组件里面注释标注了。

递归算法案例：https://blog.csdn.net/qq_38946996/article/details/109218623?spm=1001.2014.3001.5501
递归算法案例入口

树的父组件

<template>
	<div class="simplTree">
		<div
			class="TreeBox"
			v-if="nodes && nodes.length"
		>
			<Child
				v-for="(item,index) in nodes"
				:nodeData="item"
				:key="'simplTree_' +  index"
				:selectObject="selectObject"
				:onSelectObject="onSelectObject"
				:clickEvent="clickEvent"
				:Level="0"
			></Child>
		</div>
	</div>
</template>

<script>
	import Child from './simplTreeChild'
	export default {
		props: ['data', 'clickEvent'],
		data() {
			return {
				nodes: [],
				selectObject: null,
			}
		},
		watch: {
			data(newValue) {
				this.nodes = [];
				this.$nextTick(() => {
					setTimeout(() => {
						this.nodes = newValue;
					}, 0)
				})
			},
		},
		components: { Child },
		methods: {
			onSelectObject(event) {
				this.selectObject = event;
			},
		}
	}
</script>

<style>
</style> 

树的子组件

<template>
    <div class="simplTreeChild">
        <div
            class="simplTreeChild-config-title"
            :class="{'active' : isSelect}"
            :style="{'padding' : '0 0 0 ' + (20 * Level) + 'px'}"
            @click.stop="clickEventActive(nodeData)"
        >
            <div
                class="icon"
                :style="{'transform': (show ? 'rotateZ(0deg)' : 'rotateZ(-90deg)') }"
                @click.stop="show = !show;"
            >
                <Icon type="md-arrow-dropdown" />
            </div>
            <div  class="title" :title="nodeData.Name" :style="{width:( 314 - 70 - (20 * Level))+'px' }">{{nodeData.Name}}</div>
        </div>
        <transition name="fade">
        	<!-- 这里是关键，dom层循环调用，一直到children长度等于0 -->
            <div class="simplTreeChild-children" v-show="show">          
                <simplTreeChild
                    v-for="(item,index) in nodeData.children"
                    :nodeData="children"
                    :key="'simplTree_' +  index"
                    :selectObject="selectObject"
                    :onSelectObject="onSelectObject"
                    :clickEvent="clickEvent"
                    :Level="Level+1"
                ></simplTreeChild>
            </div>
        </transition>
    </div>
</template>

<script>
export default {
    props: ['nodeData', 'clickEvent', 'selectObject', 'onSelectObject',  "Level"],
    name: 'simplTreeChild',
    data() {
        return {
            show: false,
            isSelect: false,
        }
    },
    watch: {
        selectObject(newVal) {
            if (newVal === this) {
                this.isSelect = true;
            } else {
                this.isSelect = false;
            }
        }
    },
    methods: {
        clickEventActive(nodeData) {
            this.clickEvent(nodeData);
            this.onSelectObject(this);
        },
    }
}
</script>

组件的使用

<template>
	<div class="scenConfig">
		<simplTree :data="treeData"  ref="simplTree" :clickEvent="selectObject"></simplTree>	 
	</div>
</template>

<script>
	import simplTree from "./component/simplTree.vue"
	export default {
		components: { simplTree },
		data() {
			return {
	  			treeData: []			 
			}
		},
		created() {
			this.GetTree()
		},
		methods: {
			// 获取树的数据
			GetTree() {
				Api.getData().then(res => {			 
					this.treeData= res.treeData;
				})
			},
			// 选定某一树节点
			selectObject(obj) {
			 // 方法区
			} 
		}
	}
</script>

<style lang="less" scoped>
 .scenConfig { }
</style>