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