Vue2+element-ui 实现select选择器结合Tree树形控件实现下拉树效果

 效果:

DOM部分 : // 设置el-option隐藏的下拉选项,选项显示的是汉字label,值是value // 如果不设置一个下拉选项,下面的树形组件将无法正常使用

<el-form-item label="报警区域" prop="monitorId"><el-select ref="selectUpResId" v-model="queryParams.labelName" placeholder="请选择报警区域" class="treeselect-main">// 设置一个隐藏的下拉选项,选项显示的是汉字label,值是value// 如果不设置一个下拉选项,下面的树形组件将无法正常使用<el-option hidden :key="queryParams.monitorId" :value="queryParams.monitorId":label="queryParams.labelName"></el-option><el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false" :check-on-click-node="true"@node-click="handleNodeClick"  :highlight-current="true" :current-node-key="currentKey"></el-tree></el-select></el-form-item>

 js部分:

:highlight-current="true" :current-node-key="currentKey"开启高亮当前节点的功能

this.deptOptions格式为数组嵌套数组:例如

 data: [{id: 1,name: '一级 1',children: [{id: 11,name: '二级 1-1',children: [{id: 111,name: '三级 1-1-1'}]}]}],

data({// 查询参数queryParams: {pageNum: 1,pageSize: 10,pushType: null,pushTime: null,level: null,status: null,monitorId: null, //绑定的idlabelName: '' //用于回显的label文字},
//下拉款结构defaultProps: {children: 'children',label: 'label'}}
)created() {this.getMonitorTree() //初始化获取tree下拉框},methods: {/** 获取监控区域下拉树结构 */getMonitorTree() {monitorTreeSelect().then((response) => {response.data.forEach(item => {this.deptOptions.push({id: item.id,label: item.label,children: item.children,})});})},
//选中需要绑定的id,赋值给 this.queryParams.monitorIdhandleNodeClick(data) {this.queryParams.labelName = data.labelthis.queryParams.monitorId = data.idthis.$refs.selectUpResId.blur()  //选中后隐藏下拉框}
}

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

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

相关文章

【音视频 ffmpeg 学习】 跑示例程序 持续更新中

环境准备 在上一篇文章 把mux.c 拷贝到main.c 中 使用 attribute(unused) 消除警告 __attribute__(unused)/** Copyright (c) 2003 Fabrice Bellard** Permission is hereby granted, free of charge, to any person obtaining a copy* of this software and associated docu…

Ubuntu 安装MySQL以及基本使用

前言 MySQL是一个开源数据库管理系统&#xff0c;通常作为流行的LAMP&#xff08;Linux&#xff0c;Apache&#xff0c;MySQL&#xff0c;PHP / Python / Perl&#xff09;堆栈的一部分安装。它使用关系数据库和SQL&#xff08;结构化查询语言&#xff09;来管理其数据。 安装…

解析Web自动化测试工具能做什么?

随着互联网的蓬勃发展&#xff0c;Web应用程序在我们生活和工作中扮演着愈发重要的角色。为确保这些Web应用程序的质量、稳定性和安全性&#xff0c;Web自动化测试工具应运而生。本文将介绍Web自动化测试工具的多重功能&#xff0c;以及它们如何在软件开发生命周期中发挥关键作…

【React源码 - ReactDom.render发生了什么】

在React开发中&#xff0c;在入口文件我们都会执行ReactDom.render来讲整个应用挂载在主document中&#xff0c;那其中发生了什么&#xff0c;React是如何讲我们写的JSX代码&#xff0c;一步一步更新Fiber进而挂载渲染的呢。本文主要是基于react17.0.2的源码以及自己的理解来简…

下载和安装AD14 - Altium Designer 14.3.20.54863

这个版本应该还支持XP 系统[doge]&#xff0c;总之就是想安装一下&#xff0c;没什么特别的意义。 下载 资源来自毛子网站&#xff1a;https://rutracker.net/forum/viewtopic.php?t5140739&#xff0c;带上个网页翻译插件就行。要用磁力链接下载&#xff0c;推荐用qbittorr…

UE4开发BIM程序 的 流程

某机构BIM设计研究中心主任马晓龙&#xff0c;他对编程颇有研究。今天他会用通俗易懂的语言来讲解基于游戏引擎UE4的BIM技术可视化应用。对于想要自己开发程序的设计师一定要读一下&#xff01; 1&#xff09;关于UE4——UE4是什么&#xff1f; 可以简单的理解为&#xff0c;一…

c基础学习(一)

学习网站&#xff1a; C语言的过去与未来 - C语言教程 - C语言网 (dotcpp.com)https://www.dotcpp.com/course/c-intros/ C 语言简介 - C 语言教程 - 网道 (wangdoc.com)https://wangdoc.com/clang/intro 变量&#xff1a; #include<stdio.h> /*引入头文件-- 标准…

docker入门概念详解

本篇文章对docker的一些基础概念和周边概念进行了详细解释。帮助你可以很好的理解docker是用来干什么的&#xff0c;docker是怎么工作的。其中有docker所运用到的技术解释&#xff0c;docker的不同发展版本&#xff0c;dokcer的架构&#xff0c;docker的生态等等详解。希望本片…

Unity中Shader裁剪空间推导(透视相机到裁剪空间的转化矩阵)

文章目录 前言一、简单看一下 观察空间—>裁剪空间—>屏幕空间 的转化1、观察空间&#xff08;右手坐标系、透视相机&#xff09;2、裁剪空间&#xff08;左手坐标系、且转化为了齐次坐标&#xff09;3、屏幕空间&#xff08;把裁剪坐标归一化设置&#xff09;4、从观察空…

Linux文件编程

目录 1、Linux系统提供的文件编程API 1.1打开文件&#xff1a;open 1.2创建文件creat函数 1.3写入文件write函数 1.4读取文件read函数 1.5文件光标位置lseek函数 2、另外一组文件编程API 2.1文件打开函数fopen 2.2读文件函数fread 2.3写文件函数fwrite 2.4文件光标位…

github鉴权失败

问题&#xff1a; 如上图所示 git push 时发生了报错&#xff0c;鉴权失败&#xff1b; 解决方案 Settings->Developer settings->Personal access tokens->Generate new token。创建新的访问密钥&#xff0c;勾选repo栏&#xff0c;选择有效期&#xff0c;为密钥命…

HarmonyOS4.0系统性深入开发08服务卡片架构

服务卡片概述 服务卡片&#xff08;以下简称“卡片”&#xff09;是一种界面展示形式&#xff0c;可以将应用的重要信息或操作前置到卡片&#xff0c;以达到服务直达、减少体验层级的目的。卡片常用于嵌入到其他应用&#xff08;当前卡片使用方只支持系统应用&#xff0c;如桌…

小型内衣洗衣机什么牌子好?口碑好的小型洗衣机

想必大家都知道&#xff0c;我们的内衣裤、袜子这些衣物对卫生方面的要求是比较的高&#xff0c;毕竟是贴身的衣物&#xff0c;因此是要分开清洗的&#xff0c;而不能够跟我们其他的大件衣服一起放入到大型洗衣机里进行混洗&#xff0c;很多就选择了分开单独的手洗&#xff0c;…

快速上手:Docker环境下的WordPress安装全攻略

在这篇文章中我会手把手地教你在Linux环境下使用Docker安装WordPress及相关应用。最终&#xff0c;你将会拥有一个安全、支持https的网站。别犹豫啦&#xff0c;跟着我一块儿搞起来吧&#xff01; 一、登录服务器 在之前的文章中有提到如何使用ssh命令登录到我们之前在AWS申请…

嵌入式SOC之通用图像处理之OSD文字信息叠加的相关实践记录

机缘巧合 机缘巧合下, 在爱芯元智的xx开发板下进行sdk的开发.由于开发板目前我拿到是当前最新的一版(估计是样品)&#xff0c;暂不公开开发板具体型号信息.以下简称板子 .很多优秀的芯片厂商,都会提供与开发板配套的完善的软件以及完善的技术支持(FAE)&#xff0c;突然觉得爱芯…

Kubernetes 的用法和解析(K8S 日志方案) -- 8

一、统一日志管理的整体方案 通过应用和系统日志可以了解Kubernetes集群内所发生的事情&#xff0c;对于调试问题和监视集群活动来说日志非常有用。对于大部分的应用来说&#xff0c;都会具有某种日志机制。因此&#xff0c;大多数容器引擎同样被设计成支持某种日志机制。 对…

android studio 将含有jni c++ 的library项目封装成jar并调用

请参考博客&#xff1a;android studio 4.1.1 将library项目封装成aar 并调用_android studio 4.1 aar release-CSDN博客 一 . 简单叙述 android studio 中可以创建Module 的两种属性&#xff0c;可以在build.gradle 中查看&#xff1a; 1. application属性&#xff1a;可以独…

前后端分离nodejs+vue医院预约挂号系统6nrhh

医院预约挂号系统主要有管理员、用户和医生三个功能模块。以下将对这三个功能的作用进行详细的剖析。 运行软件:vscode 前端nodejsvueElementUi 语言 node.js 框架&#xff1a;Express/koa 前端:Vue.js 数据库&#xff1a;mysql 开发软件&#xff1a;VScode/webstorm/hbuiderx均…

计算机视觉技术-锚框

目标检测算法通常会在输入图像中采样大量的区域&#xff0c;然后判断这些区域中是否包含我们感兴趣的目标&#xff0c;并调整区域边界从而更准确地预测目标的真实边界框&#xff08;ground-truth bounding box&#xff09;。 不同的模型使用的区域采样方法可能不同。 这里我们介…

图像分割实战-系列教程1:语义分割与实例分割概述

1、图像分割任务概述 1.1 图像分割 分割任务就是在原始图像中逐像素的找到你需要的轮廓 如图分别是&#xff08;物体检测&#xff09;与&#xff08;图像分割&#xff09;两个任务的效果对比&#xff0c;实际上会比检测任务要稍微麻烦一些&#xff0c;将图像会分为几个区域把…