详解关于element级联选择器数据回显问题


Posted in Javascript onFebruary 20, 2019

element级联选择器数据回显问题

对于前端小菜鸡来说,被这个问题也是困扰了好久。也是百度的方法。

表单部分代码:

<el-form-item label="部门名称:" prop="deptId">
<el-cascader
    placeholder="请选择部门"
    :props="depShowType"
    :options="deptData"
    filterable
    change-on-select
    v-model="SelectdeptId">
</el-cascader>
</el-form-item>

data中定义:

depShowType:{
value:'id',
label:'name',
children:'nodes'
},
SelectdeptId:[],

methods中:

// 编辑
handleEdit(data){
this.textShow=true;
this.textForm=data;
this.SelectdeptId=this.changeDetSelect(data.deptId,this.deptData)  //数据双向绑定
},

changeDetSelect(key,treeData){
let arr = []; // 在递归时操作的数组
let returnArr = []; // 存放结果的数组
let depth = 0; // 定义全局层级
// 定义递归函数
function childrenEach(childrenData, depthN) {
  for (var j = 0; j < childrenData.length; j++) {
    depth = depthN; // 将执行的层级赋值 到 全局层级
    arr[depthN] = (childrenData[j].id);
    if (childrenData[j].id == key) {
      returnArr = arr.slice(0, depthN+1); //将目前匹配的数组,截断并保存到结果数组,
      break
    } else {
      if (childrenData[j].nodes) {
        depth ++;
        childrenEach(childrenData[j].nodes, depth);
      }
    }
  }
  return returnArr;
}
return childrenEach(treeData, depth);
},

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery第三课 修改元素属性及内容的代码
Mar 14 Javascript
使用jQuery轻松实现Ajax的实例代码
Aug 16 Javascript
jQuery源码分析-04 选择器-Sizzle-工作原理分析
Nov 14 Javascript
JS简单的图片放大缩小的两种方法
Nov 11 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
Jan 26 Javascript
Node.js模块封装及使用方法
Mar 06 Javascript
基于javascript html5实现3D翻书特效
Mar 14 Javascript
使用JavaScriptCore实现OC和JS交互详解
Mar 28 Javascript
详解前端路由实现与react-router使用姿势
Aug 07 Javascript
浅谈Vue.js中的v-on(事件处理)
Sep 05 Javascript
解决vue打包css文件中背景图片的路径问题
Sep 03 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
Nov 04 Javascript
JavaScript ES2019中的8个新特性详解
Feb 20 #Javascript
echarts实现词云自定义形状的示例代码
Feb 20 #Javascript
JS拖拽排序插件Sortable.js用法实例分析
Feb 20 #Javascript
详解webpack 最简打包结果分析
Feb 20 #Javascript
jQuery表单元素过滤选择器用法实例分析
Feb 20 #jQuery
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 #jQuery
小程序红包雨的实现示例
Feb 19 #Javascript
You might like
解析php安全性问题中的:Null 字符问题
2013/06/21 PHP
使用PHP实现蜘蛛访问日志统计
2013/07/05 PHP
ThinkPHP中pathinfo的访问模式、路径访问模式及URL重写总结
2014/08/23 PHP
PHP查找数值数组中不重复最大和最小的10个数的方法
2015/04/20 PHP
PHP针对多用户实现更换头像功能
2016/09/04 PHP
javascript编程起步(第五课)
2007/02/27 Javascript
JavaScript中实现块作用域的方法
2010/04/01 Javascript
Javascript Function对象扩展之延时执行函数
2010/07/06 Javascript
谈一谈bootstrap响应式布局
2016/05/23 Javascript
jquery取消事件冒泡的三种方法(推荐)
2016/05/28 Javascript
jQuery选择器总结之常用元素查找方法
2016/08/04 Javascript
jquery基本选择器匹配多个元素的实现方法
2016/09/05 Javascript
js实现定时进度条完成后切换图片
2017/01/04 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
2018/02/23 Javascript
vue实现的上传图片到数据库并显示到页面功能示例
2018/03/17 Javascript
JS实现点击按钮可实现编辑功能
2018/07/03 Javascript
[01:46]新英雄登场
2019/09/10 DOTA
Python多线程学习资料
2012/12/19 Python
python实现搜索指定目录下文件及文件内搜索指定关键词的方法
2015/06/28 Python
Python利用带权重随机数解决抽奖和游戏爆装备问题
2016/06/16 Python
Python中的变量和作用域详解
2016/07/13 Python
浅析Python装饰器以及装饰器模式
2018/05/28 Python
python学习--使用QQ邮箱发送邮件代码实例
2019/04/16 Python
Python 调用 Outlook 发送邮件过程解析
2019/08/08 Python
利用PyCharm操作Github(仓库新建、更新,代码回滚)
2019/12/18 Python
解决django xadmin主题不显示和只显示bootstrap2的问题
2020/03/30 Python
Django ORM实现按天获取数据去重求和例子
2020/05/18 Python
Python爬虫实现HTTP网络请求多种实现方式
2020/06/19 Python
教师的实习鉴定
2013/12/15 职场文书
幼儿运动会邀请函
2014/01/17 职场文书
《童年的发现》教学反思
2014/02/14 职场文书
小学教师师德师风自我剖析材料
2014/09/29 职场文书
《夹竹桃》教学反思
2016/02/23 职场文书
留学文书中的个人陈述,应该注意哪些问题?
2019/08/23 职场文书
python如何利用traceback获取详细的异常信息
2021/06/05 Python
浅谈MySQL中的六种日志
2022/03/23 MySQL