Vue3:表格单元格内容由:图标+具体内容 构成

一、背景

在Vue3项目中,想让单元格的内容是由 :图标+具体内容组成的,类似以下效果:
在这里插入图片描述

二、图标

  • Element-Plus
    可以在Element-Plus里面找是否有符合需求的图标
  • iconfont
    如果Element-Plus里面没有符合需求的,也可以在这里面找图标,种类更多,本博客中的图标就是在该平台的图标库找的

三、实现

1、具体需求

本文中,想将:皇冠图标+数字来显示会员的级别,于是在iconfont搜索皇冠:

  • 搜索结果如下:

在这里插入图片描述

  • 选择需要的图标以及下载方式即可:
    (这里下载为图片)
    在这里插入图片描述
2、单元格内容:图标+具体内容
  • 核心代码

将图标和具体内容放置在一个容器里面,其中图标是以图片的形式引入的:
在这里插入图片描述

  • 完整代码
<template><!-- 表格 --><el-table:data="tableData":header-cell-style="{ 'text-align': 'center' }":cell-style="{ 'text-align': 'center' }"><el-table-column prop="index1" label="字段1" /><el-table-column prop="index2" label="字段2" /><el-table-column prop="index3" label="字段3" /><el-table-column prop="index4" label="字段4"><!-- 字段触发提示 --><template v-slot:header><el-tooltip placement="top-start" effect="light"><!-- 触发提示内容 --><template #content><p class="content">提示内容1</p><p class="content">提示内容2</p></template><span>字段4<el-icon color="#9a9eb1"><QuestionFilled /></el-icon></span></el-tooltip></template><!-- 单元格内容:图标+具体内容 --><template #default="scope"><div style="display: flex; align-items: center"><imgalt="皇冠 logo"src="../assets/皇冠.png"style="width: 8%;height: auto;overflow: hidden;margin-left: 130px;"/><span style="margin-left: 1px">{{ scope.row.index4 }}</span></div></template></el-table-column></el-table>
</template>
  • 效果如下:
    在这里插入图片描述

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

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

相关文章

MySQL 数据库操作指南:LIMIT,OFFSET 和 JOIN 的使用

限制结果 您可以通过使用"LIMIT"语句来限制查询返回的记录数量。以下是一个示例&#xff0c;获取您自己的Python服务器中"customers"表中的前5条记录&#xff1a; import mysql.connectormydb mysql.connector.connect(host"localhost",user&…

Proteus仿真--基于NM24C08的EEPROM仿真设计

本文介绍基于NM24C08的EEPROM仿真设计&#xff08;完整仿真源文件及代码见文末链接&#xff09; 其中NM24C08是标准的2线总线接口的串行EEPROM&#xff0c;开机画面在LCD12864上显示 仿真图如下 仿真运行视频 Proteus仿真--基于NM24C08的EEPROM仿真设计 附完整Proteus仿真资料…

零一万物模型折腾笔记:官方 Yi-34B 模型基础使用

当争议和流量都消失后&#xff0c;或许现在是个合适的时间点&#xff0c;来抛开情绪、客观的聊聊这个 34B 模型本身&#xff0c;尤其是实践应用相关的一些细节。来近距离看看这个模型在各种实际使用场景中的真实表现和对硬件的性能要求。 或许&#xff0c;这会对也想在本地私有…

Docker本地部署Drupal内容管理框架并实现公网远程访问

文章目录 前言1. Docker安装Drupal2. 本地局域网访问3 . Linux 安装cpolar4. 配置Drupal公网访问地址5. 公网远程访问Drupal6. 固定Drupal 公网地址7. 结语 前言 Dupal是一个强大的CMS&#xff0c;适用于各种不同的网站项目&#xff0c;从小型个人博客到大型企业级门户网站。它…

bat脚本之findstr

findstr 是 Windows 操作系统中用于文本搜索的命令&#xff0c;它可以在文件中查找指定的字符串或正则表达式&#xff0c;并输出匹配的行或行号。findstr 命令可以在命令提示符下直接使用&#xff0c;也可以在批处理脚本中嵌套使用。 以下是 findstr 命令的基本语法&#xff1…

使用条件格式突出显示单元格数据-sdk

使用条件格式突出显示单元格数据 2023 年 12 月 6 日 根据数据值将视觉提示应用于特定单元格、行或列&#xff0c;从而更轻松地识别模式和趋势。 网格中的条件格式允许用户根据单元格或范围包含的数据将视觉样式应用于单元格或范围。它通过以数据驱动的方式突出显示关键值、异常…

【基于Python的二手车数据可视化平台的设计与实现】

基于Python的二手车数据可视化平台的设计与实现 前言数据获取与处理网络爬虫数据存储 可视化平台的设计与实现Flask框架数据可视化 创新点结语 前言 随着社会的不断发展&#xff0c;二手车市场也逐渐成为一个备受关注的领域。为了更好地为二手车的买家和卖家提供信息&#xff…

Python 实现全连接攻击-1

实现或讨论如何实现网络攻击&#xff0c;包括全连接攻击&#xff08;一种形式的拒绝服务攻击&#xff09;&#xff0c;是不合适的&#xff0c;也违反了伦理和法律规定。无论是学术研究、安全测试还是其他目的&#xff0c;未经授权对网络或系统进行攻击都是非法和不道德的。 如…

计算和传输背后的时空观

吞吐和速度(率)经常被混淆&#xff0c;当提到 100Gbps 网卡时&#xff0c;“它很快” 的意义可能只是 “它很多” 100Gbps 指 1s 内发送的比特数为 100G&#xff0c;如果在这 1s 内塞入更多比特&#xff0c;以下是两种方式&#xff1a; 显然&#xff0c;上面是更多&#xff…

安全防御–

安全防御 ASPF技术## FTP协议主机之间传输文件是IP网络的一个重要功能&#xff0c;如今人们可以方便地使用网页、邮箱进行文件传输。然而在互联网早期&#xff0c;Web&#xff08;World Wide Web&#xff0c;万维网&#xff09;还未出现&#xff0c;操作系统使用命令行的时代&a…

iOS分段控件UISegmentedControl使用

在故事板中添加UISegmentedControl 具体添加步聚如下: 选择Xcode的View菜单下的Show Library (或者Shift+Common+L) 打开控件库如下 在控件库中输入seg搜索控件,在出现Segmented Control后,将其拖到View Controller Scene中 到这里,添加分段控件UI已完成, 接下来将控件与变量…

shell的变量

Linux 系统中 shell 变量的使用 文章目录 &#xff08;1&#xff09;简介&#xff08;2&#xff09;变量分类&#xff08;3&#xff09;变量赋值&#xff08;4&#xff09;变量命名&#xff08;5&#xff09;变量引用&#xff08;6&#xff09;变量清除&#xff08;7&#xff0…

基于JavaWeb+SSM+Vue马拉松报名系统微信小程序的设计和实现

基于JavaWebSSMVue马拉松报名系统微信小程序的设计和实现 源码获取入口Lun文目录前言主要技术系统设计功能截图订阅经典源码专栏Java项目精品实战案例《500套》 源码获取 源码获取入口 Lun文目录 1系统概述 1 1.1 研究背景 1 1.2研究目的 1 1.3系统设计思想 1 2相关技术 2 2.…

WPF仿网易云搭建笔记(0):项目搭建

文章目录 前言项目地址项目Nuget包搭建项目初始化项目架构App.xaml引入MateralDesign资源包 项目初步分析将标题栏去掉DockPanel初步布局 资源字典举例 结尾 前言 最近在找工作&#xff0c;发现没有任何的WPF可以拿的出手的工作经验&#xff0c;打算仿照网易云搭建一个WPF版本…

Numpy 实现基尼指数算法的决策树

基尼系数实现决策树 基尼指数 Gini ⁡ ( D ) 1 − ∑ k 1 K ( ∣ C k ∣ ∣ D ∣ ) 2 \operatorname{Gini}(D)1-\sum_{k1}^{K}\left(\frac{\left|C_{k}\right|}{|D|}\right)^{2} Gini(D)1−k1∑K​(∣D∣∣Ck​∣​)2 特征 A A A条件下集合 D D D的基尼指数&#xff1a; Gi…

使用ssm框架进行mapper或者service单纯测试时报错问题处理

问题 使用注解方式配置好ssm后&#xff0c;无法在测试中单独测试mapper层和service层。效果如下&#xff1a; 解决 关闭配置类中的EnableWebMvc 再次运行&#xff0c;即可完成测试。

【SpringBoot篇】5种类型参数传递json数据传参的操作

&#x1f38a;专栏【SpringBoot】 &#x1f354;喜欢的诗句&#xff1a;天行健&#xff0c;君子以自强不息。 &#x1f386;音乐分享【如愿】 &#x1f384;欢迎并且感谢大家指出小吉的问题&#x1f970; 文章目录 &#x1f33a;普通参数&#x1f33a;POJO参数&#x1f33a;嵌套…

uniapp切换页面时报错问题

我们来看如下错误&#xff1a; 该错误的意思是不能切换到 tabbar 页面。tabbar页面通常是公共页面或者底部导航栏&#xff0c;如果我们用 navigateTo 或者 redirectTo 都不能实现页面切换。 我们有两种方式&#xff1a; 第一种是用 switchTab 来进行切换&#xff0c;但注意切…

xml文本转Java对象

Java对象转String public static String toData(Object object) throws Exception {JAXBContext jc JAXBContext.newInstance(object.getClass());Marshaller m jc.createMarshaller();StringWriter output new StringWriter(2048);m.marshal(object, output);String data …

STM32之SPI总线

一、SPI总线概述 1、SPI总线介绍 SPI是一种通信协议&#xff0c;它是摩托罗拉公司研发出来的一种通信协议&#xff0c;就有自己的特点&#xff08;串行&#xff0c;并行&#xff0c;单工&#xff0c;半双工&#xff0c;全双工&#xff0c;同步异步&#xff09;。它主要应用于音…