4dkankan-components/packages/components/basic/tree/TreeItem.vue

<template>
    <li class="ui-tree-item">
        <div :class="{}" @click="toggle" @dblclick="makeFolder">
            <i class="arrow iconfont icon-pull-down" :class="{ open: isOpen, visibility: isFolder }"></i>{{ item.name }}
            <span v-if="isFolder">[{{ isOpen ? '-' : '+' }}]</span>
        </div>
        <ul v-show="isOpen" v-if="isFolder">
            <ui-tree-item class="item" v-for="(child, index) in item.children" :key="index" :item="child" @make-folder="$emit('make-folder', $event)" @add-item="$emit('add-item', $event)" />
            <li class="add" @click="$emit('add-item', item)">+</li>
        </ul>
    </li>
</template>
<script>
import { defineComponent, ref, computed } from 'vue'
export default defineComponent({
    name: 'UiTreeItem',
    components: {},
    props: {
        item: Object,
    },
    setup(props, _) {
        const item = props.item.getValue()
        const toggle = () => {
            if (isFolder.value) {
                isOpen.value = !isOpen.value
            }
        }
        const makeFolder = () => {}
        const isOpen = ref(false)
        const isFolder = computed(() => item.children && item.children.length)

        return {
            // item,
            toggle,
            makeFolder,
            isOpen,
            isFolder,
        }
    },
})
</script>