草庐IT

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

小白说(๑• . •๑) 2023-04-21 原文

文章目录

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. 参考

问号ElementUIspanclasstoken前端solt插槽tooltip提示

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

  1. ruby-on-rails - Rails 编辑表单不显示嵌套项 - 2

    我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib

  2. ruby - 在院子里用@param 标签警告 - 2

    我试图使用yard记录一些Ruby代码，尽管我所做的正是所描述的here或here#@param[Integer]thenumberoftrials(>=0)#@param[Float]successprobabilityineachtrialdefinitialize(n,p)#initialize...end虽然我仍然得到这个奇怪的错误@paramtaghasunknownparametername:the@paramtaghasunknownparametername:success然后生成的html看起来很奇怪。我称yard为:$yarddoc-mmarkdown我做错了什么？

  3. ruby - 如何在 Rails 4 中使用表单对象之前的验证回调？ - 2

    我有一个服务模型/表及其注册表。在表单中，我几乎拥有服务的所有字段，但我想在验证服务对象之前自动设置其中一些值。示例:--服务Controller#创建Action:defcreate@service=Service.new@service_form=ServiceFormObject.new(@service)@service_form.validate(params[:service_form_object])and@service_form.saverespond_with(@service_form,location:admin_services_path)end在验证@ser

  4. css - 用 watir 检查标签类？ - 2

    我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes

  5. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  6. ruby - 是否可以将 IRB 提示配置为动态更改？ - 2

    我想在IRB中浏览文件系统并让提示更改以反射(reflect)当前工作目录，但我不知道如何在每个命令后进行提示更新。最终，我想在日常工作中更多地使用IRB，让bash溜走。我在我的.irbrc中试过这个:require'fileutils'includeFileUtilsIRB.conf[:PROMPT][:CUSTOM]={:PROMPT_N=>"\e[1m:\e[m",:PROMPT_I=>"\e[1m#{pwd}>\e[m",:PROMPT_S=>"FOO",:PROMPT_C=>"\e[1m#{pwd}>\e[m",:RETURN=>""}IRB.conf[:PROMPT_MO

  7. ruby - 如何用 Nokogiri 解析连续的标签？ - 2

    我有这样的HTML代码:Label1Value1Label2Value2...我的代码不起作用。doc.css("first").eachdo|item|label=item.css("dt")value=item.css("dd")end显示所有首先标记，然后标记标签，我需要“标签:值” 最佳答案 首先，您的HTML应该有和中的元素:Label1Value1Label2Value2...但这不会改变您解析它的方式。你想找到s并遍历它们，然后在每个你可以使用next_element得到;像这样:doc=Nokogiri::HTML(

  8. ruby-on-rails - 在 Label 标签中嵌套 Ruby on Rails HAML 复选框 - 2

    我有以下不起作用的代码:=form_for(resource,:as=>resource_name,:url=>session_path(resource_name),:html=>{:class=>"well"})do|f|=f.label:email=f.email_field:email=f.label:password=f.password_field:password-ifdevise_mapping.rememberable?%p=f.label:remember_me,:class=>"checkbox"=f.check_box:remember_me,:class=>"

  9. ruby-on-rails - 从 ActiveAdmin has_many 表单助手中删除 "Add new"按钮 - 2

    我在事件管理员编辑页面中有嵌套资源，但我只想允许管理员编辑现有资源的内容，而不是添加新的嵌套资源。我的代码看起来像这样:formdo|f|f.inputsdof.input:authorf.input:contentf.has_many:commentsdo|comment_form|comment_form.input:contentcomment_form.input:_destroy,as::boolean,required:false,label:'Remove'endendf.actionsend但它在输入下添加了“添加新评论”按钮。我怎样才能禁用它，并只为主窗体保留f.ac

  10. css - Rails 4.1 和 Bootstrap 3 字形图标不工作 - 2

    我正在尝试消除使用Bootstrap3的Rails4元素中的glyphicon错误。我没有使用任何Bootstrapgem将其添加到Assets管道中。我手动将bootstrap.css和bootstrap.js添加到各自的app/assets目录下，分别添加到application.css和application.js什么的我现在在网络浏览器的控制台中看到以下内容:GEThttp://localhost:3000/fonts/glyphicons-halflings-regular.woff404(NotFound)localhost/:1GEThttp://localhost:30

随机推荐