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

news2024/11/26 18:42:25

 效果:

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.coloradmin.cn/o/1342709.html

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

相关文章

2023年度总结(找到工作)

转眼2023年结束了&#xff0c;今天已经12月29日了。从2022年12月25日考研失败后&#xff0c;2023年就变成了找工作以及上班度日的时光了。针对2023年&#xff0c;我想对自己所说的是&#xff1a;终于找到工作了。作为一个普通的专升本&#xff0c;考研落榜生来说&#xff0c;能…

VsCode(Visual Studio Code) 安装插件教程

VsCode&#xff08;Visual Studio Code&#xff09; 安装插件教程 1、打开VsCode 桌面上、最近安装程序上找找吧 在桌面上双击&#xff0c;打开 2、打开的效果图 3、点击左侧最后的插件图标 4、打开后如下图所示 5、在输入框中输入Go 6、同样在安装插件页面也可以卸载、安装…

rax3000m刷openwrt固件

rax3000m刷机过程&#xff08;nand版本&#xff09; 刷机准备文件https://www.123pan.com/s/X5m9-6Ynj.html提取码:VtBW 接线关系&#xff1a;路由器lan口接电脑 1.上传配置开启ssh的配置文件&#xff08;登录路由器后台管理界面在找到配置管理&#xff0c;上传配置文件rax3…

联合办公行业即将走向寒冬?如何重拾创业者信心

近年来&#xff0c;联合办公行业固然经历了迅猛发展&#xff0c;但现在似乎遭遇了一个潜在的拐点。面对经济的下行压力&#xff0c;一些人士担忧联合办公行业可能会步入寒冬。就在这个关键时刻&#xff0c;如何重拾创业者的信心成为行业内急需解决的问题。 首先要认识到的是&am…

探索 Node.js 与 C++ 的绑定:使用 node-addon-api

在 Node.js 中使用 C 进行绑定是一种强大的方式&#xff0c;可以充分利用 C 的性能优势。在本文中&#xff0c;我们将探讨如何使用 node-addon-api 来实现这一目标。 1. 为什么选择 C 绑定&#xff1f; Node.js 是一个基于 JavaScript 的平台&#xff0c;它使得开发人员能够使…

中介者模式-Mediator Pattern-1

如果在一个系统中对象之间的联系呈现为网状结构&#xff0c; 对象之间存在大量的多对多联系&#xff0c;将导致系统非常复杂。 这些对象既会影响别的对象&#xff0c;也会被别的对象所影响。 这些对象称为同事对象&#xff0c;它们之间通过彼此的相互作用实现系统的行为。 在网…

如何本地搭建FastDFS文件服务器并实现远程访问【内网穿透】

文章目录 前言1. 本地搭建FastDFS文件系统1.1 环境安装1.2 安装libfastcommon1.3 安装FastDFS1.4 配置Tracker1.5 配置Storage1.6 测试上传下载1.7 与Nginx整合1.8 安装Nginx1.9 配置Nginx 2. 局域网测试访问FastDFS3. 安装cpolar内网穿透4. 配置公网访问地址5. 固定公网地址5.…

2024年软考中级-网络工程师

网络工程师证书考到后&#xff0c;通过本级考试的合格人员能根据应用部门的要求进行网络系统的规划、设计和网络设备的软硬件安装调试工作&#xff0c;能进行网络系统的运行、维护和管理&#xff0c;能高效、可靠、安全地管理网络资源&#xff1b;作为网络专业人员对系统开发进…

sqlite3 c++ VS编译生成静态库

官网 https://www.sqlite.org/download.html 下载sqlite-amalgamation和x86版本下载sqlite-dll-win32-x86、x64位版本sqlite-dll-win64-x64 解压 SQLITE-AMALGAMATION包含 shell.csqlite3.csqlite3.hsqlite3ext.hsqlite-dll-win32-x86包含 sqlite3.def sqlite3.dll建立一个空…

使用ArcMap进行选址服务,适宜性分析

文章目录 题目分析技术步骤1&#xff0c;环境设置2&#xff0c;计算坡度&#xff1a;空间分析——表面分析——坡度&#xff0c;根据DEM求坡度4&#xff0c;距离计算3&#xff0c;坡度赋分4&#xff0c;对学校赋分5&#xff0c;娱乐设施赋分6&#xff0c;土地利用类型赋分7&…

springboot整合hadoop遇错

错误一&#xff1a; Caused by: java.io.FileNotFoundException: HADOOP_HOME and hadoop.home.dir are unset. 解决&#xff1a; 下载&#xff1a;https://github.com/steveloughran/winutils 选择一个版本 例如&#xff1a;3.0.0 &#xff0c;将里面的hadoop.dll文件复制…

Linux磁盘阵列

一.RAID磁盘阵列介绍 RAID&#xff08;Redundatnt Array of lndependent Disks&#xff09;&#xff0c;全称为&#xff1a;独立冗余磁盘阵列 解释&#xff1a; RAID是一种把多块独立的硬盘&#xff08;物理硬盘&#xff09;按不同的方式组合起来形成一个硬盘组&#xff08;逻…

【教程】自动检测和安装Python脚本依赖的第三方库

转载请注明出处&#xff1a;小锋学长生活大爆炸[xfxuezhang.cn] 背景说明 对于新python环境&#xff0c;要运行某个脚本&#xff0c;可能需要安装很多库&#xff0c;一般可以通过提供的requirements.txt来自动安装。但如果没有这个txt&#xff0c;那就得手动一个一个安装&#…

Live800:客服售前、售中,售后需要做哪些服务?有哪些区别?

客服在售前、售中和售后阶段扮演着重要的角色&#xff0c;他们为顾客提供全方位的服务&#xff0c;确保顾客的满意度和忠诚度。尽管这三个阶段都涉及到与顾客的互动&#xff0c;但每个阶段的服务内容和重点有所不同。 在售前阶段&#xff0c;客服的主要任务是提供产品或服务的信…

深入浅出图解C#堆与栈 C# Heap(ing) VS Stack(ing) 第三节 栈与堆,值类型与引用类型

深入浅出图解C#堆与栈 C# Heaping VS Stacking 第三节 栈与堆&#xff0c;值类型与引用类型 [深入浅出图解C#堆与栈 C# Heap(ing) VS Stack(ing) 第一节 理解堆与栈](https://mp.csdn.net/mdeditor/101021023)[深入浅出图解C#堆与栈 C# Heap(ing) VS Stack(ing) 第二节 栈基本工…

视频监控EasyCVR如何通过设置sei接口,实现在webrtc视频流中添加画框和文字?

安防视频监控系统基于视频综合管理平台EasyCVR视频系统&#xff0c;采用了开放式的网络结构&#xff0c;可以提供实时远程视频监控、视频录像、录像回放与存储、告警、语音对讲、云台控制、平台级联、磁盘阵列存储、视频集中存储、云存储等丰富的视频能力&#xff0c;具备权限管…

炎症状态重塑了急性髓系白血病的免疫微环境并改善了风险分层

今天给同学们分享一篇实验文章“An inflammatory state remodels the immune microenvironment and improves risk stratification in acute myeloid leukemia”&#xff0c;这篇文章发表在Nat Cancer期刊上&#xff0c;影响因子为22.7。 结果解读&#xff1a; 成人和儿童AML的…

掌握比特币生态话语权,或将成为下一轮牛市爆发的掌舵人!

伴随着美国SEC批准比特币现货的强烈的市场预期&#xff0c;比特币财富效应日益显著&#xff0c;比特币价格更是从年初的16500美金一路上涨到了44000美金&#xff0c;而代币上涨带来的大量资金的涌入&#xff0c;也促使比特币生态也再次进入了高速发展期&#xff0c;铭文资产在比…

**Python**综合案例

Python综合案例 一、系统需求分析 1、需求分析 使用面向对象编程思想完成学员管理系统的开发,具体如下: ① 系统要求:学员数据存储在文件中 ② 系统功能:添加学员、删除学员、修改学员信息、查询学员信息、显示所有学员信息、保存学员信息及退出系统等功能。 2、角色…

C/C++ 函数参数按引用传递、指针传递、实参传递

引用经常被用作函数参数&#xff0c;使得函数中的变量名成为调用程序中的变量的别名。这种传递参数的方法称为按引用传递。按引用传递允许被调用的函数能够访问调用函数中的变量。C新增的这项特性是对 C语言的超越&#xff0c;C语言只能按值传递。按值传递导致被调用函数使用调…