小程序三级联动结合vant weap（有赞）的picker选择器和popup弹出层

小程序三级联动结合vant weap（有赞）的picker选择器和popup弹出层

首先看数据结构

做的是地址联动和工种联动，数据结构基本相同

只贴一种地址联动的代码就好，用的比较多

  
addressList: function() {
//这个就是接口拿到地址数据resume.addressList().then(res => {this.setData({areaList: res.data[0].childSRegion});var areaList = this.data.areaList;this.setData({columns22: [{values: areaList,className: 'column1'},{values: areaList[0].childSRegion,className: 'column2',defaultIndex: 0},{values: areaList[0].childSRegion[0].childSRegion,className: 'column3',defaultIndex: 0}]});
//单独开一个setData放三级联动的结构，里面只放这一关数组，不要再放其他的了（否则错都查不到）values里面放第一级到第三级，className这个就没太所谓，defaultIndex：初始选中项的索引，默认为 0}).catch(res => {});},

json里面要引需要用到的vant的组件，例如这样，地址根据自己装的地址去配置

{"usingComponents": {"van-field": "/miniprogram_npm/vant-weapp/field/index","van-picker": "/miniprogram_npm/vant-weapp/picker/index","van-popup": "/miniprogram_npm/vant-weapp/popup/index"},"navigationBarTitleText": "地址联动"
}

wxml代码

这个里面就放了一个输入框，一个popup层，一个picker

      <van-field value="{{ regionValue  }}" label="工作城市" placeholder="选择工作城市" border="{{ false }}" readonly class="form-input-item" right-icon="arrow" icon="arrow" bindtap="showPopup22" /><van-popup show="{{show22}}" position="bottom"><van-picker show-toolbar title="请选择工作城市" columns="{{ columns22 }}" value-key="name" bind:change="onChange22" bind:confirm="onConfirm22" bind:cancel="onCancel" /></van-popup>

js事件

  //展示popup层//把名称初始给三级联动第一个//id也对应三级联动的第一个//这里即：北京/北京市/东城区showPopup22: function() {this.setData({regionValue1:this.data.areaList[0].name +'/' + this.data.areaList[0].childSRegion[0].name +'/' + this.data.areaList[0].childSRegion[0].childSRegion[0].name,region1: this.data.areaList[0].childSRegion[0].childSRegion[0].id,show22: true});},
//选择改变监听//对应picker里面的选项改变时触发//改变第一级同时会改变第二级和第三级onChange22(event) {console.log(event);const { picker, value, index } = event.detail;if (event.detail.index === 0) {picker.setColumnValues(1, value[0].childSRegion);picker.setColumnValues(2, value[0].childSRegion[0].childSRegion);this.setData({regionValue1: value[0].name+'/'+ value[0].childSRegion[0].name+'/'+value[0].childSRegion[0].childSRegion[0].name,region1: value[0].childSRegion[0].childSRegion[0].id})
//这个setData的是滑动第一级时触发，这改变了第一级的数值，并不会改变后面的数值，setDate//每一层在setData是有必要的，不然名称和id可能传的并非想要选中的，可以实时console.log(event)查看里面的值对应上} else if (event.detail.index === 1) {picker.setColumnValues(2, value[1].childSRegion);this.setData({regionValue1: value[0].name+'/'+value[1].name+'/'+ value[1].childSRegion[0].name,region1: value[1].childSRegion[0].id})} else if (event.detail.index == 2) {picker.setColumnValues(2, value[1].childSRegion);this.setData({regionValue1: value[0].name+'/'+value[1].name+'/'+ value[2].name,region1: value[2].id})}//setData里面更新索引所对应的名称和id//毕竟自己显示用名称，给后台要给对应的id},
//工作城市确定//确定只是用来明确显示用的名称和可能需要给后台的id（毕竟上面一步只是改变，没有确定，还不能给他赋值）//确定了就要关闭popup层了，该拿到的都已经拿到了onConfirm22: function() {this.setData({regionValue: this.data.regionValue1,region: this.data.region1});this.onCancel();},
// 关闭popup层onCancel() {this.setData({show22: false});},