详解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 相关文章推荐
js或jquery实现页面打印可局部打印
Mar 27 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
May 18 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
Oct 28 Javascript
JSON字符串转换JSONObject和JSONArray的方法
Jun 03 Javascript
浅谈jQuery 选择器和dom操作
Jun 07 Javascript
JS键盘版计算器的制作方法
Dec 03 Javascript
jquery replace方法去空格
May 08 jQuery
浅谈node的事件机制
Oct 09 Javascript
解决npm管理员身份install时出现权限的问题
Mar 16 Javascript
vuex(vue状态管理)的特殊应用案例分享
Mar 03 Javascript
微信小程序实现多选框功能的实例代码
Jun 24 Javascript
Vue实现手机计算器
Aug 17 Javascript
基于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常见的魔术方法详解
2014/12/25 PHP
PHP判断IP并转跳到相应城市分站的方法
2015/03/25 PHP
Zend Framework入门教程之Zend_Db数据库操作详解
2016/12/08 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
清华大学出版的事半功倍系列 javascript全部源代码
2007/05/04 Javascript
javascript xml为数据源的下拉框控件
2009/07/07 Javascript
Javascript this指针
2009/07/30 Javascript
超级有用的13个基于jQuery的内容滚动插件和教程
2011/07/31 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
2015/04/07 Javascript
javascript实现动态导入js与css等静态资源文件的方法
2015/07/25 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
2015/11/09 Javascript
详解js跨域原理以及2种解决方案
2015/12/09 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
2016/01/13 Javascript
jQuery属性选择器用法示例
2016/09/09 Javascript
EasyUI 结合JS导出Excel文件的实现方法
2016/11/10 Javascript
一道面试题引发的对javascript类型转换的思考
2017/03/06 Javascript
angular学习之从零搭建一个angular4.0项目
2017/07/10 Javascript
jQuery EasyUI结合zTree树形结构制作web页面
2017/09/01 jQuery
JS设计模式之数据访问对象模式的实例讲解
2017/09/30 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
2018/03/05 Javascript
webpack-url-loader 解决项目中图片打包路径问题
2019/02/15 Javascript
使用React手写一个对话框或模态框的方法示例
2019/04/25 Javascript
Node.js API详解之 net模块实例分析
2020/05/18 Javascript
python通过opencv实现批量剪切图片
2017/11/13 Python
python计算两个矩形框重合百分比的实例
2018/11/07 Python
python selenium 查找隐藏元素 自动播放视频功能
2019/07/24 Python
Python下使用Trackbar实现绘图板
2020/10/27 Python
2021年值得向Python开发者推荐的VS Code扩展插件
2021/01/25 Python
平面设计师工作职责范文
2013/12/03 职场文书
销售员岗位职责范本
2014/02/03 职场文书
致接力运动员广播稿
2014/02/17 职场文书
董事长助理岗位职责
2014/02/18 职场文书
乡镇党员干部四风对照检查材料思想汇报
2014/09/27 职场文书
工程款申请报告
2015/05/15 职场文书
干部考核工作总结2015
2015/07/24 职场文书
课文《燕子》教学反思
2016/02/17 职场文书