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.目錄問題:./當前文件所在目錄;…/父文件所在目錄;/根目錄

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章