使用vant通过后台同级地址数据实现三级联动

后台数据省市区是一个层级的 ，因此根据后台参数areaLevel进行区分联动。

使用for循环加push实现省市区三级内容的显示。

1.页面代码

      <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写方法

    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);
    }