实现鼠标移动el-select下拉框的label上面显示出table悬浮窗

首先是对vue代码
实现思路就是在el-option里面放一个span来包裹el-popover,里面在放tabe实现悬浮表格

<el-form-item label="原理图编号">
          <el-select v-model="data.number" placeholder="请选择" clearable multiple collapse-tags collapse-tags-tooltip popper-class="custom-header" style="width: 180px">
            <el-option v-for="item in numberList" :key="item.id" :value="item.number"
                       :label="item.number">
              <span style="">
                <el-popover placement="right" :width="500" trigger="hover">
                  <template #reference>
                    <span style="margin-right: 16px;cursor: pointer;">{{item.number}}</span>
                  </template>
                  <el-table :data="item.herderList">
                    <el-table-column property="drawingType" label="图纸类型" />
                    <el-table-column property="drawingName" label="图纸名称" />
                    <el-table-column property="interlockType" label="联锁类型" />
                    <el-table-column property="remark" label="备注" />
                  </el-table>
                </el-popover>
              </span>
            </el-option>
          </el-select>
        </el-form-item>

需要注意每个悬浮窗显示的是单个标签对应的数据,所以我这里在获取到数据后又将每个对象里面的其他数据拆分出来放到一个数组字段中,就是item.herderList。
方法如下

//查询原理图编号数据
function getYltDataList(){
  selectCircuitousPhilosophyList({
    devType: 'xhj'
  }).then(result => {
    numberList.value = result.data
    console.log(numberList.value)
    for (let i = 0; i < numberList.value.length; i++) {
      let row = numberList.value[i]
      //在这里把单个对象的其他数据添加到一个数组中,这个数组属于这个对象
      row.herderList = [{drawingName: row.drawingName,drawingType: row.drawingType,interlockType: row.interlockType,remark: row.remark }]
    }
  })
}

最后附上效果图
在这里插入图片描述

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

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

相关文章

操作系统笔记(进程)

注&#xff1a; 下面图片资源来源于 王道计算机考研 操作系统 1.进程概念 进程&#xff08;process&#xff09;&#xff1a;是动态的&#xff0c;是程序的一次执行过程&#xff08;同一程序多次执行&#xff0c;会产生多个进程&#xff09;程序&#xff1a;是静态的&…

ChatGPT提示技巧:种子词提示

ChatGPT提示技巧&#xff1a;种子词提示 种子词提示是一种通过提供特定种子词或短语来控制 ChatGPT 输出的技术。 种子词提示符的提示公式是种子词或短语&#xff0c;然后是指令 “请根据以下种子词生成文本”。 示例&#xff1a; 文本生成&#xff1a; 任务&#xff1a; …

MVC,MVP的对比(附代码)一次搞懂!

首先看下我们的页面 一个edittext&#xff0c;一个获取用户信息的button&#xff0c;一个展示用户信息的textview 实现&#xff1a;点击按钮&#xff0c;根据用户输入的账号&#xff0c;获取账号信息并显示在textview上 现在我们用三种方式实现 &#xff08;1&#xff09;不使…

Unity性能优化篇(十) 模型优化之网格合并 Easy Mesh Combine Tool插件使用以及代码实现网格合并

把多个模型的网格合并为一个网格。可以使用自己写代码&#xff0c;使用Unity自带的CombineMeshes方法&#xff0c;也可以使用资源商店的插件&#xff0c;在资源商店搜Mesh Combine可以搜索到相关的插件&#xff0c;例如Easy Mesh Combine Tool等插件。 可大幅度减少Batches数量…

Nginx实现高并发

注&#xff1a;文章是4年前在自己网站上写的&#xff0c;迁移过来了。现在看我之前写的这篇文章&#xff0c;描述得不是特别详细&#xff0c;但描述了Nginx的整体架构思想。如果对Nginx玩得透得或者想了解深入的&#xff0c;可以在网上找找其他的文章。 ......................…

C++顺序结构实例

1.计算浮点数相除的余数 计算两个双精度浮点数a和b相除的余数,a和b都是双精度浮点数。这里的余数r的定义是: a=k * 吧+r,其中k是整数,0<=r<b。 输入 一行,包括两个双精度浮点数a和b 输出 一行,a➗b的余数 样例输入 73.263 0.9973 样例输出 0.4301 #i…

机器学习--循环神经网络(RNN)3

本篇文章结合具体的例子来介绍一下LSTM运算方式以及原理。请结合上篇文章的介绍食用。 一、具体例子 如上图所示&#xff0c;网络里面只有一个 LSTM 的单元&#xff0c;输入都是三维的向量&#xff0c;输出都是一维的输出。 这三维的向量跟输出还有记忆元的关系是这样的。 假设…

小小磁珠对EMC的作用竟然这么大?

磁珠&#xff0c;作为一种电感型的EMI静噪滤波器&#xff0c;其外观与电感颇为相似。目前&#xff0c;应用最为广泛的磁珠类型是铁氧体磁珠&#xff0c;也称作Ferrite Bead。它的度量单位是欧姆&#xff0c;根据型号的不同&#xff0c;磁珠能够抑制的频率范围广泛&#xff0c;覆…

考研数学——高数:重积分

直角坐标系下二重积分 助记1&#xff1a; 因为一重积分求出的是二维平面的面积&#xff0c;类比得到二重积分得到的是三维的体积 而用之前求旋转体体积的思路&#xff1a;已知截面面积可求得体积。来表示二重积分 在控制一个变量不变&#xff08;x / y&#xff09;时&#x…

AVL树讲解

AVL树 1. 概念2. AVL节点的定义3. AVL树插入3.1 旋转 4.AVL树的验证 1. 概念 AVL树是一种自平衡二叉搜索树。它的每个节点的左子树和右子树的高度差&#xff08;平衡因子&#xff0c;我们这里按右子树高度减左子树高度&#xff09;的绝对值不超过1。AVL的左子树和右子树都是AV…

论文阅读笔记 | MetaIQA: Deep Meta-learning for No-Reference Image Quality Assessment

文章目录 文章题目发表年限期刊/会议名称论文简要动机主要思想或方法架构实验结果 文章链接&#xff1a;https://doi.org/10.48550/arXiv.2004.05508 文章题目 MetaIQA: Deep Meta-learning for No-Reference Image Quality Assessment 发表年限 2020 期刊/会议名称 Publi…

vue router 解决路由带参数跳转时出现404问题

我的页面是从一个vue页面router跳转到另一个vue页面&#xff0c;并且利用windows.open() 浏览器重新创建一个页签。但是不知道为什么有时候可以有时候又不行&#xff0c;经过反复测试与分析&#xff0c;最终发现是因为有一个参数的值里包含了小数点., 小数点是浏览器合法字符&a…

visualization_msgs::Marker 的pose设置,map坐标系的3d box显示问题

3D框显示 3D框显示可以使用visualization_msgs::Marker::LINE_LIST或者LINE_STRIP&#xff0c;前者使用方法需要指明线的两个端点&#xff0c;后者自动连接相邻两个点。 姿态问题 网上看了一些&#xff0c;没有涉及到朝向设置&#xff0c;Pose.orientation默认构造为4个0 至…

域控操作十:安装包exe转msi软件下发

需要的文件 Advanced Installer 软件用来将exe转换成msi因为域控只能下发msi格式 一个exe安装包这里拿微信举例 一个没有密码的共享文件夹 1.exe转MSI 2&#xff0c;开始下发 服务器和用户刷新策略 #完成

解决方案TypeError: string indices must be integers

文章目录 一、现象&#xff1a;二、解决方案 一、现象&#xff1a; PyTorch深度学习框架&#xff0c;运行bert-mini&#xff0c;本地环境是torch1.4-gpu&#xff0c;发现报错显示&#xff1a;TypeError: string indices must be integers 后面报字符问题&#xff0c;百度过找…

【附教程】2024,人工智能+声音,看这里就够了~16款AI音乐/音频/音效,声音克隆等ai软件与工具大合集~

AI音乐音频领域的技术正在迅速发展&#xff0c;为音乐创作和编辑带来了革命性的改变。这些技术通过深度学习和生成式模型&#xff0c;能够理解并模仿音乐的复杂结构和情感&#xff0c;从而创作出高质量的音乐作品。 AI音乐音频技术使得音乐创作变得更加高效和便捷。创作者只需…

Unity DropDown 组件 详解

Unity版本 2022.3.13f1 Dropdown下拉菜单可以快速创建大量选项 一、 Dropwon属性详解 属性&#xff1a;功能&#xff1a;Interactable此组件是否接受输入&#xff1f;请参阅 Interactable。Transition确定控件以何种方式对用户操作进行可视化响应的属性。请参阅过渡选项。Nav…

CodeSys通过C函数接口调用Qt

建议先查看之前的文章【CodeSys中调用C语言写的动态库】&#xff0c;了解如何创建一个能够被codesys调用的动态库。 假如想要在函数中使用Qt或者第三方库&#xff08;比如opencv等&#xff09;&#xff0c;可以在其自动生成的makefile文件中设置好相应的参数。 比如我这里就是…

洗地机怎么选|洗地机哪款好用?添可、希亦、美的洗地机哪个最耐用质量好?

在现代生活中&#xff0c;屋内清洁是一项必不可少的工作&#xff0c;但也是一项费时费力的工作。随着科技的进步&#xff0c;家庭清洁工具也正经历着革命性的变革。洗地机&#xff0c;一种集吸尘、拖地、清洗于一体的智能家居清洁工具&#xff0c;正逐渐成为现代家庭必备的家电…

鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:ImageSpan)

Text组件的子组件&#xff0c;用于显示行内图片。 说明&#xff1a; 该组件从API Version 10开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 子组件 无 接口 ImageSpan(value: ResourceStr | PixelMap) 参数&#xff1a; 参数名参数类…