uni-app 实现多层嵌套的树形目录结构

在 uni-app 中实现多层嵌套的树形目录结构，可以通过递归组件来实现。以下是一个简单的代码案例，展示了如何使用递归组件来渲染多层嵌套的树形目录。

首先，假设我们有一个树形目录的数据结构如下：

const treeData = [
    {
        id: 1,
        name: 'Node 1',
        children: [
            {
                id: 2,
                name: 'Node 1-1',
                children: [
                    { id: 3, name: 'Node 1-1-1', children: [] },
                    { id: 4, name: 'Node 1-1-2', children: [] }
                ]
            },
            { id: 5, name: 'Node 1-2', children: [] }
        ]
    },
    { id: 6, name: 'Node 2', children: [] }
];

接下来，我们创建一个递归组件 TreeNode.vue：

<template>
    <view class="tree-node">
        <view class="node-name" @click="toggle">
            {{ node.name }}
            <text v-if="hasChildren">[{{ expanded ? '-' : '+' }}]</text>
        </view>
        <view v-if="expanded && hasChildren" class="children">
            <tree-node
                v-for="(child, index) in node.children"
                :key="index"
                :node="child"
            ></tree-node>
        </view>
    </view>
</template>

<script>
export default {
    name: 'TreeNode',
    props: {
        node: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            expanded: false
        };
    },
    computed: {
        hasChildren() {
            return this.node.children && this.node.children.length > 0;
        }
    },
    methods: {
        toggle() {
            this.expanded = !this.expanded;
        }
    }
};
</script>

<style scoped>
.tree-node {
    margin-left: 20px;
}
.node-name {
    cursor: pointer;
}
.children {
    margin-left: 20px;
}
</style>

最后，在页面的主组件中使用这个递归组件，并传入树形目录数据：

<template>
    <view>
        <tree-node v-for="(node, index) in treeData" :key="index" :node="node"></tree-node>
    </view>
</template>

<script>
import TreeNode from './components/TreeNode.vue';

export default {
    components: {
        TreeNode
    },
    data() {
        return {
            treeData: [/* 数据结构如上 */]
        };
    }
};
</script>

以上代码展示了如何在 uni-app 中使用递归组件来渲染多层嵌套的树形目录结构。通过点击节点名称，可以展开或收起子节点。你可以根据实际需求进一步定制样式和功能。