uni-app 多级选择的组合框

在处理 uni-app 中的多级选择组合框时，我们通常会利用 Vue 的组件化特性和递归组件来实现。以下是一个简单的代码示例，展示了如何实现一个多级选择的组合框。

首先，我们假设有一个多级的数据结构，类似于这样：

const multiLevelData = [
    {
        id: 1,
        name: 'Category 1',
        children: [
            {
                id: 11,
                name: 'Subcategory 1-1',
                children: [...]
            },
            {
                id: 12,
                name: 'Subcategory 1-2',
                children: []
            }
        ]
    },
    {
        id: 2,
        name: 'Category 2',
        children: [...]
    }
];

接下来，我们定义一个递归组件 MultiSelectDropdown 来渲染这个多级结构：

<template>
    <view>
        <picker mode="multiSelector" :range="pickerRanges" @change="onPickerChange">
            <view class="picker">
                {{ currentSelections.map(item => item.name).join(' > ') }}
            </view>
        </picker>
    </view>
</template>

<script>
export default {
    props: {
        data: {
            type: Array,
            required: true
        }
    },
    data() {
        return {
            currentSelections: [],
            pickerRanges: []
        };
    },
    mounted() {
        this.flattenData(this.data);
    },
    methods: {
        flattenData(data, selections = [], ranges = []) {
            data.forEach(item => {
                selections.push({ id: item.id, name: item.name });
                ranges.push(item.children ? item.children.map(child => child.name) : []);
                if (item.children) {
                    this.flattenData(item.children, selections, ranges);
                } else {
                    selections.pop();
                }
            });
            this.currentSelections = selections.slice(0, -1);
            this.pickerRanges = ranges;
        },
        onPickerChange(e) {
            console.log('Selected:', this.currentSelections.slice(0, e.detail.value.length + 1).concat(
                this.data[e.detail.value[0]].children[e.detail.value[1]]
            ));
        }
    }
};
</script>

<style>
.picker {
    padding: 20px;
    border: 1px solid #ccc;
    background-color: #fff;
}
</style>

注意：

1. picker 组件的 mode 设置为 multiSelector，它允许我们选择多个级别。
2. flattenData 方法递归地处理多级数据，生成 pickerRanges 数组。
3. onPickerChange 方法处理用户的选择，并打印出当前的选择路径。

这只是一个基本的实现，你可能需要根据具体需求进行扩展，比如处理选择后的回调、样式调整等。