小程序前端配合后端实现动态三级联动

本文只贴最终实现代码不作任何解释，如果你不太理解此代码，请先阅读我上篇文章点击穿越

结合服务端返回json（这个json你要跟后台约束好，前端进行处理）实现三级联动效果，最终代码

Page({
  data: {
    columns: [],
    one: [],
    two: {},
    three: {}
  },

  onLoad() {
    //模拟后台返回json
    let json = [
      [
        { id: 111, fatherId: 0, 'name': '杭州' },
        { id: 222, fatherId: 0, 'name': '宁波' }
      ], 
      [
        { id: 11100, fatherId: 111, 'name': '国杭州' },
        { id: 22201, fatherId: 111, 'name': '国宁波' },
        { id: 11102, fatherId: 222, 'name': '中杭州' },
        { id: 22203, fatherId: 222, 'name': '中宁波' },
        { id: 33304, fatherId: 222, 'name': '中温州' }
      ], 
      [
        { id: 1110000, fatherId: 11100, 'name': 'aaa' },
        { id: 2220101, fatherId: 11100, 'name': 'bbb' },
        { id: 1110102, fatherId: 22201, 'name': 'ccc' },
        { id: 2220103, fatherId: 22201, 'name': 'ddd' },
        { id: 3330104, fatherId: 22201, 'name': 'eee' },
        { id: 1110205, fatherId: 11102, 'name': 'fff' },
        { id: 2220206, fatherId: 11102, 'name': 'ggg' },
        { id: 3330207, fatherId: 11102, 'name': 'hhh' },
        { id: 1110308, fatherId: 22203, 'name': 'www' },
        { id: 2220309, fatherId: 22203, 'name': 'ttt' },
        { id: 3330310, fatherId: 22203, 'name': 'yyy' },
        { id: 1110411, fatherId: 33304, 'name': 'jjj' },
        { id: 2220412, fatherId: 33304, 'name': 'kkk' },
        { id: 3330413, fatherId: 33304, 'name': 'ppp' }
      ]
    ]

    //构造第一列
    let one = json[0]
    //构造第二列
    let two = json[1]
    let twoResult = {}
    for (let i = 0; i < two.length; i++) {
      for (let j = 0; j < one.length; j++) {
        let fatherObj = one[j]
        let childObj = two[i]
        if (fatherObj.id == childObj.fatherId) {          //说明是一类
          if (twoResult[fatherObj.name] == undefined) {   //没有初始化，可直接赋值
            twoResult[fatherObj.name] = [childObj]
          } else {                                        //已经初始化，直接追加新值
            twoResult[fatherObj.name][twoResult[fatherObj.name].length] = childObj
          }
        }
      }
    }
    //构造第三列，同理，跟构造第二列一样玩法
    let three = json[2]
    let threeResult = {}
    for (let k = 0; k < three.length; k++) {
      for (let n = 0; n < two.length; n++) {
        let fatherObj = two[n]
        let childObj = three[k]
        if (fatherObj.id == childObj.fatherId) {
          if (threeResult[fatherObj.name] == undefined) {
            threeResult[fatherObj.name] = [childObj]
          } else {
            threeResult[fatherObj.name][threeResult[fatherObj.name].length] = childObj
          }
        }
      }
    }

    this.setData({
      columns: [
        {
          values: one,                              //可以是数组，或者对象数组
          className: 'column1'                      //选择器的第一列
        },
        {
          values: twoResult[one[0].name],           //默认选中two对象中的第一项
          className: 'column2',                     //选择器的第二列
        },
        {
          values: threeResult[twoResult[one[0].name][0].name],  //默认选中three对象中的第一项
          className: 'column3',                     //选择器的第三列
        }
      ],
      one: one,
      two: twoResult,
      three: threeResult
    })
  },

  onConfirm(event) {
    let value = event.detail.value

    //将选中的文字和对应的id拿出来使用
    wx.showModal({
      title: '',
      content: '您选中了“' + value[0].name + ',' + value[1].name + ',' + value[2].name + '”, id为“'
        + value[0].id + ',' + value[1].id + ',' + value[2].id + '”',
      showCancel: false
    })
  },

  onChange(event) {
    let one = this.data.one
    let two = this.data.two
    let three = this.data.three

    //在change 第一列的时候，动态更改第二列的数据
    //setColumnValues是vant自带的实例方法
    //第一个参数是列数，从0开始；第二个参数是第二列应该显示的数据
    let picker = event.detail.picker
    let value = event.detail.value
    let index = event.detail.index
    
    picker.setColumnValues(1, two[value[0].name]);
    //此处vant-picker有一个bug，当只滑动第一级时，返回的value数据是错误的，需要我们自己根据第二级计算，去获取第三级数据
    if (index == 0) {
      picker.setColumnValues(2, three[(two[value[0].name][0]).name]);
    } else {
      picker.setColumnValues(2, three[value[1].name]);
    }
  },

  onCancel() {

  }
})