vant的picker组件自定义三级联动

任何组件都有自己的要求,按照要求来做,就没有问题;vant的picker组件一样,昨天接到一个需求,地址信息是一个三维数组(一维数组请参考上一篇文章);需要自己做联动,vant组件又要求values只能传string类型的数组,没办法,既然用了你的组件,你要什么类型的只能组给你了.具体看下面代码(此代码只适用于vant2.4.5版本之前,2.4.5之后vant重新更新了多级联动的API哦)

<van-popup v-model="showPicker" position="bottom">
        <van-picker
            show-toolbar
            :columns="columns"
            @change="onChange"
            @cancel="showPicker = false"
            @confirm="onConfirm"
        />
    </van-popup>

export default {
  data() {
    return {
      showPicker:false,
      defaultAddress:["北京", "北京", "东城区"],
    };
  },
  computed:{
    columns:function(){
      let provinceList=[];
      let citys = [];
      for(let i=0;i<provinces.length;i++){
        if(i==0){
          citys=provinces[0].children;
        }
        provinceList.push(provinces[i].name)
      }
      let cityList=this.getStringArr(provinceList[0],provinces);
      let countyList = this.getStringArr(cityList[0],citys)
      let backInfo=[{
        values:provinceList
      },{
        values:cityList
      },{
        values:countyList
      }]
      return backInfo
    }
  },
  methods: {
    /**
     * 事件:监听三级联动事件
     */
    onChange(picker, values) {
      let citys=[];
      let countyList=[];
      for(let val of provinces){
        if(val.name==values[0]){
          citys = val.children;
          break;
        }
      }
      if(this.defaultAddress[0]!=values[0]){
        let cityList=this.getStringArr(values[0],provinces)
        countyList = this.getStringArr(cityList[0],citys)
        picker.setColumnValues(1,cityList);
        picker.setColumnValues(2,countyList);
        this.defaultAddress = [values[0],cityList[0],countyList[0]];
      }else if(this.defaultAddress[1]!=values[1]){
        countyList = this.getStringArr(values[1],citys)
        picker.setColumnValues(2,countyList);
        this.defaultAddress = [values[0],values[1],countyList[0]];
      }else if(this.defaultAddress[2]!=values[2]){
        this.defaultAddress=values;
      }
      console.log(this.defaultAddress)
    },
    /**
     * 工具:获取当前省/市的string数组
     */
    getStringArr(address,addressList){
      let sonList=[];
      for(let val of addressList){
        if(val.name==address){
          sonList = val.children;
          break;
        }
      }
      let stringArr=[];
      for(let value of sonList){
        stringArr.push(value.name)
      }
      return stringArr
    },
    /**
     * 获取对应地址id值
     */
    getAddressCode(){
      let codes={}
      for(let val of provinces){
        if(val.name==this.defaultAddress[0]){
          codes.provinceId = val.id;
          for(let city of val.children){
            if(city.name==this.defaultAddress[1]){
              codes.cityId = city.id;
              for(let county of city.children){
                if(county.name==this.defaultAddress[2]){
                  codes.countyId = county.id;
                  break
                }
              }
              break;
            }
          }
          break;
        }
      }
      console.log(codes)
    },
    /**
     * 事件:确认选择三级联动
     */
    onConfirm(){
      this.showPicker = false;
      this.getAddressCode()
    },