uni-app 树形选择器

在uni-app中实现树形选择器（Tree Selector），你可以利用递归组件和一些数据绑定技巧来实现。以下是一个简单的代码示例，展示了如何在uni-app中构建一个基本的树形选择器。

首先，你需要定义一个树形结构的数据。这里是一个简单的示例数据：

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

接下来，创建一个递归组件TreeNode.vue来渲染树节点：

<template>
    <view>
        <checkbox-group @change="onCheckboxChange">
            <view v-for="node in nodes" :key="node.id">
                <checkbox :value="node.id">{{ node.label }}</checkbox>
                <view v-if="node.children" style="padding-left: 20px;">
                    <tree-node :nodes="node.children" @select="handleSelect"></tree-node>
                </view>
            </view>
        </checkbox-group>
    </view>
</template>

<script>
export default {
    name: 'TreeNode',
    props: {
        nodes: Array
    },
    methods: {
        onCheckboxChange(e) {
            this.$emit('select', e.detail.value);
        },
        handleSelect(selectedValues) {
            // Handle child node selection if needed
            this.$emit('select', selectedValues);
        }
    }
}
</script>

最后，在你的主页面组件中使用这个递归组件：

<template>
    <view>
        <tree-node :nodes="treeData" @select="handleTreeSelect"></tree-node>
    </view>
</template>

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

export default {
    components: {
        TreeNode
    },
    data() {
        return {
            treeData
        };
    },
    methods: {
        handleTreeSelect(selectedValues) {
            console.log('Selected Values:', selectedValues);
        }
    }
}
</script>

这个示例展示了如何使用递归组件来渲染树形结构，并通过checkbox组来选择节点。注意，这个示例仅用于演示，实际应用中你可能需要添加更多的功能，比如节点的展开/折叠、样式优化等。希望这个示例能帮助你在uni-app中实现树形选择器。