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" 方式，输入框或文本域有灰色底

总结

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

您可能感兴趣的文章:

解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
这篇文章主要介绍了解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
vue使用exif获取图片经纬度的示例代码
这篇文章主要介绍了vue使用exif获取图片经纬度的示例代码，帮助大家更好的利用vue获取图片信息，感兴趣的朋友可以了解下
2020-12-12
Vue项目数据动态过滤实践及实现思路
这篇文章主要介绍了Vue项目数据动态过滤实践,，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-09-09
vue中渐进过渡效果实现
这篇文章主要为大家详细介绍了vue中渐进过渡效果的实现方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-10-10
深入探究Vue2响应式原理的实现及存在的缺陷
Vue的响应式数据机制是其核心特性之一,它能够自动追踪数据的变化,并实时更新相关的视图,然而,Vue2中的响应式数据机制并非完美无缺,本文将探讨Vue2响应式原理及其存在的缺陷
2023-08-08
elementUI checkBox报错Cannot read property &ap
这篇文章主要为大家介绍了elementUI checkBox报错Cannot read property 'length' of undefined的解决分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06
Vue3+Antd实现弹框显示内容并加入复制按钮
这篇文章主要介绍了Vue3+Antd实现弹框显示内容并加入复制按钮,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2023-12-12
Vue解决移动端弹窗滚动穿透问题
这篇文章主要介绍了Vue解决移动端弹窗滚动穿透问题的方法，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
2020-12-12
Vue中slot插槽作用与原理详解
插槽slot可以说在一个Vue项目里面处处都有它的身影，比如我们使用一些UI组件库的时候，我们通常可以使用插槽来自定义我们的内容，这篇文章主要介绍了Vue3中slot插槽使用方式,需要的朋友可以参考下
2022-09-09
Vue 实现前端权限控制的示例代码
这篇文章主要介绍了Vue 实现前端权限控制的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-07-07