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.hqwc.cn/news/308641.html

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

相关文章

ACM32F403/F433 12 位多通道国产芯片,支持 MPU 存储保护功能,应用于工业控制,智能家居等产品中

ACM32F403/F433 芯片的内核基于 ARMv8-M 架构&#xff0c;支持 Cortex-M33 和 Cortex-M4F 指令集。芯片内核 支持一整套DSP指令用于数字信号处理&#xff0c;支持单精度FPU处理浮点数据&#xff0c;同时还支持Memory Protection Unit &#xff08;MPU&#xff09;用于提升应用的…

stm32中的i2c协议

stm32中I2C 文章目录 stm32中I2CI2C 协议简介I2C物理层协议层I2C基本读写过程 **通讯的起始和停止信号****数据有效性****地址及数据方向****响应** STM32的I2C特性及架构**STM32** **的** I2C外设简介STM32 的 I 2C 架构剖析通讯引脚 通讯过程主发送器主接收器 I2C初始化结构体…

隧道代理HTTP工作原理:一场奇妙的网络魔法表演

嘿&#xff0c;小伙伴们&#xff01;今天我们要一起探索一个有趣的话题——隧道代理HTTP的工作原理。这不是普通的表演&#xff0c;而是一场奇妙的网络魔法表演&#xff01; 首先&#xff0c;让我们想象一下&#xff0c;网络世界就像一个大舞台&#xff0c;而我们每个人都是这…

mysql日志报错报错:Bad handshake

MySQL版本&#xff1a;5.7.4 mysql日志报错如下 导致数据库报错的原因是客户端那边是java程序启用了ssl连接&#xff0c;java程序日志如下 原因是&#xff1a; MySQL 5.5.45&#xff0c; 5.6.26和5.7.6的要求&#xff0c;如果没有设置显式选项&#xff0c;则必须默认建立SSL…

Linux升级指南:保持系统安全和高效运行

Linux系统的升级是确保系统稳定和安全性的重要步骤。本文将介绍Linux系统升级的基本概念&#xff0c;以及具体的操作步骤和注意事项&#xff0c;以帮助用户顺利升级他们的Linux系统。 Linux操作系统以其稳定性和可定制性而闻名&#xff0c;它经常通过升级来提供新的功能、修复漏…

[Angular] 笔记 18:Angular Router

Angular Router 视频 chatgpt&#xff1a; Angular 具有内置的大量工具、功能和库&#xff0c;功能强大且经过良好设计&#xff0c;如组件化架构、依赖注入、模块化系统、路由和HTTP客户端等。这些功能可以直接用于项目中&#xff0c;无需额外的设置或第三方库。这简化了开发流…

MyBatis标签及其应用示例

MyBatis标签及其应用示例 1. select 1.1 标签属性 id唯一的标识符parameterType传给此语句的参数的全路径名或别名如&#xff1a;com.xxx.xxx.demo.entity.User或userresultType语句返回值类型或别名。如果是集合List&#xff0c;此处填写集合的泛型T&#xff0c;而不是集合…

三台CentOS7.6虚拟机搭建Hadoop完全分布式集群(二)

这个是笔者大学时期的大数据课程使用三台CentOS7.6虚拟机搭建完全分布式集群的案例&#xff0c;已成功搭建完全分布式集群&#xff0c;并测试跑实例。 6.安装JDK 以下操作现在master上操作&#xff0c;然后远程复制到slave01、slave02即可。 6.1 将压缩包发送到master节点机…

Spring-6-事务管理

事务是构建可靠企业级应用程序的最关键部分之一。 最常见的事务类型是数据库操作。 在典型的数据库更新操作中&#xff0c;首先数据库事务开始&#xff0c;然后数据被更新&#xff0c;最后提交或回滚事务(根据数据库操作的结果而定)。但是&#xff0c;在很多情况下&#xff0…

你能描述下你对vue生命周期的理解?在created和mounted这两个生命周期中请求数据有什么区别呢?

一、生命周期是什么 生命周期&#xff08;Life Cycle&#xff09;的概念应用很广泛&#xff0c;特别是在政治、经济、环境、技术、社会等诸多领域经常出现&#xff0c;其基本涵义可以通俗地理解为“从摇篮到坟墓”&#xff08;Cradle-to-Grave&#xff09;的整个过程在Vue中实…

【unity学习笔记】配置模型,实现眨眼和口型效果

一、vriod捏人 1.在vroidstudio软件中捏人 2.导出模型&#xff08;.vrm) 二、vrid导入unity的插件 1.在Git上搜索、打开univrm。 2.找到release页面找到合适的插件版本。&#xff08;VRM-0.116.0_0f6c&#xff09; 3.将univrm导入到工程中&#xff08;assets&#xff09;。 三…

QT上位机开发(第一个应用)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 不管是软件&#xff0c;还是硬件&#xff0c;如果我们能够顺利启动第一个应用&#xff0c;点亮第一个电路的话&#xff0c;这对我们的信心来说会有…