vue 实现下拉框的数据是树状结构

news2024/12/23 13:32:20

页面显示效果

 


vue实现代码

   <el-form-item label="公司名称" prop="comName">
        <el-select ref="select" v-model="queryParams.comName" placeholder="请选择公司名称" clearable size="small"
          @change="handleSelectChange">
          <el-option :value="queryParams.comName" style="height: 1200px; overflow: auto">
            <el-tree :data="treeData" :props="defaultProps" :expand-on-click-node="false" @node-click="handleNodeClick"
              class="select-tree">
              <span class="custom-tree-node" slot-scope="{ node, data }">
                {{ data.label }}
              </span>
            </el-tree>
          </el-option>
        </el-select>
      </el-form-item>

js部分

<script>
import { listGateway, getGateway, delGateway, addGateway, updateGateway, exportGateway } from "@/api/gw/gateway";
import { treeselectCom } from "@/api/system/com";
export default {
  name: "Gateway",
  components: {
  },
  data() {
    return {
      // 树形选择器数据
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
    };
  },
  created() {
    //1、获取数据
    this.getTreeselect();
  },
  methods: {
    /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselectCom().then((response) => {
        this.treeData = response.data;
        console.log(this.treeData);
        // this.form.comName = this.treeData[0].label;
        // this.defaulComId = this.comOptions[0].id;
      });
    },
    handleNodeClick(data) {
      this.queryParams.comName = data.label;
      this.$refs.select.blur(); // 关闭下拉菜单
    },
    handleSelectChange(value) {
      console.log('Selected node:', value);
    }
    
  }
};
</script>
<style scoped>
.select-tree {
  padding: 5px;
}
</style>

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

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

相关文章

FastAPI 学习之路(五十)WebSockets(六)聊天室完善

我们这次只是对于之前的功能做下优化&#xff0c;顺便利用下之前的操作数据的接口&#xff0c;使用下数据库的练习。 在聊天里会有一个上线的概念。上线要通知大家&#xff0c;下线也要通知大家谁离开了&#xff0c;基于此功能我们完善下代码。 首先&#xff0c;我们的登录用…

昇思25天学习打卡营第二天|初学入门/初学教程/03-张量

心得 补充一些基本知识帮助理解张量这个比较理论的概念&#xff1a; 张量&#xff08;tensor&#xff09;理论是数学的一个分支学科&#xff0c;在力学中有重要应用。张量这一术语起源于力学&#xff0c;它最初是用来表示弹性介质中各点应力状态的&#xff0c;后来张量理论发…

《后端程序员 · Nacos 常见配置 · 第一弹》

&#x1f4e2; 大家好&#xff0c;我是 【战神刘玉栋】&#xff0c;有10多年的研发经验&#xff0c;致力于前后端技术栈的知识沉淀和传播。 &#x1f497; &#x1f33b; CSDN入驻不久&#xff0c;希望大家多多支持&#xff0c;后续会继续提升文章质量&#xff0c;绝不滥竽充数…

windows系统安装nacos

1、github下载nacos并解压。 https://github.com/alibaba/nacos 2、启动nacos: 进入bin目录&#xff0c;打开命令行,然后输入命令&#xff1a; startup.cmd -m standalone2.1 如何直接启动 修改bin目录下的startup.cmd启动文件&#xff0c;修改为&#xff1a;MODE“standalone…

Jenkins安装nodeJs环境

首先插件市场安装nodeJS插件&#xff0c;我这里已经安装了&#xff0c;没安装的话在 Available plugins 中搜索安装 安装完成后需要下载需要的nodejs版本 新增完成就可以在构建的时候选择当前版本号了

Kafka Producer发送消息流程之分区器和数据收集器

文章目录 1. Partitioner分区器2. 自定义分区器3. RecordAccumulator数据收集器 1. Partitioner分区器 clients/src/main/java/org/apache/kafka/clients/producer/KafkaProducer.java&#xff0c;中doSend方法&#xff0c;记录了生产者将消息发送的流程&#xff0c;其中有一步…

Mongodb数组字段索引之多键索引

学习mongodb&#xff0c;体会mongodb的每一个使用细节&#xff0c;欢迎阅读威赞的文章。这是威赞发布的第92篇mongodb技术文章&#xff0c;欢迎浏览本专栏威赞发布的其他文章。如果您认为我的文章对您有帮助或者解决您的问题&#xff0c;欢迎在文章下面点个赞&#xff0c;或者关…

跨境电商小白0-1教程,跨境电商新手开店教程

跨境电商新纪元&#xff0c;新手开店秘籍大公开&#xff01;&#x1f680; 还在为跨境电商的浩瀚海洋感到迷茫&#xff1f;别怕&#xff0c;从0到1的开店之旅&#xff0c;我们为你精心铺设了每一步&#xff01;&#x1f463; 无论你是完全的新手跨境小白&#xff0c;还是对未来…

【雷丰阳-谷粒商城 】【分布式高级篇-微服务架构篇】【23】【订单服务】

持续学习&持续更新中… 守破离 【雷丰阳-谷粒商城 】【分布式高级篇-微服务架构篇】【23】【订单服务】 订单中心订单信息用户信息订单基础信息商品信息优惠信息支付信息物流信息 订单状态订单流程订单创建与支付逆向流程 订单确认页Feign远程调用丢失请求头问题Feign异步…

Qt第十一章 其他控件

其他控件 文章目录 其他控件按钮组项目小部件输入控件显示控件容器 按钮组 命令链接按钮 对话框按钮盒子 添加基础按钮 改变排列方向 项目小部件 列表控件List Widget 也可以通过代码添加 // 添加ui->listWidget->addItem("你好啊");ui->listWidge…

数据链路层重点协议

目录 一、以太网 二、MTU 1、MTU对IP协议的影响 2、MTU对UDP的影响 3、MTU对TCP协议的影响 三、ARP协议 1、作用&#xff1a;建立主机IP地址和MAC地址的映射关系 2、工作流程 一、以太网 以太网不是一种具体的网络&#xff0c;而是一种技术标准。既包含了数据链路层的…

数据库第9

安装redis&#xff0c;启动客户端、验证 C:\Windows\System32>redis-cli string类型数据的命令操作&#xff1a; 设置键值 set k1 12 读取键值 get k1 ​ 数值类型自增1 incr k1 数值类型自减1 decr k1 查看值的长度 STRLEN k1 list类型数据的命令操作&#xff1a; &#x…

[MySQL][内置函数][日期函数][字符串函数][数学函数]详细讲解

目录 1.日期函数1.基础语法2.示例13.示例2 2.字符串函数1.基础语法2.示例 3.数学函数1.基础语法2.示例 4.其他函数 1.日期函数 1.基础语法 日期时间在MYSQL中是区分开的 日期&#xff1a;年月日时间&#xff1a;时分秒 获得年月日select current_date();----------------| cur…

Open3D 最小二乘法拟合点云平面

目录 一、概述 1.1最小二乘法原理 1.2实现步骤 1.3应用场景 二、代码实现 2.1关键函数 2.2完整代码 三、实现效果 3.1原始点云 3.2matplotlib可视化 3.3平面拟合方程 前期试读&#xff0c;后续会将博客加入该专栏&#xff0c;欢迎订阅 Open3D点云算法与点云深度学习…

opencv学习:图像视频的读取截取部分图像数据颜色通道提取合并颜色通道边界填充数值计算图像融合

一、计算机眼中的图像 1.图像操作 构成像素点的数字在0~255之间 RGB叫做图像的颜色通道 h500&#xff0c;w500 2.灰度图像 3. 彩色图像 4.图像的读取 5.视频的读取 cv2.VideoCapture()--在OpenCV中&#xff0c;可以使用VideoCapture来读取视频文件&#xff0c;或是摄像头数…

前缀和算法——部分OJ题详解

&#xff08;文章的题目解释可能存在一些问题&#xff0c;欢迎各位小伙伴私信或评论指点&#xff08;双手合十&#xff09;&#xff09; 关于前缀和算法 前缀和算法解决的是“快速得出一个连续区间的和”&#xff0c;以前求区间和的时间复杂度是O(N)&#xff0c;使用前缀和可…

关于springboot的@DS(““)多数据源的注解无法生效的原因

对于com.baomidou.dynamic.datasource.annotation的DS注解&#xff0c;但凡有一个AOP的修改都会影响到多数据源无法生效的问题&#xff0c;本次我是添加了方法上添加了Transactional&#xff0c;例如下图&#xff1a; 在方法上写了这个注解&#xff0c;会影响到DS("db2&qu…

MODEL4高性价比工业级HMI芯片在喷码机解决方案中的应用

一、概述 随着工业自动化与智能化的发展&#xff0c;喷码机作为标识设备在各行各业中扮演着至关重要的角色。为满足市场对于高效、精准、灵活喷码的需求&#xff0c;我们推出了基于MODEL4工业级HMI芯片的喷码机解决方案。 该方案集成了高性能国产嵌入式64位RISC-V内核芯片组&…

<数据集>铁轨缺陷检测数据集<目标检测>

数据集格式&#xff1a;VOCYOLO格式 图片数量&#xff1a;844张 标注数量(xml文件个数)&#xff1a;844 标注数量(txt文件个数)&#xff1a;844 标注类别数&#xff1a;3 标注类别名称&#xff1a;[Spalling, Squat, Wheel Burn] 序号类别名称图片数框数1Spalling3315522…

集线器、交换机、路由器的区别,冲突域、广播域

冲突域 定义&#xff1a;同一时间内只能有一台设备发送信息的范围。 分层&#xff1a;基于OSI模型的第一层物理层。 广播域 定义&#xff1a;如果某个站点发出一个广播信号&#xff0c;所有能接受到这个信号的设备的范围称为一个广播域。 分层&#xff1a;基于OSI模型的第二…