「Element-UI表头添加带Icon的提示信息」

news2024/10/6 6:51:23

一、封装全局组件

🍓 注意:可以直接复制该文件

<!-- // 写一个PromptMessage的组件,并全局注册 -->
<template>
 <div class="tooltip">
 <el-tooltip effect="dark" placement="right">
  <div slot="content">
  <p v-for="item in messages" :key="item">
   {{item}}
  </p>
  </div>
  <i class="el-icon-info" style="color:#409eff;margin-left:2px;font-size:13px;"></i>
 </el-tooltip>
 </div>
</template>

<script>
 export default {
	props:['messages']
 };
</script>

🍭 引入:在main.js 中引入全局组件

// 引入
import PromptMessage from '@/views/common/PromptMessage'
// 注册为全局组件
Vue.component('PromptMessage', PromptMessage)

二、具体页面如何应用

在这里插入图片描述
在这里插入图片描述
🍇 以下代码可直接复制粘贴

// 注意: ⚠️ messages信息是以数组的形式展示的 数组里每一个元素展示出来就是一行信息

renderHeader(h, {column}) {		
	return h(
		'div', {
		style: 'display:inline-flex;margin:auto;'
	},
		[
			h('span', column.label),
			h('prompt-message', {
				props: {
					messages: ['这是第一行Tip信息','这是第二行Tip信息']
				}
			})
		]
	);
},

三:效果如下 🍹

在这里插入图片描述


四、寄语

人生如棋
我愿为卒
行走虽慢
可谁曾见我后退一步

在这里插入图片描述

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

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

相关文章

vue实现附件下载 获取到接口的图片,设置宽度100%样式

一、vue实现附件下载&#xff0c;使用a链接 <a class"btn flex_center" target"_blank" :href"localImgSrc(goodsDetail.attachment)" :download"localImgSrc(goodsDetail.attachment)" >立即下载 </a>二、 获取到接口…

js检验一个字符串是否是正确时间格式的工具方法

js检验一个字符串是否是正确时间格式的工具方法 (()> {/*** 检验字符串是否为时间格式* param {String} date 需要检验的时间格式* returns true 为时间格式&#xff0c;false 为非时间格式*/const isTimaFormat (date) > {if(!date) return false;try{const tempTime …

js之图片上传

话不多说&#xff0c;直接上干货&#xff0c;注释在代码里面 下面是效果图和代码 <!DOCTYPE html> <html lang"zh"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-sca…

Llama模型家族训练奖励模型Reward Model技术及代码实战(三) 使用 TRL 训练奖励模型

LlaMA 3 系列博客 基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;一&#xff09; 基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;二&#xff09; 基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;三&#xff09; 基于 LlaMA…

监控员工电脑的软件有哪些,不得不说这几款电脑监控软件太好用了

监控员工电脑的软件在市场上种类繁多&#xff0c;以下是几款备受好评的电脑监控软件&#xff0c;它们各自具有独特的功能和优势&#xff0c;选择前必须了解一下才能做成正确决定。 1.安企神&#xff1a; 这款软件支持7天试用测试&#xff0c;获取测试版请移驾 ↓↓↓ 安企神…

28-ESP32-S3 lwIP 轻量级 TCP/IP 协议栈

ESP32-S3 lwIP 介绍 ESP32-S3 是一款集成了Wi-Fi 和蓝牙功能的微控制器。它的设计初衷是为了方便嵌入式系统的开发。不过你可能会好奇&#xff0c;ESP32-S3 怎么实现与外部网络的通信呢&#xff1f;这里就要提到一个开源的 TCP/IP 协议栈&#xff0c;它叫做lwIP&#xff08;轻…

前端AI 工具对开发效率提升的探索

1、AI会100% 取代前端工程师吗&#xff1f; AI技术在未来可能会改变程序员的工作方式&#xff0c;将显著减少开发者的数量&#xff0c;但不太可能完全替代程序员。 AI 对技术的影响&#xff1a;可以大幅度提效。 提问AI模型&#xff1a; AI能取代开发者吗&#xff1f; AI 目前…

第十二节:带你梳理Vue2: computed计算属性

1 计算属性的基本了解 1.1 认识Mustache语法的不足 在模板中写表达式非常便利&#xff0c;但设计的初衷是为了简单的运算&#xff0c;如果是复杂的逻辑运算&#xff0c;会难以维护&#xff0c;不容易理解其中的意思. 示例: <div id"app"><!-- 正常绑定数…

冬奥会|基于SprinBoot+vue的冬奥会科普平台(源码+数据库+文档)

目录 基于SprinBootvue的冬奥会科普平台 一、前言 二、系统设计 三、系统功能设计 1登录注册 2系统功能模块 3管理员功能模块 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a; 博主介绍&#xff1a;✌️大厂码农|…

①单细胞学习-数据读取、降维和分群

目录 ①数据读取 ②计算线粒体基因比例 ③分开进行质控 ④两组单细胞数据合并 ⑤细胞周期评分 ⑥降维标准流程 降维 UMAP可视化 选择分群 ⑦marker基因 分析marker基因 marker基因可视化 ⑧细胞定群命名 单细胞的数据格式学习&#xff1a;单细胞 10X 和seurat对象…

从0到100,渠道码如何成为SaaS企业增长的加速器

在当今数字化时代&#xff0c;企业的增长策略已不再是单一和线性的。渠道码的出现&#xff0c;为SaaS&#xff08;软件即服务&#xff09;企业提供了一种全新的、多维度的增长途径&#xff0c;真正实现了从0到100的快速增长。 一、渠道码的高可定制性和灵活性&#xff0c;为Sa…

人脸识别——Webface-OCC遮挡人脸识别算法解析

1. 概述 自2019年被誉为人脸识别技术的元年&#xff0c;各地纷纷引入这项技术。然而&#xff0c;自2020年起&#xff0c;为了抵御冠状病毒&#xff08;COVID-19&#xff09;的全球传播&#xff0c;人们普遍开始佩戴口罩。众所周知&#xff0c;现有人脸识别模型在面对遮挡物&am…

生成式AI模型大PK——GPT-4、Claude 2.1和Claude 3.0 Opus

RAG(检索增强生成)系统的新评估似乎每天都在发布&#xff0c;其中许多都集中在有关框架的检索阶段。然而&#xff0c;生成方面——模型如何合成和表达这些检索到的信息&#xff0c;在实践中可能具有同等甚至更大的意义。许多实际应用中的案例证明&#xff0c;系统不仅仅要求从上…

Docker安装Redis的详细教程

以下是一个使用Docker安装Redis的详细教程 1. 拉取Redis镜像 运行以下命令来从Docker Hub上拉取最新的Redis镜像&#xff1a; docker pull redis:latest如果您需要特定版本的Redis&#xff0c;可以指定版本号&#xff1a; docker pull redis:6.2.72. 运行Redis容器 以下命…

基于AT89C52单片机的智能窗帘系统

点击链接获取Keil源码与Project Backups仿真图&#xff1a; https://download.csdn.net/download/qq_64505944/89276984?spm1001.2014.3001.5503 C 源码仿真图毕业设计实物制作步骤07 智能窗户控制系统学院&#xff08;部&#xff09;&#xff1a; 专 业&#xff1a; 班 级&…

前端响应式期末作品

网页设计成品_前端响应式 主题&#xff1a;租房网站&#xff0c;共6个html页面&#xff0c;包含首页&#xff0c;登录注册&#xff0c;租房新闻&#xff0c;租房精选&#xff0c;租房详情&#xff0c;数据可视化页面&#xff08;可以修改内容&#xff09; 采用技术&#xff1a;…

香橙派KunpengPro测评之使用C语言操控40pin引脚

香橙派KunpengPro测评之使用C语言操控40pin引脚 香橙派KunpengPro介绍香橙派实物图香橙派登录界面香橙派KunpengPro的登录界面香橙派KunpengPro的原始桌面香橙派KunpengPro内安装了VScode等软件香橙派KunpengPro的终端 香橙派硬件参数核心性能图形与显示接口丰富性扩展与兼容性…

刷代码随想录有感(81):贪心算法——分发饼干

题干&#xff1a; class Solution { public:int findContentChildren(vector<int>& g, vector<int>& s) {sort(g.begin(), g.end());sort(s.begin(), s.end());int index s.size() - 1;int res 0;for(int i g.size() - 1; i > 0; i--){if(index >…

设计模型-系统架构师(三)

1、按照《中华人民共和国著作权法》的权利保护期&#xff0c;署名权和修改权 是永久保护的。 发表权、使用权和获取报酬权 保护期限 作者终生和死后的50年。 2、&#xff08;重要&#xff09;面向对象的分析模型主要由 顶层架构图、用例与用例图和&#xff08;&#xff09;构成…

远程户外监控组网方案,工业4G路由器ZR2000

户外监控无人值守4G工业路由器组网应用涉及工业自动化、数据传输和远程监控的重要领域。在户外没有光纤的情况下&#xff0c;想要让监控或传感器等设备联网&#xff0c;仅需一台4G工业路由器即可解决。以下是关于远程监控户外组网的详细分析与应用&#xff1a; 物联网应用场景 …