vue城市选择器2级只选择省份和城市

导入城市数据js,以自己的路径位置

import {chinaProvincesCitys} from '@/api/city'

使用

 <el-cascader
          clearable
          v-model="pca2"
          :options="chinaProvincesCitys"
          @change="handleChange2"></el-cascader>

data

chinaProvincesCitys: chinaProvincesCitys,  
pca2:[],

methods

   handleChange2(value) {
      this.pca2=value;
      this.queryParams.province=this.pca2[0];
      this.queryParams.city=this.pca2[1];
    },

如果有编辑，需要回显城市

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

 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 ) {
            this.pca = [province, city ];
            return;
        }
      }
      // 如果找不到匹配的数据，清空级联选择器
      this.pca = [];
    },