详解element-ui级联菜单(城市三级联动菜单)和回显问题


Posted in Javascript onOctober 02, 2019

代码最下面

详解element-ui级联菜单(城市三级联动菜单)和回显问题

各项的参数截图

详解element-ui级联菜单(城市三级联动菜单)和回显问题

详解element-ui级联菜单(城市三级联动菜单)和回显问题

详解element-ui级联菜单(城市三级联动菜单)和回显问题

详解element-ui级联菜单(城市三级联动菜单)和回显问题

详解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
],

大概就这些了,希望对大家有帮助。也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
sina的lightbox效果。
Jan 09 Javascript
经常用的图片在容器中的水平垂直居中实例
Jun 10 Javascript
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
Feb 03 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
Sep 29 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
Nov 06 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
Feb 16 Javascript
使用store来优化React组件的方法
Oct 23 Javascript
zTree树形菜单交互选项卡效果的实现方法
Dec 25 Javascript
浅谈webpack 构建性能优化策略小结
Jun 13 Javascript
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
深入探索VueJS Scoped CSS 实现原理
Sep 23 Javascript
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 Vue.js
基于iview-admin实现动态路由的示例代码
Oct 02 #Javascript
你不可不知的Vue.js列表渲染详解
Oct 01 #Javascript
基于VUE的v-charts的曲线显示功能
Oct 01 #Javascript
Echarts地图添加引导线效果(labelLine)
Sep 30 #Javascript
javascript实现摄像头拍照预览
Sep 30 #Javascript
java和js实现的洗牌小程序
Sep 30 #Javascript
JS使用H5实现图片预览功能
Sep 30 #Javascript
You might like
php 参数过滤、数据过滤详解
2015/10/26 PHP
PHP实现验证码校验功能
2017/11/16 PHP
JQuery UI皮肤定制
2009/07/27 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
2013/12/12 Javascript
javaScript中push函数用法实例分析
2015/06/08 Javascript
js使用cookie记录用户名的方法
2015/11/26 Javascript
针对JavaScript中this指向的简单理解
2016/08/26 Javascript
深入理解jQuery3.0的domManip函数
2016/09/01 Javascript
基于JavaScript实现自动更新倒计时效果
2016/12/19 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
2016/12/22 Javascript
js实现图片左右滚动效果
2017/02/27 Javascript
vue2.0中goods选购栏滚动算法的实现代码
2017/05/17 Javascript
js推箱子小游戏步骤代码解析
2018/01/10 Javascript
vue-cli+webpack项目 修改项目名称的方法
2018/02/28 Javascript
详解vue几种主动刷新的方法总结
2019/02/19 Javascript
react 中父组件与子组件双向绑定问题
2019/05/20 Javascript
微信小程序在线客服自动回复功能(基于node)
2019/07/03 Javascript
[47:03]Ti4第二日主赛事败者组 LGD vs iG 2
2014/07/21 DOTA
Python的Scrapy爬虫框架简单学习笔记
2016/01/20 Python
Python判断列表是否已排序的各种方法及其性能分析
2016/06/20 Python
Python中文分词工具之结巴分词用法实例总结【经典案例】
2017/04/15 Python
​如何愉快地迁移到 Python 3
2019/04/28 Python
python__name__原理及用法详解
2019/11/02 Python
django中media媒体路径设置的步骤
2019/11/15 Python
Ubuntu20下的Django安装的方法步骤
2021/01/24 Python
求职简历的自我评价怎样写好
2013/10/07 职场文书
护理专业学生的求职信范文
2013/12/11 职场文书
先进德育工作者事迹材料
2014/01/24 职场文书
素质拓展感言
2014/01/29 职场文书
综合实践教学反思
2014/01/31 职场文书
文明餐桌行动实施方案
2014/02/19 职场文书
入党积极分子培养联系人意见
2015/08/12 职场文书
2016年优秀教师先进事迹材料
2016/02/26 职场文书
送给自己的励志语句:要安静的优秀,悄无声息的坚强
2019/11/26 职场文书
2019年圣诞节祝福语集锦
2019/12/25 职场文书
Vue如何清空对象
2022/03/03 Vue.js