快捷導航

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換行實現(xiàn)

使用slot="content"解決，代碼如下：

<el-tooltip class="item" effect="dark" placement="bottom">
	<div slot="content">
		供應(yīng)商不得在“信用中國”網(wǎng)站<br/>
		（www.creditchina.gov.cn）<br/>
		被列入“失信被執(zhí)行人名單”。
	</div>
	<i class="el-icon-question"></i>
</el-tooltip>

最終效果

vue設(shè)置el-form-item是否可編輯

設(shè)置el-input，textarea只讀方法，使顯示的文本內(nèi)容不允許變更。

此時，可通過頁面限制防止用戶修改

方法：添加 readonly="true" 或者 :disabled="true" 均可實現(xiàn)。

代碼示例如下所示：

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

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

基于Vue3+UniApp在單個頁面實現(xiàn)固定TabBar的多種方式
tabBar 是移動端應(yīng)用常見的頁面效果,用于實現(xiàn)多頁面的快速切換,本文給大家介紹了如何基于Vue3+UniApp在單個頁面實現(xiàn)固定TabBar的多種方式,需要的朋友可以參考下
2025-03-03
vue3?defineExpose的使用及應(yīng)用場景分析
Vue3中defineExpose用于向父組件暴露子組件的屬性和方法,尤其在script setup語法中,需顯式聲明以實現(xiàn)組件間交互,可控制暴露內(nèi)容,避免過度暴露,同時注意響應(yīng)式數(shù)據(jù)解包與測試影響,本文給大家介紹vue3?defineExpose的使用,感興趣的朋友一起看看吧
2025-06-06
vue中使用iconfont圖標的過程
這篇文章主要介紹了vue中使用iconfont圖標的過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
vue3之Suspense加載異步數(shù)據(jù)的使用
本文主要介紹了vue3之Suspense加載異步數(shù)據(jù)的使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2023-02-02
vue 獲取url參數(shù)、get參數(shù)返回數(shù)組的操作
這篇文章主要介紹了vue 獲取url參數(shù)、get參數(shù)返回數(shù)組的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
vue頭部導航動態(tài)點擊處理方法
這篇文章主要介紹了vue頭部導航動態(tài)點擊處理方法,文中通過一段示例代碼給大家介紹了vue實現(xiàn)動態(tài)頭部的方法，需要的朋友可以參考下
2018-11-11
vue3實現(xiàn)鼠標右鍵顯示菜單,點擊其他地方消失問題
這篇文章主要介紹了vue3實現(xiàn)鼠標右鍵顯示菜單,點擊其他地方消失問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-04-04
Vue3中無法為el-tree-select設(shè)置反選問題解析
這篇文章主要介紹了Vue3中無法為el-tree-select設(shè)置反選問題分析,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-04-04
在Vue項目中優(yōu)化字體文件的加載和緩存的常用方法
在現(xiàn)代 Web 開發(fā)中,字體文件通常是頁面加載時間的重要因素之一,特別是在字體文件較大或網(wǎng)絡(luò)環(huán)境不佳的情況下,用戶體驗可能會受到影響,本文將詳細探討如何在 Vue.js 項目中優(yōu)化字體文件的加載和緩存,以提高頁面性能,需要的朋友可以參考下
2024-09-09
vue3中使用reactive定義的變量響應(yīng)式丟失問題解決方案
這篇文章主要介紹了vue3中使用reactive定義的變量響應(yīng)式丟失問題的具體例子和解決方案,文章通過代碼示例給大家講解的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下
2024-06-06