vue.js实现科室无限层选中和回显

一、效果展示:

  • 展示可选层级

  • 查看选中的值 

二、实现:

 

<el-form-item label="相关科室:" prop="orgId"><el-cascaderpopper-class="cascader-my":options="orgOptions":show-all-levels="false"v-model="orgList":props="props"@change="changeOrg"collapse-tagsplaceholder="请选择"filterable></el-cascader>
</el-form-item>//-------------相关变量定义-------------
rgOptions: [],
orgList: [], // 选中的科室数据
props: {children: 'childList',label: 'orgName',value: 'orgId',multiple: true,emitPath: false,expandTrigger: 'hover'}  //-------------相关方法--------------// 初始化科室initOrgInfo() {xxx().then((res) => {if (res.code === 200) {this.orgOptions = res.result} else {this.$message.error(res.message)}})},// 科室选中changeOrg(val) {if (val && val.length > 0) {const orgArr = this.findOrgIdInNestedList(val, this.orgOptions)this.form.orgId = orgArr.join() || ''}},// 科室无限层级迭代findOrgIdInNestedList(targetIds, orgOptions) {const deptData = []function searchOrg(options, targetId) {options.forEach((org) => {if (org.orgId === targetId) {deptData.push(org.orgId)} else if (org.childList && org.childList.length > 0) {searchOrg(org.childList, targetId)}})}targetIds.forEach((i) => {searchOrg(orgOptions, i)})return deptData},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/136392.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【ARM Trace32(劳特巴赫) 使用介绍 2 - Veloce 环境中使用trace32 连接 Cortex-M33】

请阅读【ARM Coresight SoC-400/SoC-600 专栏导读】 文章目录 T32MARM 介绍Trace32 .t32 和 .cmm 差异veloce 下启动TRACE321.1.3 TAP 状态机操作命令1.1.3.1 IDCODE&#xff08;Identification Code&#xff09;寄存器 介绍 T32MARM 介绍 T32MARM 是 Lauterbach 的 Trace32 …

Android ConstraintLayout

0dp 充满约束 to左侧是控件本身,to右边是约束条件 例如: app:layout_constraintBottom_toBottomOf"id/image_1" app:layout_constraintTop_toBottomOf"id/image_1" 指定权重: app:layout_constraintHorizontal_weight"" app:layout_constra…

调试 Mahony 滤波算法的思考 10

调试 Mahony 滤波算法的思考 1. 说在前面的2.Mahony滤波算法的核心思想3. 易懂的理解 Mahony 滤波算法的过程4. 其他的一些思考5. 民间 9轴评估板 1. 说在前面的 之前调试基于QMI8658 6轴姿态解算的时候&#xff0c;我对Mahony滤波的认识还比较浅薄。初次的学习和代码的移植让…

电路布线问题动态规划详解(做题思路)

对于电路布线问题&#xff0c;想必学过动态规划的大家都很清除。今天就来讲解一下这个动态规划经典题目。 目录 问题描述输入分析最优子结构代码 问题描述 在一块电路板的上、下2端分别有n个接线柱。根据电路设计&#xff0c;要求用导 线(i,π(i))将上端接线柱与下端接线柱相…

与set和map相关的OJ题练习

一、两个数组的交集 题目链接&#xff1a; 349. 两个数组的交集 - 力扣&#xff08;LeetCode&#xff09; 题目描述&#xff1a; 给两个数组&#xff0c;求在数组里面共同出现的部分&#xff0c;就是求两个数组的交集&#xff0c;返回顺序不做要求 解题思路&#xff1a; …

技术分享 | web自动化测试-PageObject 设计模式

为 UI 页面写测试用例时&#xff08;比如 web 页面&#xff0c;移动端页面&#xff09;&#xff0c;测试用例会存在大量元素和操作细节。当 UI 变化时&#xff0c;测试用例也要跟着变化&#xff0c; PageObject 很好的解决了这个问题。 使用 UI 自动化测试工具时&#xff08;包…

ppt聚光灯效果

1.放入三张图片内容或其他 2.全选复制成图片 3.设置黑色矩形&#xff0c;透明度30% 4.粘贴复制后的图片&#xff0c;制定图层 5.插入椭圆&#xff0c;先选中矩形&#xff0c;再选中椭圆&#xff0c;点击绘图工具&#xff0c;选择相交即可&#xff08;关键&#xff09;

Spring Boot 请求/actuator/beans 无法访问 返回404

问题复现 在保证项目加入了spring-boot-starter-actuator依赖&#xff0c;并成功启动后。通过浏览器进行访问&#xff0c;返回如下图结果&#xff1a; 问题排查 1. 查看日志 从日志中可以看到基于路径’/actuator’下只暴露了一个端点 2. 访问http://localhost:8080/actua…

安卓常见设计模式2------构建者模式(Kotlin版)

1. W1 是什么&#xff0c;什么是构建者模式&#xff1f; 构建者模式&#xff08;Builder Pattern&#xff09;是一种创建复杂对象的设计模式。它通过使用链式调用的方式&#xff0c;逐步构建对象&#xff0c;使得代码更易读、可维护&#xff0c;并且可以处理许多可选参数的情况…

C# OpenCvSharp 环形文字处理 直角坐标与极坐标转换

效果1 效果2 项目 代码 using OpenCvSharp; using System; using System.Drawing; using System.Text; using System.Windows.Forms;namespace OpenCvSharp_Demo {public partial class frmMain : Form{public frmMain(){InitializeComponent();}string fileFilter "*.*…

1. Collection,List, Map, Queue

1. java集合框架体系结构图 2. Collection派生的子接口 其中最重要的子接口是&#xff1a; 1&#xff09;List 表示有序可重复列表&#xff0c;重要的实现类有&#xff1a;ArrayList, LinkedList ArrayList特点&#xff1a;底层数组实现&#xff0c;随机查找快&#xff0c;增删…

facebook分享-错误记录

无法拉起分享 "code":30000,"msg":"fail:API_ERROR: API_ERROR" 1.确认facebook的app_id是否一致 2.确认是否在app_id应用的白名单里&#xff0c;注册meta开发者&#xff0c;然后把主页的user_id给管理员加 A ContentProvider for this app was…

【unity】ComputeShader的学习使用

ComputeShader 文章目录 ComputeShader一、学习链接二、案例学习1.FallingSand2.Fluid_2D 一、学习链接 王江荣&#xff1a;Compute Shader的基础介绍与使用 用GPU代替CPU进行计算&#xff1a; 定义核函数&#xff1a;可以定义很多个&#xff0c;最终会在GPU中被执行 #prag…

小程序发成绩

在这个数字化快速发展的时代&#xff0c;让学生能够方便快捷地获取自己的成绩已经成为一项基本的需求。那么&#xff0c;如何实现这一目标呢&#xff1f;对于许多老师来说&#xff0c;可能首先想到的是使用各种代码或者Excel来发布成绩查询。今天&#xff0c;我们就来探讨一下这…

Salesforce使用的数据库是什么

Salesforce使用了多种不同的数据库技术来支持其云端CRM&#xff08;客户关系管理&#xff09;服务。其中最显著的数据库技术是它自己的多租户数据库系统&#xff0c;称为"Salesforce数据库"或"Force.com数据库"。以下是关于Salesforce数据库的一些关键特点…

基于SSM的劳务外包管理系统的设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…

人工智能-深度学习之延后初始化

到目前为止&#xff0c;我们忽略了建立网络时需要做的以下这些事情&#xff1a; 我们定义了网络架构&#xff0c;但没有指定输入维度。 我们添加层时没有指定前一层的输出维度。 我们在初始化参数时&#xff0c;甚至没有足够的信息来确定模型应该包含多少参数。 有些读者可…

RK3568平台开发系列讲解(音视频篇)RTMP 推流

🚀返回专栏总目录 文章目录 一、RTMP 的工作原理二、RTMP 流媒体服务框架2.1、Nginx 流媒体服务器2.2、FFmpeg 推流沉淀、分享、成长,让自己和他人都能有所收获!😄 📢目前常见的视频监控和视频直播都是使用了 RTMP、RTSP、HLS、MPEG-DASH、 WebRTC流媒体传输协议等。 R…

基于SSM的图书管理借阅系统设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…