element级联选择器表单回显_级联选择器 数据回显

element级联选择器表单回显_级联选择器 数据回显关于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);
},


此方法主要参考这位大神:https://segmentfault.com/u/li…

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/106995.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 截图bat文件_dos批处理

    截图bat文件_dos批处理******批处理bat命令快速截图********set”p=E:\Test\”::设置截图保存的路径,注意结尾要有\sett=%date:~0,4%%date:~5,2%%date:~8,2%_%time:~0,2%%time:~3,2%%time:~6,2%::设置当前的时间,用于截图的命名adbshell/system/bin/screencap-p/sdc…

    2022年9月23日
  • 2019年C-NPS研究成果发布 中国品牌赢得更多肯定

    2019年C-NPS研究成果发布 中国品牌赢得更多肯定中新网1月15日电15日,品牌评级权威机构Chnbrand发布2019年(第五届)中国顾客推荐度指数(C-NPS)品牌排名和分析报告。该指数是中国首个顾客推荐度评价体系,2015年首次推出并获得工业和信息化部品牌政策专项资金的扶持。此次报告显示,2019年C-NPS略有提升,总分为8.4分,较去年提升1.5分;服务业净推荐值依然领先,耐用消费品行业和快速消费品行业位列第二、三位;中国品牌正在赢…

    2022年5月20日
  • 分布式锁的实现与应用场景对比

    分布式锁的实现与应用场景对比分布式锁在传统的基于数据库的架构中,对于数据的抢占问题往往是通过数据库事务(ACID)来保证的。在分布式环境中,出于对性能以及一致性敏感度的要求,使得分布式锁成为了一种比较常见而高效的解决方案。应用场景介绍:场景1:场景2:某服务提供一组任务,A请求随机从任务组中获取一个任务;B请求随机从任务组中获取一个任务。在理想的情况下,A从任务组中挑选一个任务,任务组删除该任务,B从剩下的的任务中

    2022年9月7日
  • Java集合详解8:Java集合类细节精讲

    Java集合详解8:Java集合类细节精讲今天我们来探索一下Java集合类中的一些技术细节。主要是对一些比较容易被遗漏和误解的知识点做一些讲解和补充。可能不全面,还请谅解。本文参考:http://cmsblogs.com/?cat=5具体代码在我的GitHub中可以找到https://github.com/h2pl/MyTech文章首发于我的个人博客:https://h2pl.github.io/2018/05/13/…

    2022年5月5日
  • cocos2dx三种定时器使用

    cocos2dx三种定时器使用

    2022年1月14日
  • laravel where orwhere的写法

    laravel where orwhere的写法

    2021年11月10日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号