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

devtools/2024/12/5 13:10:03/

一、封装全局组件

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

javascript"><!-- // 写一个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 中引入全局组件

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

二、具体页面如何应用

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

javascript">// 注意: ⚠️ 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.ppmy.cn/devtools/43912.html

相关文章

常见Windows命令汇总

1.打开命令提示符或PowerShell&#xff1a; cmd&#xff1a;打开命令提示符。 powershell&#xff1a;打开PowerShell。 2.文件和目录操作&#xff1a; cd&#xff1a;更改当前目录。例如&#xff0c;cd C:\Users\Username\Documents 将当前目录更改为 "Documents" …

全球首例光伏电场网络攻击事件曝光

快速增长的光伏发电正面临日益严重的网络安全威胁。近日&#xff0c;日媒报道了首个针对光伏电场的网络攻击事件。 首例公开确认的光伏电网攻击 日本媒体《产经新闻》近日报道&#xff0c;黑客劫持了一个大型光伏电网中的800台远程监控设备(由工控电子制造商Contec生产的Solar…

研发设计管理、研发设计管理系统有哪些

研发设计管理系统种类繁多&#xff0c;每种系统都有其特定的功能和用途。以下是一些常见的研发设计管理系统及其主要功能&#xff1a; PLM&#xff08;产品生命周期管理&#xff09;研发管理系统&#xff1a; 功能&#xff1a;管理产品从概念、设计、开发、制造、销售到维护的…

Redis连接池

本次实现的Redis连接池是一个单例且多线程安全的连接池。 主要实现的功能为&#xff1a;读取配置&#xff0c;将配置中对应建立redis连接并加入到连接池中&#xff0c;然后从连接池中取出连接使用。每当配置进行修改&#xff0c;重新往池子中加入连接。 通用类 实现一些基础都…

Web Accessibility基础:构建无障碍的前端应用

Web Accessibility&#xff08;网络无障碍&#xff09;是确保所有人都能平等访问和使用网站和应用程序的关键。这包括视觉、听觉、运动和认知能力有限的用户。以下是一些构建无障碍前端应用的基础原则和代码示例&#xff1a; 2500G计算机入门到高级架构师开发资料超级大礼包免…

MyBatis出现:SQLSyntaxErrorException: Unknown column ‘XXX‘ in ‘field list‘

<update id"updateStudent">update tb_students set stu_name${stuName},stu_gender${stuGender},stu_age${stuAge},stu_tel${stuTel}where stu_num ${stuNum}</update> 本质上来说&#xff0c;是Mybatis使用上的错误&#xff0c;不熟悉&#xff0c;理…

mysql语句大全及用法

MySQL是一种广泛使用的开源关系型数据库管理系统&#xff0c;它支持标准的SQL&#xff08;Structured Query Language&#xff09;语言&#xff0c;用于数据库的查询和操作。以下是一些基本的MySQL语句及其用法的概述&#xff1a; 连接MySQL数据库 mysql -h主机地址 -P端口号…

pip更新网络问题:Exception: Traceback (most recent call last): File

报错&#xff1a;rootdebian01:~# pip3.9 install --upgrade pip Collecting pip Downloading pip-24.0-py3-none-any.whl (2.1 MB) |██████████████████▉ | 1.2 MB 5.5 kB/s eta 0:02:39ERROR: Exception: Traceback (most recent call last): File “/usr…