程序员经验分享-hwhale

vue2 ElementUI 表单标签、表格表头添加问号图标提示

2023-11-01

1. 问题背景

使用element-ui有时候需要对表格的表头、表单的标签进行自定义，添加问号的悬浮提示。

要达到的效果，如图所示：

在这里插入图片描述
在这里插入图片描述

2. element-ui悬浮提示定义

https://element.eleme.cn/#/zh-CN/component/tooltip

<!--  placement=top 顶部提示 -->
<!--  effect=dark 风格 -->
<el-tooltip content="需要提示的内容" placement="top" effect="dark">
	<!--  提示的内容在  Dark 按钮上面显示  如下图：-->
  <el-button>Dark</el-button>
</el-tooltip>

在这里插入图片描述

3. 基础

  1. 定义问号图标，图标上方显示tooltip提示内容

代码：

<!-- 把这段html摆放到正确的位置，就完成了tooltip提示 -->
<span>
  <el-tooltip placement="top">
    <div slot="content">
      Tips: 提示的内容
    </div>
    <!-- elementui图标库：显示黑色的问号图标   -->
    <i class="el-icon-question" />
  </el-tooltip>
</span>

实现效果：
在这里插入图片描述

  1. 为什么不写content属性和里面的提示内容也能显示？

官网明确定义了↓↓↓

在这里插入图片描述

通过slot插槽完成content内容的定义，如上面代码 div 里面的内容：一定要注意插槽的使用方式，未定义的插槽不能使用哦！

 <div slot="content">
   Tips: 提示的内容
 </div>

4. 延申

  1. 自定义表单标签的label，显示问号提示信息

代码：

<el-form-item label="itemLabel名字" label-width="155px">
  <!--  slot="label"  ==> 自定义label的插槽  -->
  <template slot-scope="{}" slot="label">
    <span>itemLabel名字</span>
    <el-tooltip class="item" effect="dark" placement="top">
      <!--  问号的图标   -->
      <i class="el-icon-question" style="font-size: 14px; vertical-align: middle;"></i>
      <!--  提示的内容 -->
      <div slot="content">
          内容提示
      </div>
    </el-tooltip>
  </template>
  <!-- el-form-item表单内容   -->
  <template>
    <el-select v-model="data" size="small">
      <el-option label="A" value="A"></el-option>
      <el-option label="B" value="B"></el-option>
    </el-select>
  </template>
</el-form-item>

实现效果：

在这里插入图片描述

使用的插槽：

在这里插入图片描述

https://element.eleme.cn/#/zh-CN/component/form

  1. 自定义表格表头提示信息，显示问号提示信息

代码：

<el-table-column prop="字段名" align="center" sortable min-width="180">
  <!--  自定义表头的插槽 solt=header -->
  <template slot-scope="{}" slot="header">
     <!-- 等同于 <===> label="表头名" -->
    <span>表头名</span>
    <el-tooltip class="item" effect="dark" placement="top">
      <!--  显示的问号  -->
      <i class="el-icon-question" style="font-size: 14px; vertical-align: middle;"></i>
      <!--  提示插槽      -->
      <div slot="content">
        <p>Tips：提示的内容</p>
      </div>
    </el-tooltip>
  </template>
  <!-- 表格内容   -->
  <template slot-scope="scope">
    {{scope.row.name }}
  </template>
</el-table-column>

实现效果：
在这里插入图片描述

使用的插槽：
在这里插入图片描述

https://element.eleme.cn/#/zh-CN/component/table

注意！！！

以tooltip提示代码为基础，使用各标签支持的 slot（插槽） 哪里需要哪里插。

5. 参考

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

Vue

elementui

前端

solt插槽

tooltip提示

vue2 ElementUI 表单标签、表格表头添加问号图标提示 的相关文章

  • 目录操作命令

    文章目录 目录操作命令 ls命令 命令格式 常用用法 cd命令 命令格式 常用用法 pwd 命令 命令格式 常用用法 mkdir命令 命令格式 常用用法 rmdir命令 命令格式 常用用法 tree命令 命令格式 常用用法 目录操作命令 l

  • 详细讲解插入排序(JavaScript实现)

    function insertSort alist let preindex current for let i 1 i

  • webpack打包原理解析

    文章目录 webpack打包是如何运行的 webpack对CommonJS的模块化处理 webpack对es6 Module模块化的处理 webpack文件的按需加载 按需加载输出代码分析 总结 webpack打包是如何运行的 也可以称为

随机推荐

  • Nacos框架服务主动下线原理及源代码讲解

    原理 Nacos没有想eureka一样 在服务端提供API供调用进行服务下线 Nacos的实现方式是通过在客户端提供方法 我们自己封装API进行调用 然后客户端会进行2个步骤 1 如果是临时服务 客户端会把自己发送续约保活心跳的缓存实例给删

  • window.open对storage有没有影响？

    首先在浏览器开发者模式打印如下信息 设置storage存值 sessionStorage setItem aaa 111 localStorage setItem bbb 222 新开一个浏览器窗口 在开发者模式打印窗口获取上一个窗口存储的

  • JAVA算法（分糖果）

    题目描述 有n个小朋友围坐成一圈 老师给每个小朋友随机发偶数个糖果 然后进行下面的游戏 每个小朋友都把自己的糖果分一半给左手边的孩子 一轮分糖后 拥有奇数颗糖的孩子由老师补给1个糖果 从而变成偶数 反复进行这个游戏 直到所有小朋友的糖果数都

  • 版本记录总结

    对构建中使用的版本进行记录

  • 【vue】this.$router.replace跳转不起作用 Router push or replace not working

    项目场景 商城APP底部导航切换对应页面 问题描述 提示 这里描述项目中遇到的问题 Just sit there clicking the home btn watching log show me home but never getti

  • Git远程库代码回退

    一 首先认识两个回退过程中很重要的命令 1 git log 显示所有提交过的版本信息 不包括已经被删除的 commit 记录和 reset 的操作 空格向下翻页 b 向上翻页 q 退出 git log pretty oneline git

  • 华为od机试 C++ 【计算最少步数】

    题目 小明计划在周末去爬山 他有一份包含山峰高度的地图 其中 0 代表平地 而 1 到 9 表示不同的山峰高度 小明可以向上 下 左或右移动一步 但是 由于他不想爬得太累 他决定只在高度差不超过 k 的地方移动 现在他站在地图的左上角 你能

  • 做好五年不跳槽的准备

    入职半年了 我觉得这里可以长久发展 其一 工作能胜任 我感觉找回自信了 甚至有些傲娇了 说明osg确实比较对口 做擅长的工作 会越做越有信心 其二 老大靠谱 老大十几年经验 并且很有耐心 工作方式也对 比如 先给你代码 在这个基础上改 并且

  • 超长整数相加

    链接 https www nowcoder com questionTerminal 5821836e0ec140c1aa29510fd05f45fc orderByHotValue 1 mutiTagIds 640 643 page 6

  • Python数据挖掘 数据预处理案例（以航空公司数据为例）

    Python数据预处理 一 内容 1 数据清洗 2 数据集成 3 数据可视化 二 实验数据 根据航空公司系统内的客户基本信息 乘机信息以及积分信息等详细数据 依据末次飞行日期 LAST FLIGHT DATE 以2014年3月31日为结束时

  • go build遇见“module *** found, but does not contain package ***”

    在实际项目中编译版本时遇见以下问题 common middleware sentinel go 4 2 module github com alibaba sentinel golang latest found v1 0 2 but do

  • SSH项目所需jar包下载地址

    struts2下载地址 http pan baidu com s 1c0joXbi hibernate下载地址 http pan baidu com s 1c0ues1a spring下载地址 http pan baidu com s 1b

  • JS学习篇（一）—— 数据类型篇

    JS学习篇 一 数据类型篇 JS的有八种数据类型 七种基本类型 undefined null Boolean number string symbol bigint 一种引用类型 object 七种基本类型 1 undefined 定义 通

  • （新）关于修改window.navigator.webdriver代码失效问题

    文章目录 前文回顾 溯源追根 解决方案 新登陆代码 写在最后 前文回顾 前面写过两篇关于sycm自动化爬取的文章 关于抓取代码的文章链接 出师未捷身先死的sycm数据自动化 关于chrome版本迭代后 代码失效问题解决方案的文章链接 关于修

  • mysql8.0一 服务启动

    声明 本文 禁止转载 本文所有观点和概念都系个人总结 难免存在疏漏之处 为不至于诱导初学者误入歧途 望各位以自己实践为准 特此声明 如有错误请告知 启动 流程 windows 7系统 创建data空目录 创建my ini文本文件 内容如下

  • Mac如何通过Xcode安装GCC编译器 How to install gcc on mac with xcode

    什么是GCC GCC GNU Compiler Collection 是由自由软件基金会 FSF Free Software Foundation Inc 研发的开源编译器集合 用一句话说 GCC就是除Windows以外的平台上使用最广的编

  • Java反射copy对象源到目标

    提示 文章写完后 目录可以自动生成 如何生成可参考右边的帮助文档 文章目录 前言 一 使用反射机制 二 使用步骤 1 引入库 2 Copy数据 3 Fields 自定义注解 总结 前言 例如 随着很多流行的框架出现 反射也成了其中必不可少的

  • 【项目实战】Python实现循环神经网络SimpleRNN、LSTM进行淘宝商品评论情感分析(含爬虫程序)

    说明 这是一个机器学习实战项目 附带数据 代码 如需数据 完整代码可以直接到文章最后获取 1 项目背景 随着信息化社会的发展 互联网成为方便 快捷的信息获取渠道之一 在电子商务和社会网站中 大量非结构化的评论文本作为最直观的用户体验数据被保

  • 机器学习之k 均值聚类教程（代码实战，详解核心算法）

    k 均值聚类 1 引入依赖 import numpy as np import matplotlib pyplot as plt 调用sklearn中的方法直接生成数据 from sklearn datasets samples gener

  • vue2 ElementUI 表单标签、表格表头添加问号图标提示

    文章目录 1 问题背景 2 element ui悬浮提示定义 3 基础 4 延申 5 参考 1 问题背景 使用element ui有时候需要对表格的表头 表单的标签进行自定义 添加问号的悬浮提示 要达到的效果 如图所示 2 element

热门标签