el-form-item表单label添加提示图标的实现

 更新时间:2023年11月29日 09:26:05   作者:老马甲  
本文主要介绍了el-form-item表单label添加提示图标的实现,我们将了解El-Form-Item的基本概念和用法,及添加提示图标以及如何自定义图标样式,感兴趣的可以了解一下

一、官方文档

官方文档

element-ui中el-form在编辑表单时,经常会在label添加一些需要提示的东西,可以用到Form-Item 的slot这个方法。如下所示:

二、实现

实现一个带提示的slot方法,如下图:

<template>
  <el-form size="small" label-width="155px">
    <el-form-item prop="plate">
      <span slot="label" style="display:inline-block;">
        标题
        <el-tooltip effect="dark" content="标题" placement="bottom">
          <i class='el-icon-question' />
        </el-tooltip>
      </span>
      <el-input type="input" ></el-input>
    </el-form-item>
  </el-form>
</template>

到此这篇关于el-form-item表单label添加提示图标的实现的文章就介绍到这了,更多相关el-form-item添加提示图标内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家! 

相关文章

  • vue-cli3跨域配置的简单方法

    vue-cli3跨域配置的简单方法

    这篇文章主要给大家介绍了关于vue-cli3跨域配置的简单方法,文中通过示例代码介绍的非常详细,对大家学习或者使用vue-cli3具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-09-09
  • vue mounted 调用两次的完美解决办法

    vue mounted 调用两次的完美解决办法

    在开发中发现其中一个页面moutned调用了两次,而其他页面正常,表示很懵逼,然后查找原因,终于找到了,其实归根到底是要知道mounted的调用机制问题。这篇文章主要介绍了vue mounted 调用两次的解决办法,需要的朋友可以参考下
    2018-10-10
  • 如何使用vue slot创建一个模态框的实例代码

    如何使用vue slot创建一个模态框的实例代码

    这篇文章主要介绍了如何使用vue slot创建一个模态框,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-05-05
  • ElementUI Upload源码组件上传流程解析

    ElementUI Upload源码组件上传流程解析

    这篇文章主要为大家介绍了ElementUI Upload源码组件上传流程解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • vue3+Ts使用pinia方式(vue-lic搭建项目)

    vue3+Ts使用pinia方式(vue-lic搭建项目)

    文章介绍了如何在Vue 3项目中使用Pinia进行状态管理,主要内容包括安装Pinia、初始化、在main.ts中注册和使用,以及在.vue的setup中使用state,文章还提到getters和actions的使用可以参考官方文档,总结部分表达了作者希望得到大家支持的意愿
    2025-01-01
  • 浅谈VUE-CLI脚手架热更新太慢的原因和解决方法

    浅谈VUE-CLI脚手架热更新太慢的原因和解决方法

    今天小编就为大家分享一篇浅谈VUE-CLI脚手架热更新太慢的原因和解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 基于Vue3和Element Plus实现可扩展的表格组件

    基于Vue3和Element Plus实现可扩展的表格组件

    在开发过程中,我们经常需要创建具有复杂功能的表格组件,本文将介绍如何使用 Vue 3 和 Element Plus 库来构建一个可扩展的表格组件,文中有详细的代码示例供大家参考,需要的朋友可以参考下
    2024-07-07
  • vue列表自动滚动实例

    vue列表自动滚动实例

    这篇文章主要介绍了vue列表自动滚动实例代码,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue 运行高德地图官方样例,设置class无效的解决

    Vue 运行高德地图官方样例,设置class无效的解决

    这篇文章主要介绍了Vue 运行高德地图官方样例,设置class无效的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • 正确更改Ant Design of Vue样式的问题

    正确更改Ant Design of Vue样式的问题

    这篇文章主要介绍了正确更改Ant Design of Vue样式的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09

最新评论