vue3树状图，树状关系图_vue3绘制树状图

首先在主页面使用 

 <image-tree :list="imageTreeData"></image-tree>  
 
 
import imageTree from '@/components/tree-img/image-tree.vue'
 
 
 
const imageTreeData = reactive([    //数据具有扩展性，根据你自己的数据定义变量，只要children和name 和imgPathUrl不改变就行
    {
        name: '一1',
        imgPathUrl:
            'xxx',
        children: [
            {
                name: '二1',
                imgPathUrl:
                    'xxx',
                children: [
                    {
                        name: '三1',
                        imgPathUrl:
                            'xxx',
                    },
                    {
                        name: '三2',
                        imgPathUrl:
                            'xxx',
                    },
                    {
                        name: '三3',
                        imgPathUrl:
                            'xxx',
                    }
                ]
            },
            {
                name: '二2',
                imgPathUrl:
                    'xxx',
                children: [
                    {
                        name: '三1',
                        imgPathUrl:
                            'xxx',
                        children: [
                            {
                                name: '三1',
                                imgPathUrl:
                                    'xxx',
                            },
                            {
                                name: '三2',
                                imgPathUrl:
                                    'xxx',
                            },
                            {
                                name: '三3',
                                imgPathUrl:
                                    'xxx',
                            }
                        ]
                    },
                    {
                        name: '三2',
                        imgPathUrl:
                            'xxx',
                        children: [
                            {
                                name: '三1',
                                imgPathUrl:
                                    'xxx',
                            },
                            {
                                name: '三2',
                                imgPathUrl:
                                    'xxx',
                            },
                            {
                                name: '三3',
                                imgPathUrl:
                                    'xxx',
                                children: [
                                    {
                                        name: '三1',
                                        imgPathUrl:
                                            'xxx',
                                    },
                                    {
                                        name: '三2',
                                        imgPathUrl:
                                            'xxx',
                                    },
                                    {
                                        name: '三3',
                                        imgPathUrl:
                                            'xxx',
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    }
])
 
 

创建一个.vue文件的组件

<template>
    <!-- 第一层 -->
    <div class="flex">
        <div v-for="(item, index) in obj" :class="{ heng: !(index == num - 1) && num, zou: index > 0 }">
            <div class="div">
                <div class="div2" :class="{ xia: xia(item, obj), shang: shang2 }" @click="handleimageclick(item)">
                    <img :src="item.imgPathUrl">
                    <!-- {{ item.name }} -->
                </div>
            </div>
            <template v-if="item.children && item.children.length">
                <image-tree v-if="item.show" :list="item.children" shang2="false" :num="item.children.length"></image-tree>
            </template>
 
        </div>
    </div>
</template>
 
<script setup>
import { ref, reactive } from 'vue';
import imageTree from './image-tree.vue';
const obj = ref([]);
const shang = ref(true);
const props = defineProps({
    list: {
        type: Array,
        default: () => []
    },
    shang2: {
        type: Boolean,
        default: ''
    },
    num: {
        type: Number,
        default: ''
    },
 
})
 
if (props.list) {
    obj.value = props.list.map(item => {
        return { ...item, show: true };
    });
    shang.value = props.shang2;
}
 
// 计算属性计算下线
const xia = (item) => {
    if (item.children && !item.children.length) {
        return '';
    }
    return item.children && item.show ? 'xia' : '';
};
 
//点击的时候子节点显示隐藏
const handleimageclick = (item) => {
    if (item.children) {
        item.show = !item.show
    }
}
 
 
</script>
 
<style lang="scss">
* {
    margin: 0;
    padding: 0;
}
 
.box {
    margin-left: 100px;
    margin-top: 100px;
}
 
.flex {
    display: flex;
}
 
.div {
    width: 100px;
    height: 115px;
    display: flex;
    /* 盒子距离 */
    margin: 0 auto;
 
    /* margin-bottom: 50px;
     margin-right: 50px; */
    img {
        width: 100%;
        height: 100%;
    }
}
 
.div2 {
    // background-color: aquamarine;
    margin: 0 auto;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
 
div {
    position: relative;
}
 
/* 下线条 */
.xia::after {
    content: '';
    width: 1px;
    /* 线条往下的高度 */
    height: 25px;
    bottom: -25px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background-color: #D8D8D8;
}
 
 
/* 上线条 */
.shang::before {
    content: '';
    width: 1px;
    /* 线条往下的高度 */
    height: 25px;
    top: -25px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background-color: #D8D8D8;
}
 
/* 横线条 */
.heng::after {
    content: '';
    /* 需要剪去盒子的大小和偏移量 */
    width: 50%;
    height: 1px;
    position: absolute;
    left: 50%;
    top: -25px;
    background-color: #D8D8D8;
}
 
.zou::before {
    content: '';
    /* 需要剪去盒子的大小和偏移量 */
    width: 50%;
    height: 1px;
    position: absolute;
    left: 0;
    top: -25px;
    background-color: #D8D8D8;
}
</style>