el-popover使用自定义图标

news2024/11/17 0:04:02

在这里插入图片描述
使用el-popover实现鼠标点击或浮动到自定义图标上弹出表格弹窗,官方文档上使用的是按钮el-button,如果想换成图标或其他的组件的话直接把el-button替换掉即可。注意替换之后的组件一定要加slot=“reference”,不然组件是显示不出来的。
代码如下:

<el-popover
  placement="right"
  width="400"
  trigger="click">
  <el-table :data="gridData">
    <el-table-column width="150" property="date" label="日期"></el-table-column>
    <el-table-column width="100" property="name" label="姓名"></el-table-column>
    <el-table-column width="300" property="address" label="地址"></el-table-column>
  </el-table>
  <i slot="reference" class="el-icon-question"></i>
</el-popover>

<script>
  export default {
    data() {
      return {
        gridData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }]
      };
    }
  };
</script>

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

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

相关文章

数据可视化(六)多个子图及seaborn使用

1.多个子图绘制 #绘制多个子图 #subplot&#xff08;*args&#xff0c;**kwargs&#xff09; 每个subplot函数只能绘制一个子图 #subplots&#xff08;nrows&#xff0c;ncols&#xff09; #fig_add_subplot(行&#xff0c;列&#xff0c;区域) #绘制子图第一种方式 plt.subp…

qq邮箱 会自动拦截 github 邮件,醉了!

今天登录Github&#xff0c;修改密码&#xff0c;qq邮箱一直收不到Github的邮件 打开自助查询一看&#xff0c;自助查询在右边栏 为什么steam登陆 qq邮箱收不到验证码了&#xff1f; - 知乎 点击左上角设置&#xff0c;点击反垃圾&#xff0c;点击设置右键地址白名单 然后就可…

恒运资本:满仓的含义?

满仓&#xff0c;望文生义&#xff0c;便是财经领域中的一个术语。它指的是出资者将一切可用资金悉数用于购买股票、基金或其他金融资产。满仓的意义是出资者对某种出资产品充满决心&#xff0c;并乐意将自己的大部分资金投入其中&#xff0c;以希望取得更高的报答。但是&#…

Mongodb安装(Centos7)

1. 下载 MongoDB: The Developer Data Platform | MongoDB 2. 安装 上传至服务器 解压 tar -zxvf mongodb-linux-x86_64-rhel70-5.0.19.tgz 移动 mv mongodb-linux-x86_64-rhel70-5.0.19 /usr/local/mongodb 3. 配置 vim /etc/profile # set mongodb configuration expor…

shell centos 7 一键部署 KVM软件脚本

这个脚本有限地方还需要完善下 设计思路&#xff1a; 1、创建检查内核函数 check_kernel() 2、创建升级内核函数 update_kernel() 3、创建检查是否支持虚拟化函数 check_virtual() 4、创建检查操作系统函数 check_system() 5、创建检查网络函数 check_network() 6…

安防视频汇聚平台EasyCVR视频广场面包屑侧边栏支持拖拽操作

智能视频监控平台EasyCVR能在复杂的网络环境中&#xff0c;将海量设备实现集中统一接入与汇聚管理&#xff0c;实现视频的处理与分发、录像与存储、按需调阅、平台级联等。 TSINGSEE青犀视频汇聚平台EasyCVR可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协…

实例029 半透明渐显窗体

实例说明 很多专业软件在启动前都会显示一个说明该软件信息或用途的窗口&#xff0c;有的则是一个漂亮的启动界面&#xff0c;如Adobe公司的Acrobat。该窗口使软件显得更加专业。本例将实现一个半透明的渐显窗体&#xff0c;运行本软件会显示一个启动画面&#xff0c;并且画面…

【大招:谨慎使用】如果Git上传,pull总是有冲突而且无法解决

目录 1.先去当前项目文件夹&#xff0c;拷贝一份项目作为备份。 2.右键运行Git Bash 3.把刚才备份的项目文件夹中&#xff0c;自己的代码&#xff0c;拷贝到覆盖后文件夹里&#xff0c;并替换。 4.打开idea&#xff0c;进到项目里。把代码重新push。按如下操作&#xff1a; …

AI人工智能到底会如何发展,有没有哪些是确定的将来?

自从 chatGPT 发布&#xff0c;Ai的未来难以预测&#xff0c;但过往清晰可见&#xff0c;我们从过去大胆推测一下未来。 1950年&#xff0c;图灵提出了"图灵测试"&#xff0c;作为衡量机器是否具有人类智能的标准。 2016年&#xff0c;DeepMind的AlphaGo战胜了围棋世…

Qt实现自定义QDoubleSpinBox软键盘

在Qt应用程序开发中&#xff0c;经常会遇到需要自定义输入控件的需求。其中&#xff0c;对于QDoubleSpinBox控件&#xff0c;如果希望在点击时弹出一个自定义的软键盘&#xff0c;以便用户输入数值&#xff0c;并将输入的值设置给QDoubleSpinBox&#xff0c;该如何实现呢&#…

35.利用fminsearch解 多元变量无约束条件下的函数最小值(matlab程序)

1.简述 1.fminsearch函数基本语法 函数功能&#xff1a;使用无导数法计算无约束多变量函数的最小值 语法 x fminsearch(fun,x0) x fminsearch(fun,x0,options) x fminsearch(problem) [x,fval] fminsearch(___) [x,fval,exitflag] fminsearch(___) [x,fval,exitflag,out…

苹果、高通、联发科新一代旗舰处理器纷纷出炉,A17 又赢麻了

眼看又到了 8 月份&#xff0c;距离每年后半段各家新款旗舰手机发布的日子越来越近。 但在这之前往往率先展开的是移动手机处理器之间的巅峰对决。 高通骁龙 8 Gen3、联发科天玑 9300、苹果 A17 无疑将会成为今年厮杀的主战场。 到了临近关头&#xff0c;这几款处理器规格、性…

如何制作一个中小学分班查询系统?

随着暑假接近尾声&#xff0c;新学年即将开始&#xff0c;学校面临着重要的任务&#xff0c;即学生们的分班问题。这一问题包括新生入学的分班及低年级学生升入高年级的分班。对负责分班工作的老师们来说&#xff0c;这无疑增加了工作量和挑战。 为确保学生顺利入学并分配到适…

url编码,html编码,uncode编码

目录 url编码 html实体编码 unicode编码 url编码 URL编码遵循下列规则&#xff1a; 每对name/value由&&#xff1b;符分开&#xff1b;每对来自表单的name/value由符分开。如果用户没有输入值给这个name&#xff0c;那么这个name还是出现&#xff0c;只是无值。任何特殊…

【复习61-66题】【每天40分钟,我们一起用50天刷完 (剑指Offer)】第四十四天 44/50

专注 效率 记忆 预习 笔记 复习 做题 欢迎观看我的博客&#xff0c;如有问题交流&#xff0c;欢迎评论区留言&#xff0c;一定尽快回复&#xff01;&#xff08;大家可以去看我的专栏&#xff0c;是所有文章的目录&#xff09;   文章字体风格&#xff1a; 红色文字表示&#…

KEIL Map文件解析以及如何从Map文件还原内存分布

一、什么是Map文件 简单来说&#xff0c;Map文件是编译器编译工程后生成的一个文件&#xff0c;这个文件反映了各个源文件生成的模块间的交叉引用、移除的未使用模块、符合映射表、内存映射以及各个模块的大小和汇总数据等。 所以说&#xff0c;当你在遇到或怀疑存在内存越界或…

RISC-V基础之函数调用(三)保留寄存器(包含实例)

RISC-V将寄存器分为保留和非保留两类。保留寄存器是指在函数调用前后必须保持相同值的寄存器&#xff0c;因为调用者期望在调用后能够继续使用这些寄存器的值。保留寄存器包括s0到s11&#xff08;因此称为saved&#xff09;&#xff0c;sp和ra。非保留寄存器&#xff0c;也称为…

2023年华数杯B题

B 题 不透明制品最优配色方案设计 日常生活中五彩缤纷的不透明有色制品是由着色剂染色而成。因此&#xff0c;不透明 制品的配色对其外观美观度和市场竞争力起着重要作用。然而&#xff0c;传统的人工配色 存在一定的局限性&#xff0c;如主观性强、效率低下等。因此&#xff0…

uniapp封装request请求

在基础文件里面创建一个api文件 在创建两个 js文件 http.js 里面封装 request 请求 let baseUrl https://white.51.toponet.cn; //基地址 export const request (options {}) > {//异步封装接口&#xff0c;使用Promise处理异步请求return new Promise((resolve, reject…

html学习7(iframe)

1、通过使用iframe标签定义框架&#xff0c;可在同一个浏览器中显示不止一个画面。 2、height和width属性用于定义框架的高度与宽度。 3、属性frameborder‘0’用于是否显示边框。 4、iframe可以显示一个目标链接的页面&#xff0c;链接的target属性设置为相应的iframe名称。…