uni-app 级联选择器

在uni-app中实现级联选择器（Cascader Selector）通常涉及多层数据的展示与选择。以下是一个简单的实现示例，使用Vue.js语法结合uni-app框架来完成。

1. 数据准备

首先，我们需要准备级联选择器的数据源。假设我们有一个三级联动的数据：

data() {
    return {
        options: [
            {
                value: 'province1',
                label: 'Province 1',
                children: [
                    {
                        value: 'city1-1',
                        label: 'City 1-1',
                        children: [
                            { value: 'district1-1-1', label: 'District 1-1-1' },
                            { value: 'district1-1-2', label: 'District 1-1-2' }
                        ]
                    },
                    {
                        value: 'city1-2',
                        label: 'City 1-2',
                        children: [
                            { value: 'district1-2-1', label: 'District 1-2-1' }
                        ]
                    }
                ]
            },
            // 更多省份数据...
        ],
        selectedValues: []  // 存储最终选中的值
    };
}

2. 模板实现

接下来，在模板中使用picker组件来实现级联选择：

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

3. 逻辑处理

在脚本部分处理级联选择器的逻辑：

methods: {
    getPickerRanges() {
        let ranges = [this.options.map(item => item.label)];
        let currentOptions = [...this.options];
        for (let i = 0; i < 2; i++) {  // 假设最多三级联动，这里循环两次生成子级选项
            ranges.push([]);
            currentOptions.forEach(option => {
                if (option.children && option.children.length) {
                    let selectedChild = this.selectedValues[i] ? currentOptions.find(o => o.value === this.selectedValues[i]) : null;
                    ranges[ranges.length - 1] = selectedChild ? selectedChild.children.map(child => child.label) : [];
                }
            });
        }
        this.pickerRanges = ranges;
    },
    onPickerChange(e) {
        this.selectedValues = e.detail.value;
        this.selectedLabels = this.selectedValues.map(value => {
            let current = this.options;
            for (let i = 0; i < this.selectedValues.length; i++) {
                current = current.find(item => item.value === this.selectedValues[i]).children || [];
                if (i === this.selectedValues.length - 1) {
                    return current.find(item => item.value === value).label;
                }
            }
        });
    }
}

4. 初始化

在mounted或onLoad生命周期钩子中初始化选择器范围：

mounted() {
    this.getPickerRanges();
},

以上代码提供了一个基本的级联选择器实现，可以根据具体需求进一步调整和优化。注意，这里使用了picker组件的multiSelector模式，适用于简单的多层选择场景。对于更复杂的需求，可能需要自定义组件或使用第三方库。