详解关于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 相关文章推荐
三种动态加载js的jquery实例代码另附去除js方法
Apr 30 Javascript
jQuery老黄历完整实现方法
Jan 16 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
Aug 20 Javascript
javascript实现计时器的简单方法
Feb 21 Javascript
基于BootStrap环境写jQuery tabs插件
Jul 12 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
Sep 04 Javascript
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
详解vue-router 初始化时做了什么
Jun 11 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
Aug 24 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
Dec 20 Javascript
Vue动态修改网页标题的方法及遇到问题
Jun 09 Javascript
js实现石头剪刀布游戏
Oct 11 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 和 MySQL 时区的一点总结
2008/03/26 PHP
那些年一起学习的PHP(一)
2012/03/21 PHP
CI框架中$this-&gt;load-&gt;library()用法分析
2016/05/18 PHP
js 金额文本框实现代码
2012/02/14 Javascript
Javascript 实现的数独解题算法网页实例
2013/10/15 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
2014/03/18 Javascript
关闭时刷新父窗口两种方法
2014/05/07 Javascript
JavaScript获取URL汇总
2015/06/08 Javascript
javascript动态添加checkbox复选框的方法
2015/12/23 Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
2016/01/07 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
2016/05/04 Javascript
javascript中的后退和刷新实现方法
2016/11/10 Javascript
jQuery checkbox选中问题之prop与attr注意点分析
2016/11/15 Javascript
移动端刮刮乐的实现方式(js+HTML5)
2017/03/23 Javascript
详解angular2实现ng2-router 路由和嵌套路由
2017/03/24 Javascript
vue项目中api接口管理总结
2018/04/20 Javascript
小程序日历控件使用方法详解
2018/12/29 Javascript
jQuery实现动态添加和删除input框实例代码
2019/03/26 jQuery
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
2019/11/24 Javascript
vue基于better-scroll仿京东分类列表
2020/06/30 Javascript
菜鸟使用python实现正则检测密码合法性
2016/01/05 Python
mysql 之通过配置文件链接数据库
2017/08/12 Python
Python使用ffmpy将amr格式的音频转化为mp3格式的例子
2019/08/08 Python
django数据模型中null和blank的区别说明
2020/09/02 Python
Pycharm安装python库的方法
2020/11/24 Python
香港太阳眼镜网上商店:SmartBuyGlasses香港
2016/07/22 全球购物
绿色环保标语
2014/06/12 职场文书
我的中国梦演讲稿300字
2014/08/19 职场文书
学校领导班子对照检查材料
2014/09/24 职场文书
合伙购房协议样本
2014/10/06 职场文书
领导干部作风建设总结
2014/10/23 职场文书
党章党规党纪学习心得体会
2016/01/14 职场文书
Python爬虫爬取全球疫情数据并存储到mysql数据库的步骤
2021/03/29 Python
html5实现点击弹出图片功能
2021/07/16 HTML / CSS
千万级用户系统SQL调优实战分享
2022/03/03 MySQL
java高级用法JNA强大的Memory和Pointer
2022/04/19 Java/Android