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