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, //绑定的id
        labelName: '' //用于回显的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.monitorId
  handleNodeClick(data) {
      this.queryParams.labelName = data.label
      this.queryParams.monitorId = data.id
      this.$refs.selectUpResId.blur()  //选中后隐藏下拉框
    }
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Spring Boot 基于Redisson实现注解式分布式锁

依赖版本 JDK 17 Spring Boot 3.2.0 Redisson 3.25.0 源码地址&#xff1a;Gitee 导入依赖 <properties><redisson.version>3.25.0</redisson.version> </properties><dependencies><dependency><groupId>org.projectlombok</…

Linux 安装Jupyter notebook 并开启远程访问

文章目录 安装Python安装pip安装Jupyter启动Jupyter Notebook1. 生成配置文件2. 创建密码3. 修改jupyter notebook的配置文件4. 启动jupyter notebook5. 远程访问jupyter notebook 安装Python 确保你的系统上已经安装了Python。大多数Linux发行版都预装了Python。你可以在终端…

QT/C++ 远程数据采集上位机+服务器

一、项目介绍&#xff1a; 远程数据采集与传输 课题要求:编写个基于TCP的网络数据获取与传输的应用程序; 该程序具备以下功能: 1)本地端程序够通过串口与下位机(单片机)进行通信&#xff0c;实现数据采集任务 2)本地端程序能将所获取下位机数据进行保存(如csv文本格式等); 3…

[ 云计算 | AWS ] 对比分析:Amazon SNS 与 SQS 消息服务的异同与选择

文章目录 一、前言二、Amazon SNS 服务&#xff08;Amazon Simple Notification Service&#xff09;三、Amazon SQS 服务&#xff08;Amazon Simple Queue Service&#xff09;四、SNS 与 SQS 的区别&#xff08;本文重点&#xff09;4.1 基于推送和轮询区别4.2 消费者数量对应…

【教学类-43-04】20231229 N宫格数独4.0(n=2,4,6,8) (ChatGPT AI对话大师生成 回溯算法)

作品展示&#xff1a; 背景需求&#xff1a; 幼儿表示自己适合做5宫格 第一次AI生成九宫格数独python代码 【教学类-43-03】20231229 N宫格数独3.0&#xff08;n1、2、3、4、6、8、9&#xff09; &#xff08;ChatGPT AI对话大师生成&#xff09;-CSDN博客文章浏览阅读162次&…

Python武器库开发-武器库篇之上传本地仓库到Git(三十八)

武器库篇之上传本地仓库到Git(三十八) 当我们在Git中创建远程仓库和进行了SSH key免密登陆之后&#xff0c;我们点击 Your respositories 可以查看我们所创建的远程仓库&#xff0c;如图所示&#xff1a; 如果我们需要将本地的仓库上传到Git&#xff0c;首先我们需要建立一个本…

nodeJS搭建免费代理IP池爬取贴吧图片实战

之前用python写过爬虫&#xff0c;这次想试试nodeJS爬虫爬取贴吧图片&#xff0c;话不多说代码如下&#xff0c;爬取制定吧的前十页所有帖子里的图片 爬取贴吧图片脚本 你得提前创建一个images文件夹 const axios require("axios"); const cheerio require("…

Spark应用程序的结构与驱动程序

Apache Spark是一个强大的分布式计算框架&#xff0c;用于处理大规模数据。了解Spark应用程序的结构和驱动程序是构建高效应用的关键。本文将深入探讨Spark应用程序的组成部分&#xff0c;以及如何编写一个Spark驱动程序来处理数据和执行计算。 Spark应用程序的结构 Spark应用…

vue3项目使用pako库解压后端返回zip数据

文章目录 前言一、pako 介绍一些特点和功能&#xff1a;简单示例 二、vue3 实战示例1.安装后引入库安装:引用用自定义hooks 抽取共用逻辑部署小插曲 前言 外部接口返回一个图片数据是经过zip压缩的&#xff0c;前端需要把这个数据处理成可以显示的图片。大概思路&#xff1a;z…

LTPI协议的理解——2、LTPI实现的底层架构

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 LTPI协议的理解——2、LTPI实现的底层架构 前言一、体系结构三、实现细节四、物理接口信号传输方法总结 前言 前面讲了LTPI的定义和大概结构&#xff0c;接下来继续理解LTPI…

封装uniapp签字板

新开发的业务涉及到签字功能&#xff0c;由于是动态的表单&#xff0c;无法确定它会出现在哪里&#xff0c;不得已封装模块。 其中涉及到一个难点就是this的指向性问题&#xff0c; 第二个是微信小程序写法&#xff0c; 我这个写法里用了u-view的写法&#xff0c;可以自己修改组…

PiflowX组件-ReadFromKafka

ReadFromKafka组件 组件说明 从kafka中读取数据。 计算引擎 flink 有界性 Unbounded 组件分组 kafka 端口 Inport&#xff1a;默认端口 outport&#xff1a;默认端口 组件属性 名称展示名称默认值允许值是否必填描述例子kafka_hostKAFKA_HOST“”无是逗号分隔的Ka…

Zookeeper之手写一个分布式锁

前言 我之前写了一篇快速上手ZK的文章&#xff1a;https://blog.csdn.net/qq_38974073/article/details/135293106 本篇最要是进一步加深学习ZK&#xff0c;算是一次简单的实践&#xff0c;巩固学习成果。 设计一个分布式锁 对锁的基本要求 可重入&#xff1a;允许同一个应…

QT上位机开发(掌握一点c++基础)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 c是c语言的补充和扩展&#xff0c;本身的语法构成也是在一直迭代中。相信很多同学上大学读书的时候&#xff0c;或多或少对c语言有所了解&#xff…

python+django网上银行业务综合管理系统vue_bvj8b

本课题主要研究如何用信息化技术改善传统网上银行综合管理行业的经营和管理模式&#xff0c;简化网上银行综合管理的难度&#xff0c;根据管理实际业务需求&#xff0c;调研、分析和编写系统需求文档&#xff0c;设计编写符合银行需要的系统说明书&#xff0c;绘制数据库结构模…

尽量避免删改List

作者简介&#xff1a;大家好&#xff0c;我是smart哥&#xff0c;前中兴通讯、美团架构师&#xff0c;现某互联网公司CTO 联系qq&#xff1a;184480602&#xff0c;加我进群&#xff0c;大家一起学习&#xff0c;一起进步&#xff0c;一起对抗互联网寒冬 学习必须往深处挖&…

2024收入最高的编程语言

我的新书《Android App开发入门与实战》已于2020年8月由人民邮电出版社出版&#xff0c;欢迎购买。点击进入详情 1.Python Python 是最流行、用途最广泛的语言之一。它通常用于网络开发、数据科学、机器学习等。 以下是 Python 编程语言的一些主要用途&#xff1a; Web 开发&…

UE4运用C++和框架开发坦克大战教程笔记(十二)(第37~39集)

UE4运用C和框架开发坦克大战教程笔记&#xff08;十二&#xff09;&#xff08;第37~39集&#xff09; 37. 延时事件系统38. 协程逻辑优化更新39. 普通按键绑定 37. 延时事件系统 由于梁迪老师是写 Unity 游戏出身的&#xff0c;所以即便 UE4 有自带的 TimeManager 这样的延时…

基于JAVA的考研专业课程管理系统 开源项目

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 考研高校模块2.3 高校教师管理模块2.4 考研专业模块2.5 考研政策模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 考研高校表3.2.2 高校教师表3.2.3 考研专业表3.2.4 考研政策表 四、系统展示五、核…

命令行创建Vue项目

Vue项目创建 1. 打开UI界面 在命令行中&#xff0c;执行如下指令&#xff1a; vue ui 2. 打开项目管理器 3. 创建项目 创建项目的过程&#xff0c;需要联网进行&#xff0c;这可能会耗时比较长的时间&#xff0c;请耐心等待。 windows的命令行&#xff0c;容易卡顿&#xff0c…