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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 五大常用算法之三:贪心算法

    一、基本概念:所谓贪心算法是指,在对问题求解时,总是做出在当前看来是最好的选择。也就是说,不从整体最优上加以考虑,他所做出的仅是在某种意义上的局部最优解。贪心算法没有固定的算法框架,算法设计的关键

    2021年12月25日
    41
  • 新一代金融神话Filecoin[通俗易懂]

    新一代金融神话Filecoin[通俗易懂]Filecoin是区块链史上耗时最短的ICO融资项目,受到了DCG集团、文克莱沃斯兄弟基金会、联合广场风投、AndersonHollotz基金和红杉资本等投资巨头的青睐。储存即收益,Filecoin与BTC的工作证明是不同的。filecoin只需要提供存储空间和宽带,就可以满足获取身份证明的需求。因此,Filecoin可以从根本上提高人类的效率,是一种真正的共享经济,它可以极大地推动存储资源的使用方式。由于Filecoin是基于强大的IPFS协议,并且由于IPFS的大量应用,Filecoin作为IPFS

    2022年9月12日
    1
  • SpringBoot框架理解[通俗易懂]

    SpringBoot框架理解[通俗易懂]文章目录SpringBoot框架1SpringBoot入门1.2什么是SpringBoot1官网的解释2我的理解3SpringBoot的优缺点4构建项目1使用Spring官方提供页面构建2使用IDEA构建3pom包介绍1.3SpringBoot核心1约定优于配置2Starter启动器3自动配置工作原理学习SpringBoot后对它的理解,进行一个总结SpringBoot框架1SpringBoot入门1.2什么是SpringBoot1官网的解释​ Sprin

    2022年8月21日
    5
  • i686和x86_64的区别

    i686和x86_64的区别i686的解释:i代表intel系列的cpu。386几乎适用于所有的x86平台,不论是旧的pentum或者是新的pentum-IV与K7系列的CPU等等,都可以正常的工作!那个i指的是Intel兼容的CPU的意思,至于386不用说,就是CPU的等级啦!i586就是586等级的计算机,那是哪些呢?包括pentum第一代MMXC…

    2022年6月7日
    141
  • ubantu 搭建我的世界java服务器 spigot核心

    ubantu 搭建我的世界java服务器 spigot核心搭建一个minecraftjava版服务器

    2022年5月24日
    36
  • COM聚合技术中的QueryInterface

    COM聚合技术中的QueryInterface最近在看COM聚合技术时遇到一个关于QueryInterface的问题。在《COM技术内幕》和《COM原理与应用》中都是寥寥数句带过,看起来很易理解,我却看了许久才有所领悟。先说明一下,为了节省篇幅,对于一些约定俗成的代码和变量,下文不再进行说明,如内部组件指向外部组件的m_pUnknownOuter和外部组件指向内部组件的m_pUnknownInner等,这些内容在相关书籍都有描述。问题

    2022年7月21日
    10

发表回复

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

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