这篇文章给大家分享的是有关如何解决element级联选择器数据回显问题的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
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); },
感谢各位的阅读!关于“如何解决element级联选择器数据回显问题”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。