脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue el-form-item添加icon和tooltip

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

总结

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

您可能感兴趣的文章:

相关文章

最新评论