微信小程序 二级联动（多级联动）

这阵子公司突然需要开发小程序，于是乎恶补下，想必时间已过两年，小程序应该相当成熟了，未曾料到一个二级联动就各种模糊不清。官方给出案例，但是写的太乱，可读性差，还会写些多余的东西进去，容易误导我们这些小白...于是开启了百度之路，看到网友写的博客深感痛心，竟然有直接copy官案，大家都是拿来主义，多余的也copy...算了还是自己动手吧。

上代码：

html:

<picker mode="multiSelector" bindchange="bindQualificationChange" bindcolumnchange="bindQualificationColumnChange" value="{{qualificationIndex}}" range="{{qualificationArray}}">
   <view class="weui-select ellipsis" wx:if="{{qualificationName}}">{{qualificationName+(categoryBrandName?'-'+categoryBrandName:categoryBrandName)}}</view>
   <view class="weui-select" wx:else>请选择供应商要求</view>
</picker>

js:

data:{
   qualificationIndex: ['0', '0'],//索引
    qualificationArray: [
      ['品牌/代理授权书', '经营许可证', '无'],
      ['同品类代理证', '同品牌-同品类代理证']
    ], //付款类型数组
    objectQualificationArray: [{//第二级
        "No": "1",
        "parid": "1",//表示第一级里的第一个
        "regname": "同品类代理证"
      },
      {
        "No": "2",
        "parid": "1",
        "regname": "同品牌-同品类代理证"
      },
        {
        "No": "3",
        "parid": "2",表示第一级里的第二个
        "regname": "请不要开车"
      }
    ],
    qualificationType: "", //	*供应商要求资质类型 0 品牌/代理授权书 1 经营许可证 2 软件代理资质 3 无
    qualificationName: "",//第一级名称
    categoryBrandType: "", //	*供应商要求品牌品类类型 0 同品牌 1 同品类品牌
    categoryBrandName: "",//第二级名称

},
bindQualificationChange: function (e) {//供应商要求
    let vm = this;
    vm.setData({
      "qualificationIndex[0]": e.detail.value[0],
      "qualificationIndex[1]": e.detail.value[1],
      "qualificationName": vm.data.qualificationArray[0][e.detail.value[0]],
      "categoryBrandName": vm.data.qualificationArray[1][e.detail.value[1]] || "",
      "qualificationType": e.detail.value[0], //	资质类型 
      "categoryBrandType": e.detail.value[1] || "", //	品牌品类类型
    })
  },
  bindQualificationColumnChange: function(e) {//供应商要求
    let vm = this;
    // console.log('修改的列为', e.detail.column, '，值为', e.detail.value, vm.data.objectQualificationArray);
    switch (e.detail.column) {
      case 0:
        let list = [];
        // 此循环是进行第二级分组赋值
        for (var i = 0; i < vm.data.objectQualificationArray.length; i++) {
          if (e.detail.value + 1 == vm.data.objectQualificationArray[i].parid) {
            list.push(vm.data.objectQualificationArray[i].regname)
          }
        }
        vm.setData({
          "qualificationArray[1]": list,
          "qualificationIndex[0]": e.detail.value,
          "qualificationIndex[1]": 0
        })

    }
  },

 

 

效果图：

鄙人比较懒就直接贴项目代码了，作为伸手党，毕竟别人的成果借鉴过来还是要消化的，不然永远都是借鉴

 

参考文献：

1、官方案例

2、https://blog.csdn.net/sigesone/article/details/80611984 二级城市联动写的不错