微信小程序,动态设置三级联动, 省市区街道

1.第一步   传parentId=0   查询省份
2.第二步   选择省份,传pathId=选择省份的pathId, 不传parentId,会查询出   市/县数据
3.第三步   根据选择县的parentId 查询街道数据,传parentId=选择的县id
4.选择结果回显   显示所选择的 path 以/分割   取最后一级
1
2
3
4

  
    
      
        
          
            {{item.name}}
          
        
      
      
        
      
    
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Page({
  data: {
      //行政区域
    areaAllList: [],
    columns: [
      // {
      //   values: '', // one,                    //可以是数组，或者对象数组
      //   className: 'column1' //选择器的第一列
      // },
      // {
      //   values: '', // two[one[0].name],       //默认选中two对象中的第一项
      //   className: 'column2', //选择器的第二列
      // },
      // {
      //   values: '', // three[two[one[0].name][0].name],  //默认选中three对象中的第一项
      //   className: 'column3', //选择器的第三列
      // }
    ],
    one: [],
    two: [],
    areaName:'区域选择'
  }
  })
  onLoad(options) {
    //行政区划   areaAllList
    this.getParent() //
},
method:{
  areaClick(e) {
  //点击省, 请求市级的数据
    const item = e.currentTarget.dataset.item
    this.setData({
      parentId: item.id
    })
    this.initPath(item.pathId)
  },
  getParent() {
  //获取顶部的省级
    fetch.apply.getAreaAll({
      parentId: 0
    }, res => {
      if (res.flag == 0) {
        this.setData({
          areaAllList: res.object
        })
      }
    })
  },
  initPath(pathId) {
  // 1写入 选择器第一级 数据 ;  2将二级数据, 做成 columns 的格式,并写入
    fetch.apply.getAreaAll({
      pathId: pathId
    }, res => {
      if (res.flag == 0 && res.object.length > 0) {
        var v1 = []
        res.object.forEach((e, i) => {
          v1[e.name] = e.childs
        });
        this.setData({
          one: res.object,
          two: v1,
        })
        this.setData({
          columns: [{
              values: this.data.one, //可以是数组，或者对象数组
              className: 'column1', //选择器的第一列
            },
            {
              values: this.data.two[this.data.one[0].name], //默认选中two对象中的第一项
              className: 'column2', //选择器的第二列
              defaultIndex: 0
            },
            {
              values: '', // this.data.three[this.data.two[this.data.one[0].name][0].name], //默认选中three对象中的第一项
              className: 'column3', //选择器的第三列
            }
          ],
        })
      } else {
        this.setData({
          one: '',
          two: '',
          columns: []
        })
      }
    })
  },
  confirmArea(event) {
    let value = event.detail.value
    if (!value[0]) {
      this.setData({
        areaPathId: '',
        top_num: 0
      })
    }
    if (!value[0]) {
      this.setData({
        areaPathId: ''
      })
      this.setData({
        list: []
      })
    } else if (!value[1]) {
      this.setData({
        areaPathId: ''
      })
      this.setData({
        list: []
      })
    } else if (!value[2]) {
      var areaPath = value[1].path;
      var areaName = ''
      if (areaPath.indexOf('/') > 0) {
        areaName = this.getAreaname(areaPath)
      } else {
        areaName = areaPath
      }
      this.setData({
        areaName: areaName,
        areaPathId: value[1].pathId
      })
      this.setData({
        list: []
      })
    } else {
      var areaPath = value[2].path;
      var areaName;
      if (areaPath.indexOf('/') > 0) {
        areaName = this.getAreaname(areaPath)
      }
      this.setData({
        areaName: areaName,
        areaPathId: value[2].pathId
      })
      this.setData({
        list: []
      })
    }

    this.getList()
    this.areaClose()
  },
 getAreaname(areaPath) {
    var areaName
    var arr = areaPath.split("/");
    console.log('dfdfdf', arr[arr.length - 1])
    areaName = arr[arr.length - 1]
    return areaName
  },
  chgArea(event) {
  // 滚动选择器, 通过第二级,获取最后一级, 街道数据
    let picker = event.detail.picker
    let value = event.detail.value
    let index = event.detail.index

    //在change 第一列的时候，动态更改第二列的数据
    //setColumnValues是vant自带的实例方法
    //第一个参数是列数，从0开始；第二个参数是第二列应该显示的数据
    picker.setColumnValues(1, this.data.two[value[0].name])

    //此处vant-picker有一个bug，当只滑动第一级时，返回的value数据是错误的，需要我们自己根据第二 级计算，去获取第三级数据
    if (index == 0) {
      //切换 市, 街道清空
       picker.setColumnValues(2, '')
    } else if (index == 1) {
      var v2 = {}
      fetch.apply.getAreaAll({
        parentId: value[index].id
      }, res => {
        if (res.flag == 0) {
          v2[value[index].name] = res.object
          this.setData({
            three: v2
          })
          picker.setColumnValues(2, this.data.three[value[1].name])
        }
      })
    } else {
      picker.setColumnValues(2, this.data.three[value[1].name])
    }
  },
  areaClose() {
    this.selectComponent('#areaAll').toggle()
  },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185

技术要点

1 按照固定格式, 设置columns 的数据
2 picker.setColumnValues() 方法,获取数据

columns 的数据 格式

var one = [
  { id: 111, 'name': '杭州' },
  { id: 222, 'name': '宁波' },
]
var two = {
  '杭州': [
    { id: 11100, 'name': '国杭州' },
    { id: 22201, 'name': '国宁波' },
  ],
  '宁波': [
    { id: 11102, 'name': '中杭州' },
    { id: 22203, 'name': '中宁波' },
    { id: 33304, 'name': '中温州' },
  ]
}
var three = {
  '国杭州': [
    { id: 1110000, 'name': 'aaa' },
    { id: 2220101, 'name': 'bbb' },
  ],
  '国宁波': [
    { id: 1110102, 'name': 'ccc' },
    { id: 2220103, 'name': 'ddd' },
    { id: 3330104, 'name': 'eee' },
  ],
  '中杭州': [
    { id: 1110205, 'name': 'fff' },
    { id: 2220206, 'name': 'ggg' },
    { id: 3330207, 'name': 'hhh' },
  ],
  '中宁波': [
    { id: 1110308, 'name': 'www' },
    { id: 2220309, 'name': 'ttt' },
    { id: 3330310, 'name': 'yyy' },
  ],
  '中温州': [
    { id: 1110411, 'name': 'jjj' },
    { id: 2220412, 'name': 'kkk' },
    { id: 3330413, 'name': 'ppp' },
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41