Use vant to realize three-level linkage through background peer address data

The background data of provinces and municipalities is one level, so it is distinguished and linked according to the background parameter areaLevel.

Use the for loop plus push to realize the display of the three-level content of provinces and cities.

1. Page code

      <van-field
        v-model="bookingaddress"
        label="查勘地点"
        required
        is-link
        arrow-direction="down"
        placeholder="请选择查勘地点"
        @click="show = true"
        @click-icon="relationPicker"
        @click-input="relationPicker"
      />


      <van-popup v-model="showSelectList" round position="bottom" width="100%">
        <van-cascader
          v-model="cascaderValue"
          title="请选择查勘地点"
          :options="options"
          @close="showSelectList = false"
          @finish="onFinish"
          @change="onChange"
        />
      </van-popup>

2.methods write method

    onChange({ value }) {
      console.log(value, 'value');
      // 点击当前显示的市级列表
      var deomlist = []
      // 点击当前显示的区级列表
      var mindeomlist = []
      var that = this
      // 点击获取对应下级地址   this.selectList 代表后台返回的地址数据
      for (let index = 0; index < this.selectList.length; index++) {
        if (this.selectList[index].parentCode == value && this.selectList[index].areaLevel == 2) {
          // if (deomlist) {
          deomlist.push(this.selectList[index])
          // }
        } else if (this.selectList[index].parentCode == value && this.selectList[index].areaLevel == 3) {
          mindeomlist.push(this.selectList[index])
        }
      }
      // 市级显示
      for (let index = 0; index < that.options.length; index++) {
        if (that.options[index].value == value) {
          that.options[index].children = []
          for (let list = 0; list < deomlist.length; list++) {
            that.options[index].children.push({text: `${deomlist[list].areaName}`, value: `${deomlist[list].areaCode}`, children: []})
          }
        }
      }
      // 区级显示
      for (let index = 0; index < that.options.length; index++) {
        for (let num = 0; num < that.options[index].children.length; num++) {
          if (that.options[index].children[num].value == value) {
            // console.log(that.options[index].children[num], '当前位置');
            that.options[index].children[num].children = []
            for (let deom = 0; deom < mindeomlist.length; deom++) {
              that.options[index].children[num].children.push({text: `${mindeomlist[deom].areaName}`, value: `${mindeomlist[deom].areaCode}`})
            }
          }
        }
      }
    },
    onFinish({ selectedOptions }) {
      this.showSelectList = false;
      this.bookingaddress = selectedOptions.map((option) => option.text).join('/');
      console.log(selectedOptions.map((option) => option.text));
      // 接口参数赋值
      this.adress1 = selectedOptions.map((option) => option.value)[0]  
      this.adress2 = selectedOptions.map((option) => option.value)[1]   
      this.adress3 = selectedOptions.map((option) => option.value)[2]
      console.log(this.adress1, this.adress2, this.adress3);
    }