vue3.0+ts 简易树 实现

com-tree.vue

<template>
    <div class="com-tree">
        <TreeNodeDom :node="item"
                     v-for="(item,index) in props.treeList"
                     :key="index"
                     @sonTreeFun="treeNodeFun"></TreeNodeDom>
    </div>
</template>

<script setup lang="ts">
    import {defineProps, withDefaults} from 'vue'
    import TreeNodeDom from "./tree-node-dom.vue";
    // 树组件的接口
    interface treeListInterface {
        id: number,
        label: string,
        custom?: any,
        children?: treeListInterface[],
    }
    
    const props = withDefaults(
        defineProps<{
            treeList: treeListInterface[];
        }>(), {}
    );
    const treeNodeFun = (item:treeListInterface) => {
        console.log(item);
    }
    console.log(props.treeList);
</script>

<style lang="scss" scoped>

</style>

tree-node-dom.vue

<template>
    <div class="tree-node-dom" @click.stop="treeNodeFun(props.node)">
        <div class="label">
            {{ props.node.label }}
        </div>
        <div v-show="isAccordion" class="tree-node-box">
            <TreeNodeDom :node="item"
                         @sonTreeFun="sonTreeFunTwo"
                         v-for="(item,index) in props.node.children"
                         :key="index"
                         :accordion="props.accordion"
            ></TreeNodeDom>
        </div>
    </div>
</template>

<script setup lang="ts">
    import {defineProps, withDefaults, defineEmits, onMounted, ref} from "vue";
    import emitter from "../../utils/bus";
    // 树组件的接口
    interface treeListInterface {
        id: number,
        label: string,
        custom?: any,
        children?: treeListInterface[],
    }
    
    let isAccordion = ref(false);
    
    const props = withDefaults(
        defineProps<{
            node: treeListInterface
            accordion?: boolean
        }>(), {}
    );
    const emit = defineEmits(['sonTreeFun'])
    let treeNodeFun = (node: treeListInterface) => {
        emit('sonTreeFun', node);
        emitter.emit('treeNodeShrink', props.node);
        isAccordion.value = !isAccordion.value;
    }
    let sonTreeFunTwo = (item: treeListInterface) => {
        emit('sonTreeFun', item);
    }
    onMounted(() => {
        if (props.accordion) {
            emitter.on('treeNodeShrink', (node: any) => {
                if (props.node !== node) {
                    isAccordion.value = false;
                }
            })
        }
    })
</script>

<style lang="scss" scoped>
.tree-node-dom {
    line-height: 20px;
    color: #000000;
    
    .label {
        cursor: pointer;
        text-indent: 20px;
    }
    
    > .tree-node-box {
        padding-left: 20px;
    }
}
</style>

使用

<com-tree :tree-list="treeList"></com-tree>

    // 树组件的接口
    interface treeListInterface {
        id: number,
        label: string,
        custom?: any,
        children?: treeListInterface[],
    }

let treeList = reactive<treeListInterface[]>([
    {
        id: 1,
        label: '1',
        children: [
            {
                id: 1,
                label: '1-1',
            }
        ]
    },
    {
        id: 1,
        label: '2',
        children: [
            {
                id: 1,
                label: '2-1',
            }
        ]
    }
]);