關於element-ui級聯菜單（城市三級聯動菜單）和回顯問題

代碼最下面

各項的參數截圖

---

代碼以下

<el-form-item label="戶籍所在地" prop="censusLand" style="padding-left:57px">
    <el-cascader
      v-model="ruleForm.censusLand"
      style="width:180px;padding-left:7px;width:270px"
      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
],

---

大概就這些了，但願對你們有幫助