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


相关推荐

  • 大数据中数据采集的几种方式

    大数据中数据采集的几种方式一、采集大数据的方法1.1通过系统日志采集大数据用于系统日志采集的工具,目前使用最广泛的有:Hadoop的Chukwa、ApacheFlumeAFacebook的Scribe和LinkedIn的Kafka等。这里主要学习Flume。Flume是一个高可靠的分布式采集、聚合和传输系统,Flume支持在日志系统中定制各类数据发送方,用于收集数据,同时对数据进行简单处理,并写到诸如文本、HDFS…

    2022年5月20日
    70
  • 怎么改变pycharm的背景颜色_pycharm设置成白底

    怎么改变pycharm的背景颜色_pycharm设置成白底进入软件点击File选择Settings点击点击Edito左下角的三角形点击ColorScheme左下角的三角形选择ConsoleFoot点击点击Scheme的选择框选择完毕之后点Ok,会弹出一个选择框,yes代表全部改变,no代表编辑框的背景颜色改变

    2022年8月26日
    7
  • linux下ls -l命令(即ll命令)查看文件的显示结果分析

    linux下ls -l命令(即ll命令)查看文件的显示结果分析在linux下使用“ls-l”或者“ls-al”或者“ll”命令查看文件及目录详情时,shell中会显示出好几列的信息。平时也没怎么注意过,今天忽然心血来潮想了解一下,于是整理了这篇博客,以供参考:首先给出一张典型的显示结果:下面对其中的每一列进行详细的分析:一、文件类型表示该文件的类型:“-”表示普通文件;“d”表示目录;“l”表示链接文件;“p”表示…

    2022年6月15日
    72
  • 织梦php调用底部,dede底部出现织梦官方版权链接”Power by DedeCms”

    织梦php调用底部,dede底部出现织梦官方版权链接”Power by DedeCms”显示结果:自从dedecms织梦系统更新到6.7日的版本,底部版权信息调用标签{dede:global.cfg_powerby/}会自动加上织梦官方的链接[PowerbyDedeCms],想必很多新用户使用中都想去除这个官方的链接,由于这是官方的作为,本文只是提供一个技术的交流,并不鼓励大家去除底部的链接。好了,回归正题,大家知道,进入后台在后台的系统-系统参数有个网站版权信息,在这里并不能…

    2022年7月13日
    15
  • python之IP地址处理模块IPy

    python之IP地址处理模块IPyIPy 的安装 wgethttps pypi python org packages source I IPy IPy 0 81 tar gztar xzvfIPy 0 81 tar gzcdIPy 0 81pythonsetu pyinstallIP 地址与网段的基本处理 IPy 模块包含 IP 类通过 version 方法区别 IPv4 与 IPv6 通过制定的网段输出该网段

    2025年11月26日
    5
  • 程序实践系列(七)C++概述[通俗易懂]

    程序实践系列(七)C++概述

    2022年1月24日
    41

发表回复

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

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