91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

詳解element-ui級聯菜單(城市三級聯動菜單)和回顯問題

發布時間:2020-09-22 16:18:12 來源:腳本之家 閱讀:1494 作者:VUEJS 欄目:web開發

代碼最下面

詳解element-ui級聯菜單(城市三級聯動菜單)和回顯問題

各項的參數截圖

詳解element-ui級聯菜單(城市三級聯動菜單)和回顯問題

詳解element-ui級聯菜單(城市三級聯動菜單)和回顯問題

詳解element-ui級聯菜單(城市三級聯動菜單)和回顯問題

詳解element-ui級聯菜單(城市三級聯動菜單)和回顯問題

詳解element-ui級聯菜單(城市三級聯動菜單)和回顯問題

代碼如下

 <el-form-item label="戶籍所在地" prop="censusLand" >
 <el-cascader
  v-model="ruleForm.censusLand"
  
  placeholder="請選擇省市區"
  :options="cascaderData1"
  @expand-change="censusLandChange"
  :props="{
  value: 'id',
  label: 'name',
  children: 'cities'
  }"
 ></el-cascader>
 </el-form-item>
data (){
 retutn {
  ruleForm: {
   censusLand // 雙向綁定
  },
  cascaderData1: [], // 戶籍省 一級菜單
 }
}
// 戶籍所在地-選中后下一級
censusLandChange(val) {
 this.getCensusLand(val);
},
// 戶籍所在地
getCensusLand(val) {
 // console.log(val);
 let idArea;
 let sizeArea;
 if (!val) {
 idArea = null;
 sizeArea = 0;
 } else if (val.length === 1) {
 idArea = val[0];
 sizeArea = val.length; // 3:一級 4:二級 6:三級
 } else if (val.length === 2) {
 idArea = val[1];
 sizeArea = val.length; // 3:一級 4:二級 6:三級
 }

 this.$get(
 "/stu/student/getAreaId",
 {
  AreaId: idArea
 },
 res => {
  // console.log("1111",res);
  if (sizeArea === 1) {
  // 點擊一級 加載二級 市
  this.cascaderData1.map((value, i) => {
   if (value.id === val[0]) {
   if (!value.cities.length) {
    value.cities = res.data.map((value, i) => {
    return {
     id: value.id,
     name: value.name,
     cities: []
    };
    });
   }
   }
  });
  } else if (sizeArea === 2) {
  // 點擊二級 加載三級 區
  this.cascaderData1.map((value, i) => {
   if (value.id === val[0]) {
   value.cities.map((value, i) => {
    if (value.id === val[1]) {
    if (!value.cities.length) {
     value.cities = res.data.map((value, i) => {
     return {
      id: value.id,
      name: value.name
     };
     });
    }
    }
   });
   }
  });
  }
  // console.log(this.ruleForm.censusLand);
 },
 err => {}
 );
},

回顯時,注意要同步(通過new Promise)

this.getAllMe(); // 先獲取一級的城市
// 在回顯數據的res 里放入這段代碼(視情況而定)
// 需要先加載市級菜單,再去加載省級的()
 // 戶口所在地
 new Promise((resolve, reject) => {
 let val = [res.data.getupdate.domicileProvinceId];
 let idArea;
 let sizeArea;
 if (!val) {
  idArea = null;
  sizeArea = 0;
 } else if (val.length === 1) {
  idArea = val[0];
  sizeArea = val.length; // 3:一級 4:二級 6:三級
 }
 this.$get(
  "/stu/student/getAreaId",
  {
  AreaId: idArea
  },
  res => {
  // console.log("1111", res);

  if (sizeArea === 1) {
   // 點擊一級 加載二級 市
   this.cascaderData1.map((value, i) => {
   if (value.id === val[0]) {
    if (!value.cities.length) {
    value.cities = res.data.map((value, i) => {
     return {
     id: value.id,
     name: value.name,
     cities: []
     };
    });
    }
   }
   });
  }
  resolve(res);
  },
  err => {
  reject(err);
  }
 );
 })
 .then(data => {
 // 通過他們去獲取第三級的
  this.getCensusLand([
  res.data.getupdate.domicileProvinceId, // 一級
  res.data.getupdate.domicileCityId // 二級
  ]); // 戶口所在地
 })
 .catch(err => {
  console.log(err);
 });

最后再雙向綁定給censusLand

// 戶籍
censusLand: [
 res.data.getupdate.domicileProvinceId * 1,
 res.data.getupdate.domicileCityId * 1,
 res.data.getupdate.domicileDistrictId * 1
],

大概就這些了,希望對大家有幫助。也希望大家多多支持億速云。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

盖州市| 镇平县| 正阳县| 平乐县| 河源市| 耒阳市| 胶南市| 远安县| 新巴尔虎右旗| 卢湾区| 大荔县| 鄂州市| 玛多县| 盐亭县| 洛浦县| 济源市| 芦山县| 集安市| 衡阳市| 元谋县| 台中市| 铁岭县| 高唐县| 巧家县| 富宁县| 大姚县| 永昌县| 文安县| 翁牛特旗| 应城市| 襄汾县| 多伦县| 高雄县| 黎平县| 雷州市| 邹城市| 涪陵区| 正蓝旗| 喀喇| 宾阳县| 莫力|