vue el-form-item如何添加icon和tooltip

更新时间：2023年10月17日 16:55:02 作者：布熬夜了

这篇文章主要介绍了vue el-form-item如何添加icon和tooltip问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

el-form-item添加icon和tooltip

1.el-form-item添加icon与tooltip

使用slot="label"解决，代码如下：

<el-form-item prop="examine6Remark">
	<template slot="label">
		审查项目6描述
	</template>
	<el-input type="textarea" :autosize="{ minRows: 3, maxRows: 6}" placeholder="请输入审查项目6描述" v-model="form.examine6Remark" maxlength="255">
	</el-input>
</el-form-item>

2.tooltip换行实现

使用slot="content"解决，代码如下：

<el-tooltip class="item" effect="dark" placement="bottom">
	<div slot="content">
		供应商不得在“信用中国”网站<br/>
		（www.creditchina.gov.cn）<br/>
		被列入“失信被执行人名单”。
	</div>
	<i class="el-icon-question"></i>
</el-tooltip>

最终效果

vue设置el-form-item是否可编辑

设置el-input，textarea只读方法，使显示的文本内容不允许变更。

此时，可通过页面限制防止用户修改

方法：添加 readonly="true" 或者 :disabled="true" 均可实现。

代码示例如下所示：

<el-form-item label="用户：" :label-width="formLabelWidth">
    <el-input type="textarea" readonly="true" v-model="formData.benchmarkDetail" clearable placeholder="请输入"></el-input>
</el-form-item>
<el-form-item label="昵称：" :label-width="formLabelWidth">
    <el-input type="textarea" :disabled="true" v-model="formData.targetDetail" clearable placeholder="请输入"></el-input>
</el-form-item>

从显示样式上简单来看：

1、使用属性 readonly="true" 方式，输入框或文本域无灰色底

2、使用属性 :disabled="true" 方式，输入框或文本域有灰色底

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

基于Vue3+UniApp在单个页面实现固定TabBar的多种方式
tabBar 是移动端应用常见的页面效果,用于实现多页面的快速切换,本文给大家介绍了如何基于Vue3+UniApp在单个页面实现固定TabBar的多种方式,需要的朋友可以参考下
2025-03-03
vue3 defineExpose的使用及应用场景分析
Vue3中defineExpose用于向父组件暴露子组件的属性和方法,尤其在script setup语法中,需显式声明以实现组件间交互,可控制暴露内容,避免过度暴露,同时注意响应式数据解包与测试影响,本文给大家介绍vue3 defineExpose的使用,感兴趣的朋友一起看看吧
2025-06-06
vue中使用iconfont图标的过程
这篇文章主要介绍了vue中使用iconfont图标的过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
vue3之Suspense加载异步数据的使用
本文主要介绍了vue3之Suspense加载异步数据的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-02-02
vue 获取url参数、get参数返回数组的操作
这篇文章主要介绍了vue 获取url参数、get参数返回数组的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
vue头部导航动态点击处理方法
这篇文章主要介绍了vue头部导航动态点击处理方法,文中通过一段示例代码给大家介绍了vue实现动态头部的方法，需要的朋友可以参考下
2018-11-11
vue3实现鼠标右键显示菜单,点击其他地方消失问题
这篇文章主要介绍了vue3实现鼠标右键显示菜单,点击其他地方消失问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-04-04
Vue3中无法为el-tree-select设置反选问题解析
这篇文章主要介绍了Vue3中无法为el-tree-select设置反选问题分析,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-04-04
在Vue项目中优化字体文件的加载和缓存的常用方法
在现代 Web 开发中,字体文件通常是页面加载时间的重要因素之一,特别是在字体文件较大或网络环境不佳的情况下,用户体验可能会受到影响,本文将详细探讨如何在 Vue.js 项目中优化字体文件的加载和缓存,以提高页面性能,需要的朋友可以参考下
2024-09-09
vue3中使用reactive定义的变量响应式丢失问题解决方案
这篇文章主要介绍了vue3中使用reactive定义的变量响应式丢失问题的具体例子和解决方案,文章通过代码示例给大家讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
2024-06-06