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


相关推荐

  • vlan教学_不同的vlan转发降低速度

    vlan教学_不同的vlan转发降低速度https://www.cnblogs.com/clover-toeic/p/3741115.html

    2022年8月10日
    5
  • js正则表达式语法大全_JavaScript正则

    js正则表达式语法大全_JavaScript正则JavaScript正则表达式1.构建正则表达式字面量创建varreg=/正则表达式/修饰符构造函数创建varreg=newRegExp(‘正则表达式’,’修饰符’)修饰符​ i:ignoreCase,匹配忽视大小写​ m:multiline,多行匹配​ g:global,全局匹配2.正则表达式调用(实例方法)1.exec​ 匹配字符串和正则表达式的方法,​ 匹配成功:​ 返回一个数组[匹配内容,index:匹配的起始位置,

    2022年9月20日
    0
  • VMware 虚拟机的三种网络连接方式「建议收藏」

    VMware 虚拟机的三种网络连接方式「建议收藏」VMware的虚拟机有三种网络连接方式,分别是桥接(Bridged)模式、NAT模式和仅主机(Host-only)模式。在安装VMware之后,宿主机上会出现几个相关的虚拟设备,每个设备的功能如下:VMnet0:桥接(Bridge)模式下的虚拟交换机。VMnet1:仅主机(Host-only)模式下的虚拟交换机。VMnet8:NAT模式下的虚拟交换机。VMwareNetworkAdapterVMnet1:宿主机与Host-only虚拟网络进行通信的虚拟网卡。VMwareN

    2022年6月20日
    39
  • ICEM对装配体进行网格划分实例「建议收藏」

    ICEM对装配体进行网格划分实例「建议收藏」1.建立简单的装配体,保存为stp格式注:solidworks2016开始无法打开或保存为其他格式(igs,stp).从某一个网页上看到的攻略可以了(衷心感谢)注册表HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Microsoft\Windows\Installer:建立一个RemappedElevatedProxiesPolicy,并赋值为1.然后点开安装包

    2022年5月9日
    191
  • Error 1962:No operating system found. Boot sequence will automatically repeat.–解决办法

    Error 1962:No operating system found. Boot sequence will automatically repeat.–解决办法此问题的解决办法为 在这里插入图片描述

    2025年6月12日
    0
  • tomcat7下载安装

    tomcat7下载安装进入apache官网下载tomcat7在最左边的找到download下的tomcat7并点击。选择“32-bit/64-bitWindowsServerInstaller”下载.下载完成后,将安装文件移动到本地硬盘D安装tomcat7,双击下载后的文件,进入安装界面,点next,继续IAgree,组件选择使用默认选项,点next,最后如图所示:

    2022年5月12日
    130

发表回复

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

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