更新记录

1.0.0（2024-12-05） 下载此版本

初始化版本

平台兼容性

欢迎使用 twk-multicolumn-selector 多列选择器

初心：致力于友好地解决懒加载数据的回显问题

props (组件属性)

组件事件

ref 事件

使用代码示例

<template>
    <view class="content">
        <view class="title">多列选择器（懒加载）</view>
        <view class="desc">致力于友好地解决回显问题</view>
        <view class="item">
            <view class="label">地区</view>
            <view class="selector" @click="openPickerFun">
                <twk-multicolumn-selector
                    ref="ref"
                    pickerTitle="地区"
                    pickerType="地区"
                    :customHeight="customHeight"
                    :selectItem="[ areaInfo.province, areaInfo.city ]"
                    @columnChange='bindMultiPickerColumnChange'
                    valueKey='name'
                    showKey='name'
                    @confirmModel="confirmPickerFun">
                    <view class="text-default" v-if="!areaInfo.province.name && !areaInfo.city.name">请选择地区</view>
                    <view v-else>{{`${areaInfo.province.name}${areaInfo.city.name?'-'+areaInfo.city.name: ''}`}}</view>
                </twk-multicolumn-selector>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                customHeight: '30vh', // 自定义高度
                areaInfo: {
                    province: { name: '河北省' }, // 省
                    city: { name: '邯郸市' }, // 市
                },
                purchaseAge: '请选择地区'
            }
        },
        onShow() {
            // #ifdef MP-WEIXIN
                    this.customHeight = '40vh'
            // #endif
        },
        methods: {
            // 打开选择器方法
            openPickerFun(){
                this.$refs.ref.PickerDisplayControlFun(true);
            },
            // 阿里云接口 省  http://datavmap-public.oss-cn-hangzhou.aliyuncs.com/areas/csv/100000_province.json
            // 阿里云接口 市  http://datavmap-public.oss-cn-hangzhou.aliyuncs.com/areas/csv/510000_city.json
            // 阿里云接口 区  http://datavmap-public.oss-cn-hangzhou.aliyuncs.com/areas/csv/511800_district.json
            // 滑动列方法
            bindMultiPickerColumnChange(changeData){
                if(changeData.colIndex < 0){
                    // 获取省数据
                    uni.request({
                        url:'http://datavmap-public.oss-cn-hangzhou.aliyuncs.com/areas/csv/100000_province.json',
                        method:'GET',
                        complete: (res) => {
                            changeData.resolve(res.data.rows);
                        }
                    })
                }else{
                    // 控制最多几列数据
                    if(changeData.colIndex == 1) return;
                    // 获取市数据
                    uni.request({
                        url:`http://datavmap-public.oss-cn-hangzhou.aliyuncs.com/areas/csv/${changeData.selectedItem.adcode}_city.json`,
                        method:'GET',
                        complete: (res) => {
                            changeData.resolve(res.data.rows);
                            changeData.colIndex == 0 && changeData.finish();
                        }
                    })
                }
            },
            // 确定方法
            confirmPickerFun(confirmModel){
                const describeForNameMap = {
                    '地区': () => {
                        this.areaInfo.province = confirmModel.data.value[0];
                        this.areaInfo.city = confirmModel.data.value[1];
                    }
                };
                describeForNameMap[confirmModel.pickerName] ? describeForNameMap[confirmModel.pickerName]() : console.error(`未找到<${confirmModel.pickerName}>对应事件`);
            },
        }
    }
</script>

<style lang="scss" scoped>
    .content {
        padding: 40rpx;
        .title{
            font-size: 18px;
            margin-bottom: 10px;
            color: gray;
        }
        .desc{
            font-size: 13px;
            margin-bottom: 10px;
            color: gray;
        }
        .item{
            height: 50px;
            border-bottom: 1px solid #ccc;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            .selector{
                padding-left: 20px;
                flex: 1;
                .text-default{
                    color: gray;
                }
            }
        }
    }
</style>

twk-multicolumn-selector将会持续更新，欢迎大家踊跃提出宝贵建议；