uni-app 如果有个能配置选项的级联picker就更好了

uni-app 如果有个能配置选项的级联picker就更好了

如题

1 回复

更多关于uni-app 如果有个能配置选项的级联picker就更好了的实战教程也可以访问 https://www.itying.com/category-93-b0.html


理解你的需求,确实在开发过程中,级联选择器(Cascader Picker)是一个非常实用的组件,尤其是在需要用户从多级选项中进行选择时。虽然 uni-app 官方并没有直接提供一个配置选项的级联picker组件,但我们可以通过自定义的方式来实现这一功能。

以下是一个简单的实现示例,利用 uni-app 提供的 picker 组件,通过动态更新 pickerrange 属性来实现级联选择的效果。

示例代码

首先,我们定义一个数据结构来表示级联选项:

data() {
    return {
        options: [
            {
                value: 'category1',
                text: 'Category 1',
                children: [
                    { value: 'sub1-1', text: 'Sub Category 1-1' },
                    { value: 'sub1-2', text: 'Sub Category 1-2' }
                ]
            },
            {
                value: 'category2',
                text: 'Category 2',
                children: [
                    { value: 'sub2-1', text: 'Sub Category 2-1' },
                    { value: 'sub2-2', text: 'Sub Category 2-2' }
                ]
            }
        ],
        selectedCategory: null,
        selectedSubCategory: null,
        currentPickerRange: [],
        currentPickerColumns: 1
    };
}

然后,在 methods 中定义处理选择逻辑的方法:

methods: {
    onPickerChange(e) {
        const index = e.detail.value[0];
        if (this.currentPickerColumns === 1) {
            this.selectedCategory = this.options[index].value;
            this.currentPickerRange = this.options[index].children.map(item => item.text);
            this.currentPickerColumns = 2;
            this.$forceUpdate(); // 强制更新picker视图
        } else if (this.currentPickerColumns === 2) {
            this.selectedSubCategory = this.options.find(category => category.value === this.selectedCategory).children[index].value;
        }
    }
}

在模板中使用 picker 组件:

<picker mode="multiSelector" :range="currentPickerRange" :value="currentPickerValue" @change="onPickerChange" :column-count="currentPickerColumns">
    <view class="picker">
        {{ selectedCategory ? (selectedCategory + ' > ' + (currentPickerRange[currentPickerValue[1]] || '')) : 'Please select' }}
    </view>
</picker>

注意:currentPickerValue 需要根据 currentPickerColumns 动态设置初始值,以及处理多列选择时的值更新逻辑。这个示例中为了简化,只展示了单列到双列转换的基本逻辑。

这个示例展示了如何通过 uni-apppicker 组件和动态数据更新来实现一个简单的级联选择器。当然,在实际项目中,你可能需要根据具体需求进行更多的优化和扩展。

回到顶部