vue省市区城市三级选择器

import {chinaProvincesCityAreas} from '@/api/cityarea'

data

pca:[],
chinaProvincesCityAreas: chinaProvincesCityAreas,

使用

<el-cascader
  v-model="pca"
  :options="chinaProvincesCityAreas"
  @change="handleChange"></el-cascader>

handleChange(value) {
  console.log(value);
},

获取值在submit里

if(this.pca.length==3){
  this.form.province = this.pca[0] ;
  this.form.city = this.pca[1] ;
  this.form.district = this.pca[2] ;
}else{
  this.form.province ='' ;
  this.form.city = '' ;
  this.form.district = '' ;
}

显示

if(this.form.province && this.form.city && this.form.district){
  this. setCascaderValue(this.form.province, this.form.city, this.form.district)
}

 setCascaderValue(province, city, district) {
      // 在省级数据中查找
      const provinceItem = this.chinaProvincesCityAreas.find(item => item.value === province);
      if (provinceItem && provinceItem.children) {
        // 在市级数据中查找
        const cityItem = provinceItem.children.find(item => item.value === city);
        if (cityItem && cityItem.children) {
          // 在区县级数据中查找
          const districtItem = cityItem.children.find(item => item.value === district);
          if (districtItem) {
            // 找到完整的路径，设置级联选择器的值
            this.pca = [province, city, district];
            return;
          }
        }
      }
      // 如果找不到匹配的数据，清空级联选择器
      this.pca = [];
    },

cityarea.js非常大，给看看格式

export const chinaProvincesCityAreas =[
  {
    "label":"北京市",
    "value":"北京市",
    "children":[
      {
        "label":"北京市",
        "value":"北京市",
        "children":[
          {
            "label":"东城区",
            "value":"东城区"
          },
          {
            "label":"西城区",
            "value":"西城区"
          },
          {
            "label":"朝阳区",
            "value":"朝阳区"
          },
          {
            "label":"丰台区",
            "value":"丰台区"
          },
          {
            "label":"石景山区",
            "value":"石景山区"
          },
          {
            "label":"海淀区",
            "value":"海淀区"
          },
          {
            "label":"门头沟区",
            "value":"门头沟区"
          },
          {
            "label":"房山区",
            "value":"房山区"
          },
          {
            "label":"通州区",
            "value":"通州区"
          },
          {
            "label":"顺义区",
            "value":"顺义区"
          },
          {
            "label":"昌平区",
            "value":"昌平区"
          },
          {
            "label":"大兴区",
            "value":"大兴区"
          },
          {
            "label":"怀柔区",
            "value":"怀柔区"
          },
          {
            "label":"平谷区",
            "value":"平谷区"
          },
          {
            "label":"密云区",
            "value":"密云区"
          },
          {
            "label":"延庆区",
            "value":"延庆区"
          }
        ],

      }
    ],

  },
]