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


相关推荐

  • 数据库sql嵌套查询题_sql子查询嵌套优化

    数据库sql嵌套查询题_sql子查询嵌套优化一、嵌套查询概念在sql语言中,一个select-from-where语句成为一个查询块,将一个查询块嵌套在另一个查询块的where子句或having短语的条件中的查询成为嵌套查询。外层的查询块称为外层查询或父查询,内层的查询称为内层查询或子查询。注意点:子查询的select语句不能使用orderby子句,orderby只能对最终查询结果排序。嵌套查询分类:1、相关子查询/关联子查询:子查询的查询条件依赖于父查询,比如,如果子查询需要执行多次,即采用循环的方式,先从外部查询开始,每

    2022年8月10日
    7
  • python 网络爬虫入门(一)———第一个python爬虫实例

    python 网络爬虫入门(一)———第一个python爬虫实例最近两天学习了一下python,并自己写了一个网络爬虫的例子。python版本:3.5IDE:pycharm5.0.4要用到的包可以用pycharm下载:File->DefaultSettings->DefaultProject->ProjectInterpreter选择python版本并点右边的加号安装想要的包我选择的网站是中国天气网中的苏州天气,准备抓取最近

    2022年5月22日
    38
  • mysql修改表名和库名

    mysql修改表名和库名改变表名mysql>ALTER  TABLE  `原表名`  RENAME  TO  `新表名`;改库名可以把原库倒出来然后恢复到新库里showvariableslike’table_type’;+—————+——–+ |Variable_name|Value | +—————+——-

    2022年5月29日
    40
  • 跨平台长连接组件设计及可插拔改造

    跨平台长连接组件设计及可插拔改造背景我们在提出开发跨平台组件之前,iOS和Android客户端分别使用一套长连接组件,需要双倍的人力开发和维护;在产品需求调整上,为了在实现细节上保持一致性也具有…

    2022年5月29日
    46
  • oracle怎么使用触发器,Oracle触发器的使用[通俗易懂]

    oracle怎么使用触发器,Oracle触发器的使用[通俗易懂]Oracle触发器的使用触发器是指存放在数据库中,并被隐藏执行的存储过程。在Oracle8i之前,只允许基于表或视图的DML操作(insert,update,delete)建立触发器,在oracle8i之后,不仅支持DML操作,也允许基于系统事件(启动数据库,关闭数据库,登录)和DDL操作建立触发器。一、触发器简介触发器是指隐含执行的存储过程,它可以使用PL/SQL,java和C进行开发,当发生特…

    2022年7月11日
    18
  • 用Matlab绘制相平面图「建议收藏」

    用Matlab绘制相平面图「建议收藏」MATLAB相图程序Eg1:clc;clear;close;[x,y]=meshgrid(linspace(-6,6));%定义[x,y]网络采样点的范围h=streamslice(x,y,y,-2.*x);%描述系统坐标的微分方程title(‘极限环的相平面图’)%定义标题范围xlabel(‘x’,’Color’,[0.60.50.4]);ylabel(‘y’,’C

    2022年5月15日
    48

发表回复

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

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