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…

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 浅谈 C/S 和 B/S 架构

    浅谈 C/S 和 B/S 架构

  • Laravel框架_php laravel框架

    Laravel框架_php laravel框架laravel框架一、laravel简介laravel是一套优雅简介的PHP开发框架,受欢迎程度非常之高,功能强大,工具齐全;https://www.jianshu.com/p/206592c78113二、简单介绍1、laravel是基于mvc模式的php框架,m——模型层,v——视图层,c——控制器层;以下为laravel框架的目录文件,框出来的文件目录将在后续中用到:2、什么是MV…

    2022年10月22日
  • 在手写数字识别的例子中_手写识别

    在手写数字识别的例子中_手写识别1.概念介绍:图像识别(ImageRecognition)是指利用计算机对图像进行处理、分析和理解,以识别各种不同模式的目标和对像的技术。 图像识别的发展经历了三个阶段:文字识别、数字图像处理与识别、物体识别。机器学习领域一般将此类识别问题转化为分类问题。手写识别是常见的图像识别任务。计算机通过手写体图片来识别出图片中的字,与印刷字体不同的是,不同人的手写体风…

  • javascript 替换有害字符(学习一下prototype与javascript正则)

    javascript 替换有害字符(学习一下prototype与javascript正则)

  • 异常:java lang AbstractMethodError

    异常:java lang AbstractMethodError通常在尝试调用抽象方法时抛出此java.lang.AbstractMethodError。通常,此错误是在编译时本身识别的,如果在运行时抛出此错误,则该类必须不兼容(与先前存在的类不兼容))更改。因此,它是IncompatibleClassChangeError的子类。我们知道不能调用抽象方法,如果尝试这样做,则会收到编译时错误,因此您可能会认为在运行时如何抛出此错误?…

  • 打包的技巧图解(手机软件打包)

    我们打包APP需要用到HBuilder,所以先讲解如何安装使用HBuilder的下载与安装HBuilder的官网下载地址:https://www.dcloud.io/点击DOWNLOAD后会弹出如上显示的两种版本下载Windows版和MacOS版根据我们电脑版本下载即可,我们一定要下载标准版哦(正式版中的)我这里是Windows系统,所以我选择的是window版下载完是一个压缩包右击压缩一下即可打开文件夹后找到如下HBuilderX.exe文件双击即可运行为了方便我们

发表回复

您的电子邮箱地址不会被公开。

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