首页 > 编程 > JavaScript > 正文

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

2019-11-19 12:06:17
字体:
来源:转载
供稿:网友

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);},

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表