基于elementUI中级联选择器( el-cascader )，完成省市区三级联动并回显

我以为你知道，我不知道你知道我知道的，你怎么知道我知道你知道的，我以为你会知道我知道的

二三级城市数据下载地址：https://github.com/541073028/country-data

---

<el-form-item label="场馆地址：" prop="selectedOptions">
    <el-cascader :options="options" v-model="selectedOptions" @change="handleChangeData" :separator="' '"></el-cascader>
    <el-input v-model="formCustom.Detail"></el-input>
</el-form-item>

引入数据：
import options from "../../util/country-level3-data.js";

data中：
selectedOptions: [], //存放默认值
options: options //存放城市数据
formCustom:{
    Detail: "", //详细地址信息
    DetailMap: "", //城市地址详细地址拼接
}

选地址并传值

// 触发三级联动 我们这是需要传字符串所以需要把数组转为字符串并用"/"间隔
handleChangeData(value) {
   this.formCustom.address = value.join("/");//获取到城市地址
}

//编辑接口
editList(){
     // 字符串拼接地址 详细地址 "\xa0"空格间隔
     this.formCustom.DetailMap += this.formCustom.address + "\xa0" + this.formCustom.Detail;
     //传参 传过去就行了
     address: this.formCustom.DetailMap
}

回显

// 显示对应数据
showList() {
      const req = {传对应参数};
      gymnasiumLookVue(req).then(res => {
        if (res.data.code == "200") {
          this.introductionListLook = res.data.data.rows;
          this.introductionListLook.map(item => {
            // 地址回显
            // 切开省份地址和地址描述
            //通过刚才添加的空格把两者区分开 下标为0就是三级联动 ，为1就是三级联动后面的具体地址描述
            let addressData = item.address.split("\xa0");
            //三级联动的value要与label相同，所以不能有"/"切割开就好了
            let selectData = addressData[0].split("/");
            // 地址省份( 三级联动 )
            this.selectedOptions = selectData;
            // 省份城市后面的具体描述
            this.formCustom.Detail = addressData[1];
          });
        } else {
          return false;
        }
      });
    }