?

<el-selectstyle="width: 145px"placeholder="請選擇省"v-model="checkRegion.provinceId"@change="checkProvince"><el-optionv-for="item in regionList.province":key="item.id":label="item.name":value="item.id"></el-option></el-select><el-selectstyle="width: 145px"placeholder="請選擇市"v-model="checkRegion.cityId"@change="checkCity"><el-optionv-for="item in regionList.city":key="item.id":label="item.name":value="item.id"></el-option></el-select><el-selectstyle="width: 145px"placeholder="區域 / 街道"v-model="checkRegion.areaId"@change="checkArea"><el-optionv-for="item in regionList.area":key="item.id":label="item.name":value="item.id"></el-option></el-select> regionList: {//地區列表 數據province: null, //省city: null, // 市area: null, //區},checkRegion: {}, //選中的 provinceId cityId areaId // 選中省checkProvince() {// 先判斷有沒有選過省if (this.regionList.province == null &&this.checkRegion.provinceId == null)return;// 拿到上一級id請求下一級列表let pid = this.checkRegion.provinceId;// 每次選擇省的時候判斷 有沒有選過市和區 如果選擇過要清空重新選if (this.checkRegion.areaId) delete this.checkRegion.areaId;if (this.checkRegion.cityId) delete this.checkRegion.cityId;this.$axios({method: "post",url: `/api/region/index`,data: { pid },}).then((res) => {this.regionList.city = res.data.data;// console.log(this.regionList)});},// 選中市checkCity() {// 先判斷有沒有選過市if (this.regionList.city == null && this.checkRegion.cityId == null)return;// 拿到上一級id請求下一級列表let pid = this.checkRegion.cityId;// 每次選擇市的時候判斷 有沒有選過區 如果選擇過要清空重新選if (this.checkRegion.areaId) delete this.checkRegion.areaId;this.$axios({method: "post",url: `/api/region/index`,data: { pid },}).then((res) => {this.regionList.area = res.data.data;// console.log(this.regionList)});},// 選中區checkArea() {console.log(this.regionList);console.log(this.checkRegion);},

?

總結

以上是生活随笔為你收集整理的省市级联动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。