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

Love The Way You Lie 2024-04-19 12:51 30阅读 0赞

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

结合服务端返回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() {
    
      }
    })

[Link 1]: https://blog.csdn.net/lyh1299259684/article/details/100977818