基於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: "", //城市地址詳細地址拼接  
    address:"",//省份城市  
}

選地址並傳值

// 觸發三級聯動 我們這是需要傳字符串所以需要把數組轉為字符串並用"/"間隔
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];

　　　　　　　// 如果有默認值不操作時把默認值傳過去

             if (this.selectedOptions) {

               this.formCustom.address = this.selectedOptions.join("/");

            }

          });
        } else {
          return false;
        }
      });
    }