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


相关推荐

  • maven插件

    maven插件

    2021年9月14日
    53
  • eclipse自动补全快捷键

    eclipse自动补全快捷键eclipse中补全代码快捷键,默认Alt+/1.完全没有提示的情况:依次打开eclipse上面的windows>>>>preferences>>>>java>>>>editor>>>>contentassist,在右上方有一行“selecttheproposalkindscontainedinthe‘default’contentassistlist”下面,勾选Java

    2022年5月6日
    71
  • MFC进度条控件(六)

    MFC进度条控件(六)程序功能:点击按键进度条前进到满格。(一)初始化//TODO:在此添加额外的初始化代码 m_progress.SetRange32(0,100);//设置进度条最小和最大值按键函数入口双击按键(二)按键函数voidCMFCday5ADlg::OnBnClickedButton1(){ //TODO:在此添加控件通知处理程序代码 SetTimer(1,100,NULL);//设置定时器1,每次计时100毫秒就定时到 GetDlgItem(IDC_BUTTON1)-&g

    2022年7月27日
    6
  • SIGPIPE[通俗易懂]

    SIGPIPE[通俗易懂]当服务器close一个连接时,若client端接着发数据。根据TCP协议的规定,会收到一个RST响应,client再往这个服务器发送数据时,系统会发出一个SIGPIPE信号给进程,告诉进程这个连接已经断开了,不要再写了。我写了一个服务器程序,在Linux下测试,然后用C++写了客户端用千万级别数量的短链接进行压力测试.  但是服务器总是莫名退出,没有core文件.最后问题确

    2022年5月7日
    44
  • 跨域问题(CORS / Access-Control-Allow-Origin)

    跨域问题(CORS / Access-Control-Allow-Origin)1、前言最近在项目中,调用EurekaREST接口时,出现了CORS跨越问题(Cross-originresourcesharing),在此与大家进行分享,避免多走些弯路。项目前端(http://localhost:9000)通过Ajax方式调用EurekaREST接口(http://localhost:8761/eureka/apps)时,却没有任何反应…

    2022年6月6日
    34
  • pycharmPyCharm 2021.8.3安装激活码【永久激活】

    (pycharmPyCharm 2021.8.3安装激活码)2021最新分享一个能用的的激活码出来,希望能帮到需要激活的朋友。目前这个是能用的,但是用的人多了之后也会失效,会不定时更新的,大家持续关注此网站~https://javaforall.net/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~KU…

    2022年3月22日
    63

发表回复

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

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