详解关于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);
},

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jQuery选择器源码解读（七）：elementMatcher函数

    要读懂Sizzle的Compile执行过程,首先需要弄清楚涉及的各个子程序的功能和关键变量和作用,我将逐一对jQuery-1.10.2版本的Compile代码进行说明,望能给予大家帮助. elementMatcher(matchers) 1.源码 复制代码 代码如下: function elementMatcher(matchers) {  return matchers.length > 1 ? function(elem, context, xml) {   var i = matchers

  • element-ui 时间选择器限制范围的实现（随动）

    需求: 选择日期范围,但是选择范围需要在一周以内.举个栗子:假设选第一个日期为1月17日,那么1月11日以前.1月23号以后的日期都需要设为禁选状态. 方法: 考虑到有两种设计方式: 1.用两个独立时间选择器控制,实现起来比较混乱. 2.用日期范围选择器. 第一种方式没有做demo,有特殊需求的小伙伴请留言.这里选择使用日期范围选择器,使用起来可以预见代码会清爽很多. 效果图: 代码: <el-date-picker v-model="datePick" type="d

  • jQuery中element选择器用法实例

    本文实例讲述了jQuery中element选择器用法.分享给大家供大家参考.具体分析如下: 此选择器能够匹配具有指定标签名的元素.例如: 复制代码 代码如下: $("div") 以上代码能够选取所有的div元素. 语法结构: 复制代码 代码如下: $(element) 参数列表: 参数 描述 element 一个用于搜索的元素.指向DOM节点的标签名. 实例代码: 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> &l

  • jQuery 属性选择器element[herf*='value']使用示例

    一个针对jQuery属性选择器的小例子,增加对jQUery属性选择器的理解: 复制代码 代码如下: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <style typ

  • Element UI框架中巧用树选择器的实现

    本文介绍了Element UI框架中巧用树选择器的实现,分享给大家,顺便给自己留个笔记,具体如下: 介绍 在Element UI框架中有选择器和树形控件,但是没有树形选择器,也就是图上的这种方式的选择器,所以只能自定义选择器的slot.这里介绍的是多选情况,如果是单选则去掉复选框,修改一部分的处理即可. html部分的代码: <el-select v-model="dataArr" :multiple="multiple" filterable :placeh

  • jQuery中元素选择器（element）简单用法示例

    jQuery中元素选择器（element）简单用法示例

    本文实例讲述了jQuery中元素选择器(element)简单用法.分享给大家供大家参考,具体如下: 一.介绍 元素选择器是根据元素名称匹配相应的元素. 通俗的讲元素选择器指向的是DOM元素的标记名,也就是说元素选择器是根据元素的标记名选择的. 可以把元素的标记名理解成学生的姓名,在一个学校中可能有多个姓名为"刘伟"的学生,但是姓名为"吴语"的学生也许只有一个,所以通过元素选择器匹配到的元素可能有多个,也可能是一个. 多数情况下,元素选择器匹配的是一组元素. 元素选择

  • Vue Element 分组+多选+可搜索Select选择器实现示例

    Vue Element 分组+多选+可搜索Select选择器实现示例

    最终效果(http://47.98.205.88:3000/mult_group_selection)见下图.实际就是将element三种官方select实例整合起来,同时实现分组+多选+可搜索,此外点击一级分组名可以实现全选/全不选.供有相关需求的开发者参考 准备工作: 除了vue脚手架.element等必要包之外.该项目还用到了linq.js(https://github.com/mihaifm/linq),该工具可以快速从数组中查找所需内容. npm install --save linq

  • vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)

    我使用的是element-ui V2.2.3.代码如下,当我选择值得时候,el-select选择器无法显示选中的内容,但是能触发change方法,并且能输出选择的值. select.vue文件 <template> <div> <div class="row" v-for="RowItem in rows"> <div class="col" v-for="colItem in RowItem.

  • 详解关于element级联选择器数据回显问题

    element级联选择器数据回显问题 对于前端小菜鸡来说,被这个问题也是困扰了好久.也是百度的方法. 表单部分代码: <el-form-item label="部门名称:" prop="deptId"> <el-cascader placeholder="请选择部门" :props="depShowType" :options="deptData" filterable change-on

  • 浅谈Vue使用Cascader级联选择器数据回显中的坑

    业务场景 由于项目需求,需要对相关类目进行多选,类目数据量又特别大,业务逻辑是使用懒加载方式加载各级类目数据,编辑时回显用户选择的类目. 问题描述 使用Cascader级联选择器过程中主要存在的应用问题如下: 1.由于在未渲染节点数据的情况下编辑时无法找到对应的类目数据导致无法回显,如何自动全部加载已选择类目的相关节点数据: 2.提前加载数据后,点击相应父级节点出现数据重复等: 3.使用多个数据源相同的级联选择器,产生只能成功响应一个加载子级节点数据: 4.Vue中级联选择器相应数据完成加载,依

  • Element Plus的el-tree-select组件懒加载+数据回显详解

    目录 一.背景说明 二.使用 1. dom 2.methods 三.回显 总结 一.背景说明 技术:Vue3 + Element Plus 需求:在选择组织机构时以树结构下拉展示. 用到组件:TreeSelect 树形选择组件(el-tree-select) 官网文档地址: https://element-plus.gitee.io/zh-CN/component/tree-select.html https://element-plus.gitee.io/zh-CN/component/tre

  • 详解el Cascader懒加载数据回显示例

    正文 数据回显时保证 v-model props options 绑定的数据是正确的. 调用 props.lazyLoad 方法中的 resolve 回掉函数设置数据,示例来自el官网. 好多例子中说需要设置 options, 但是异步获取子节点,设置它是没有用的. <el-cascader :props="props"></el-cascader> <script> let id = 0 export default { data() { retu

  • 详解SpringMVC如何进行数据回显

    基本介绍 数据回显:模型数据导向视图(模型数据 ---> Controller ---> 视图) 说明:SpringMVC在调用方法前会创建一个隐含的模型对象,作为模型数据的存储容器(隐含模型) 一.ModelAndView @RequestMapping(method = RequestMethod.POST) public ModelAndView createUser(User user) { userService.createUser(user); ModelAndView mav

  • 详解Hibernate cascade级联属性的CascadeType的用法

    详解Hibernate cascade级联属性的CascadeType的用法 cascade(级联) 级联在编写触发器时经常用到,触发器的作用是当 主控表信息改变时,用来保证其关联表中数据同步更新.若对触发器来修改或删除关联表相记录,必须要删除对应的关联表信息,否则,会存有脏数据.所以,适当的做法是,删除主表的同时,关联表的信息也要同时删除,在hibernate中,只需设置cascade属性值即可. cascade表示级联操作,在hibernate配置注解@OneToOne,@OneToMany

  • 详解基于element的区间选择组件校验(交易金额)

    详解基于element的区间选择组件校验(交易金额)

    需求: 这里以项目的需求为例,基本的需求如下: 分为左右值,包含左右值,正整数 左侧必须大于等于1,右侧无限大,右侧值必须不小于左侧 左侧填写数据,右侧标为必填:右侧填写数据,左侧标为必填 失焦校验成果: 代码如下:(页面) <el-col :span="8" v-if="item.qttccType === 1"> <el-col :span="14"> <el-form-item :label="ite

  • 详解python实现读取邮件数据并下载附件的实例

    详解python实现读取邮件数据并下载附件的实例

    详解python实现读取邮件数据并下载附件的实例 实现结果图: 实现代码: #!/usr/bin/python2.7 # _*_ coding: utf-8 _*_ """ @Author: MarkLiu """ import poplib import email from email.parser import Parser from email.header import decode_header from email.utils im

  • 详解复制备份docker容器数据的方法

    这里以jenkins容器为例,介绍三种方法. 方法一 将容器打包成镜像,这时数据就在镜像中了,im:1.0为容器名,可以随便取 docker commit <container id> im:1.0 重新运行镜像,-v将容器内tmp目录映射到宿主机上的tmp目录 docker run -itd -v /tmp:/tmp im:1.0 // 第一个tmp是宿主机目录,第二个是容器内目录 把 /var/jenkins_home的文件复制到tmp下,注意这里的container name是随机生成的

  • 详解Python中如何将数据存储为json格式的文件

    详解Python中如何将数据存储为json格式的文件

    一.基于json模块的存储.读取数据 names_writer.py import json names = ['joker','joe','nacy','timi'] filename='names.json' with open(filename,'w') as file_obj: json.dump(names,file_obj) 解释:我们先导入json模块,再创建一个名字列表,第5行我们指定了要将该列表存储到其中的文件的名称.通常使用扩展名.json来指出文件存储的数据为json格式.

随机推荐