小程序 3级联动 简洁样式 picker 实现 省市县等等

view 页面

<view class="contract">
    <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
        <view class='panel-min'>
            <view class='flex'>
                <view class='panel-title'>所属社区</view>
                <view class='panel-text-ms'>
                {{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}}                   </view>
            </view>
            <text class='arrow'></text>
        </view>
    </picker>
</view>

本例子只有一级,二级三级，后面做拼接

{{multiArray[0][values[0]]}} ,{{multiArray[1][values[0]]}},{{multiArray[2][values[0]]}}

2:js

        multiArray:[],//多纬度 一纬[['类1,类2']]  二维 [['类1,类2'],['类1子类1,类1子类2']]
        multiIndex:0,
        column:0,//改变的第几列
        value:0, //第几列的第几个下标
        values:[0,0], //多维选择的值
        objectMultiArray: [],//多个结果 一纬 二维 [{},{}]

      

         util.post('你的地址', {},function(res){
         if (res.data.executed!=true){
             util.showModel(res.data.message);
             return ;
         }
         that.setData({ hidden: false });
            var list = res.data.pageInfo.list;        // 返回的多维数组
            var multiArray = list.map(item => {　　　　// 此方法将校区名称区分到一个新数组中
                return item.hpName;
            });
             //multiArray        显示用
             //objectMultiArray  拿结果用

            that.setData({
                multiArray: [multiArray], //一位数组  二级 格式 multiArray: [multiArray,'']先复制二维的为空查询出来了再复制就行
                objectMultiArray: [list,''], //objectMultiArray  把结果存在这个对象里面
            }) 
            console.log('list', list);
            that.getDoctorGroup();

        })


      //监控选择
      bindMultiPickerChange:function(e){
        var that = this;
        var value = that.data.value;
        var values = that.data.values;
        var d_value = e.detail.value[0];
        if (value != d_value){
            values[0] = d_value;
            that.setData({
                value: d_value,
                values: values,
             })
            //查询下级的
            that.getSonData();
        }
      },

     //查询下级
        var that = this;
        var values = that.data.values;
        var multiArray = that.data.multiArray;
        var objectMultiArray =  that.data.objectMultiArray;
        console.log('multiArray', multiArray);
        console.log('values', values);
        that.setData({ hidden: true });
        util.post('url', {
            id: objectMultiArray[0][values[0]].id,
        },function (res) {
            that.setData({ hidden: false });
            var list = res.data.pageInfo.list;
             var groupName = list.map(item => {　　　　// 此方法将校区名称区分到一个新数组中
                return item.groupName;
             });
            multiArray[1] = groupName;
            objectMultiArray[1] = list,
            that.setData({
                multiArray: multiArray,
                objectMultiArray: objectMultiArray,
                sonid: list.length > 0 ? list[0].id : 0
            })

        })