vue实现树形tree组件

一.实现效果 ​​​​

二.json数据格式展示

三.实现效果
1.点击时箭头（👉到👇）的改变
2.最后一层时无箭头且输出json数据中对应value值 四.实现思路
1.父组件调用子组件，并给子组件传json
2.自定义组件（子组件）用于属性结构展示
3.子组件的自我调用

四.代码实现 父组件app.vue

<template>	
  <div class = 'courseInfo'>
  	<!--my-tree即自定义的组件，冒号即v-bind属性绑定-->
    <my-tree :data="jsonyz"/> 
  </div>
</template>
<script>
import MyTree from "./my_tree.vue" //引入子组件
export default {
	components:{
		'my-tree':MyTree,     //声明子组件
	},
  data() {
    return {
      name: 'App',
      jsonyz :{
				"1.1 集合与集合的表示方法": {
					"1.1.1 集合的概念": {
						"集合的含义": 25002,
						"元素与集合关系的判断": 25003,
						"集合的确定性、互异性、无序性": 25004
					},
					"1.1.2 集合的表示方法": {
						"集合的表示法": 25006
					}
				},
				"1.2 集合之间的关系与运算": {
					"1.2.1 集合之间的关系": {
						"子集与真子集": 25007,
						"集合的包含关系判断及应用": 25008,
						"集合中元素个数的最值": 25010,
						"空集的定义、性质及运算": 25011,
						"集合关系中的参数取值问题": 25012
					},
					"1.2.2 集合的运算": {
						"并集及其运算": 25013,
						"交集及其运算": 25014,
						"补集及其运算": 25015,
						"全集及其运算": 25016,
						"交、并、补集的混合运算": 25017,
						"子集与交集、并集运算的转换": 25018,
						"Venn图表达集合的关系及运算": 25019
					}
				},
				"1.3  提升": {
					"1.3.1 提升": {
						"集合中的典型问题分析": 38059,
						"子集问题": 38060,
						"集合的综合问题1": 38061,
						"集合的综合问题2": 38062
					}
				}
			}			
    }
  },
  methods: {},
 }
</script>
<style>
</style>

子组件my_tree.vue

<template>  
    <div>
        <!--逐层循环json对象，记得绑定的key只能是number/string类型，不能为对象类型-->
        <div v-for="(value,key,index) in data" :key="index">
            <!--鼠标点击事件给openIndex赋值，更改open布尔值，并判断value是否为对象类型-->
            <span style="color:red;" @click="openChildList(index,value)">{{key}}
                <span>
                    <!--判断箭头显示-->    
                    <i style="font-size: 18px;" class="el-icon-arrow-down" v-if="openIndex ==index && open == true&&isObj(value)"></i>
                    <i style="font-size: 18px;" class="el-icon-arrow-right" v-else-if="isObj(value)"></i>
                </span>
            </span>
            <div v-if="openIndex==index&&open" style="margin-left:20px">
                <div v-if="isObj(value)">
                    <!--***自我调用***-->
                    <my-tree :data="value"/
                ></div>
            </div>
        </div>
  </div>
</template>
<script>
export default {
    name:'myTree',
    //接收父组件传过来的值
    props:['data'],
    data(){
        return {
            open:false,
            openIndex:-1   //0
        }
    },
    methods:{
        openChildList(openIndex,value){
            if(this.openIndex ==openIndex && this.open == true){
                this.open = false;
            }else{
                this.openIndex = openIndex;
                this.open = true;
            }
            if(!this.isObj(value)){
                console.log(value);
            }
        },
        isObj(o){
            return typeof(o) == 'object';
        },
    }
}
</script>
<style>
</style>

五.涉及
1.父子组件传值
2.自定义组件
3.组件的自我调用
4.Json的解析
5.目录问题：./当前文件所在目录;…/父文件所在目录;/根目录