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

一、封装全局组件

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

<!-- // 写一个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信息']
				}
			})
		]
	);
},

三:效果如下 🍹

在这里插入图片描述


四、寄语

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

在这里插入图片描述

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

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

相关文章

深度学习 --- stanford cs231 编程作业(如何在chrome中安装colab)

stanford cs231 编程作业(如何开始你的colab编程&#xff09; 斯坦福231n的所有作业都要求在colab里面做&#xff0c;colab可以为你提供免费的云计算。实际上在他的官网中也有关于如何安装colab的详细说明视频。 https://youtu.be/DsGd2e9JNH4https://youtu.be/DsGd2e9JNH4 我…

Snowy2.x 版本使用 Yaml

代码&#xff1a;https://gitee.com/xiaonuobase/snowy/tree/Snowy2.5.2/ 直接将 properties 转换成 yaml 那么你大概率会遇到下面报错&#xff1a; 然后你上网搜索&#xff0c;发现是 snakeyaml 版本的问题&#xff0c;1.x 版本的 snakeyaml 有安全隐患&#xff0c;要升级到…

前端 CSS 经典:弧形边框选项卡

1. 效果图 2. 开始 准备一个元素&#xff0c;将元素左上角&#xff0c;右上角设为圆角。 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, i…

c++ queue容器

在C标准库中&#xff0c;std::queue 是一个容器适配器&#xff0c;它提供了队列&#xff08;FIFO - First In First Out&#xff09;的数据结构。队列是一种特殊的线性数据结构&#xff0c;只允许在表的前端&#xff08;front&#xff09;进行删除操作&#xff0c;而在表的后端…

Modbus-RTU/TCP规约 | 报文解析 | 组织报文与解析报文(C++)

文章目录 一、MODBUS规约1.MODBUS-RTU规约2.MODBUS-TCP规约 二、报文解析1.MODBUS-RTU报文帧解析2.MODBUS-TCP报文帧解析 三、C代码实现组织报文与解析报文 一、MODBUS规约 Modbus规约是一种广泛使用的串行通信协议&#xff08;应用层报文传输协议&#xff09;&#xff0c;用于…

富甲美国---沃尔玛创始人山姆·沃尔顿

富甲美国---沃尔玛创始人山姆沃尔顿_山姆沃尔顿是犹太人吗?-CSDN博客文章浏览阅读786次。​1.不断地检讨回顾我们做得好不好或需要改进的&#xff0c;我们从没有对现况满足过。我们会短暂地大肆庆祝成功&#xff0c;然后认真地检讨下次如何能做得更好---不断改进与创新。2我们…

LSTM实例解析

大家好&#xff0c;这里是七七&#xff0c;今天带给大家的实例解析。以前也用过几次LSTM模型&#xff0c;但由于原理不是很清楚&#xff0c;因此不能清晰地表达出来&#xff0c;这次用LSTM的时候&#xff0c;去自习研究了原理以及代码&#xff0c;来分享给大家此次经历。 一、简…

【漏洞复现】海康威视综合安防管理平台 iSecure Center applyCT fastjson 远程代码执行

0x01 漏洞名称 海康威视综合安防管理平台 iSecure Center applyCT fastjson 远程代码执行 0x02 漏洞影响 0x03 搜索引擎 app"HIKVISION-综合安防管理平台"0x04 漏洞详情 POST /bic/ssoService/v1/applyCT HTTP/1.1 User-Agent: Mozilla/5.0 (Windows NT 10.0; Wi…

【30天精通Prometheus:一站式监控实战指南】第6天:mysqld_exporter从入门到实战:安装、配置详解与生产环境搭建指南,超详细

亲爱的读者们&#x1f44b;   欢迎加入【30天精通Prometheus】专栏&#xff01;&#x1f4da; 在这里&#xff0c;我们将探索Prometheus的强大功能&#xff0c;并将其应用于实际监控中。这个专栏都将为你提供宝贵的实战经验。&#x1f680;   Prometheus是云原生和DevOps的…

【Linux】网络层——IP协议

欢迎来到Cefler的博客&#x1f601; &#x1f54c;博客主页&#xff1a;折纸花满衣 &#x1f3e0;个人专栏&#xff1a;Linux 目录 &#x1f449;&#x1f3fb;IP协议基本概念&#x1f449;&#x1f3fb;IP的协议头格式&#x1f449;&#x1f3fb;IP协议的网段划分五类IP地址子…

大数据技术原理(一):还记得你大数据入门的第一份测试题吗

Tips&#xff1a;"分享是快乐的源泉&#x1f4a7;&#xff0c;在我的博客里&#xff0c;不仅有知识的海洋&#x1f30a;&#xff0c;还有满满的正能量加持&#x1f4aa;&#xff0c;快来和我一起分享这份快乐吧&#x1f60a;&#xff01; 喜欢我的博客的话&#xff0c;记得…

真实案例分享,终端pc直接telnet不到出口路由器。

1、背景信息 我终端pc的网卡地址获取的网关是在核心交换机上&#xff0c;在核心交换机上telnet出口路由器可以实现。 所有终端网段都不能telnet出口路由器&#xff0c;客户希望能用最小的影响方式进行解决。 2、现有配置信息 终端的无线和有线分别在两个网段中&#xff0c;…

c++设计模式-->访问者模式

#include <iostream> #include <string> #include <memory> using namespace std;class AbstractMember; // 前向声明// 行为基类 class AbstractAction { public:virtual void maleDoing(AbstractMember* member) 0;virtual void femaleDoing(AbstractMemb…

【Linux】套接字的理解 基于TCP协议的套接字编程(单/多进程 / 线程池|英汉互译 / C++)

文章目录 1. 前言1.1 网络方面的预备知识&#x1f447;1.2 了解TCP协议 2. 关于套接字编程2.1 什么是套接字 Socket2.2 socket 的接口函数2.3 Udp套接字编程的步骤2.4 sockaddr 结构 3. 代码实现3.1 makefile3.2 log.hpp3.3 tcp_server.hpp① 框架② service() 通信服务③ init…

Linux安装刻录软件

在工作场景经常使用光盘和刻录机&#xff0c;在windows系统下有nero软件&#xff0c;在linux下有k3b,但是原始的k3b只能一次刻录&#xff0c;十分浪费光盘&#xff0c;这里我们使用经优麒麟优化过的刻录软件&#xff0c;实现多次追加刻录。 进入优麒麟软件仓库&#xff0c;需要…

CentOS7.9安装mysql-8.0.36踩坑小记

前言&#xff1a; 最近想在一台测试服务器上&#xff0c;安装下最新的MySQL 8.0 版本数据库&#xff0c;想着挺简单的一件事&#xff0c;之前也手搓过 8.0 安装&#xff0c;这不手到擒来&#xff0c;没想到马失前蹄&#xff0c;遇到了一个小坑&#xff0c;耗费了不少时间&…

docker 安装RabbitMQ-web版本

直接拉去web版本 docker pull rabbitmq:management启动命令 设置用户名 admin 密码123456 docker run -dit --name rabbitmq -p 5672:5672 -p 15672:15672 -e RABBITMQ_DEFAULT_USERadmin -e RABBITMQ_DEFAULT_PASS123456 rabbitmq:management访问地址 http://127.0.0.1:…

AIGC实践|探索用AI实现小游戏开发全流程

前言&#xff1a; 在上一篇中&#xff0c;我们已经深入探讨了AI工具在动态绘本创作中的应用&#xff0c;体验了AI在创意内容生成上的魅力。本篇文章将带领大家进入一个全新的探索领域——游戏开发。 本文将详细介绍如何利用AI工具探索实现游戏开发的全过程&#xff0c;从概念…

第三期【数据库主题文档上传激励活动】已开启!快来上传文档赢奖励

2023年9月、11月&#xff0c;墨天轮社区相继举办了第一期与第二期【数据库主题文档上传激励活动】&#xff0c;众多用户积极参与、上传了大量优质的数据库主题干货文档&#xff0c;在记录经验的同时也为其他从业者带来了参考帮助&#xff0c;这正实现了“乐知乐享、共同成长”的…

存储+调优:存储-Cloud

存储调优&#xff1a;存储-Cloud Master Server 配置&#xff1a; IP192.168.1.254 useradd mfs tar zxf mfs-1.6.11.tar.gz.gz cd mfs-1.6.11 ./configure --prefix/usr --sysconfdir/etc --localstatedir/var/lib --with-default-usermfs --with-default-groupmfs --disabl…