dz-app/pages/topic-center/index/components/tree-view-node.vue

<template>
    <view class="fx-col">
        <view class="fx-row items-center" @click="toggleNode({node, deep})">
            <!-- 左侧图标 -->
            <view class="w-40">
                <slot name="icon" v-bind="{node, deep}">
                    <uv-icon v-if="node.children?.length" :name="node.expanded ? 'arrow-down':'arrow-right'"/>
                </slot>
            </view>
            <view class="flex-1 py-20 fx-row gap-20 items-center mx-border-b">
                <!-- 中间名称 -->
                <slot name="node" v-bind="{node, deep}">
                    <view class="flex-1 fx-col gap-5">
                        <text class="text-main font-[PingFang]" :class="{'text-sm':deep>0}">
                            {{ node.name }}
                        </text>
                        <text class="text-content text-xs" :class="{'text-xs':deep==0,'text-2xs':deep>0}">
                            共{{ node.questionsCount }}道题
                        </text>
                    </view>
                </slot>
                <!-- 右侧命令 -->
                <slot name="command" v-bind="{node, deep}"/>
            </view>
        </view>

        <!-- 子节点 -->
        <uv-transition :show="node.expanded">
            <view v-if="node.expanded" class="ml-30">
                <uv-loading-icon :show="node.loading === true" class="py-20"/>
                <tree-view-node v-for="child in node.children" :node="child" :deep="deep+1"
                                @node-click="toggleNode">
                    <template v-for="(sFn, name) in $slots" #[name]="scope">
                        <slot :name="name" v-bind="scope"/>
                    </template>
                </tree-view-node>
            </view>
        </uv-transition>
    </view>
</template>

<script>
export default {
    name: "tree-view-node",
    props: {
        node: {
            type: Object,
            default: () => ({})
        },
        deep: {
            type: Number,
            default: 0
        }
    },
    emits: ['node-click'],
    methods: {
        toggleNode({node, deep}) {
            // 切换节点展开状态
            if (node.children && node.children.length) {
                node.expanded = !node.expanded;
            }
            // 触发点击事件
            this.$emit('node-click', {node, deep});
        }
    }
}
</script>

<style scoped>

</style>