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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
解決vue使用vant下拉框van-dropdown-item 綁定title值不變問題
這篇文章主要介紹了解決vue使用vant下拉框van-dropdown-item 綁定title值不變問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了vue使用exif獲取圖片經(jīng)緯度的示例代碼，幫助大家更好的利用vue獲取圖片信息，感興趣的朋友可以了解下2020-12-12
Vue項目數(shù)據(jù)動態(tài)過濾實(shí)踐及實(shí)現(xiàn)思路
這篇文章主要介紹了Vue項目數(shù)據(jù)動態(tài)過濾實(shí)踐,，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-09-09
這篇文章主要為大家詳細(xì)介紹了vue中漸進(jìn)過渡效果的實(shí)現(xiàn)方法,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
深入探究Vue2響應(yīng)式原理的實(shí)現(xiàn)及存在的缺陷
Vue的響應(yīng)式數(shù)據(jù)機(jī)制是其核心特性之一,它能夠自動追蹤數(shù)據(jù)的變化,并實(shí)時更新相關(guān)的視圖,然而,Vue2中的響應(yīng)式數(shù)據(jù)機(jī)制并非完美無缺,本文將探討Vue2響應(yīng)式原理及其存在的缺陷2023-08-08
elementUI?checkBox報錯Cannot read property &ap
這篇文章主要為大家介紹了elementUI?checkBox報錯Cannot read property 'length' of undefined的解決分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
Vue3+Antd實(shí)現(xiàn)彈框顯示內(nèi)容并加入復(fù)制按鈕
這篇文章主要介紹了Vue3+Antd實(shí)現(xiàn)彈框顯示內(nèi)容并加入復(fù)制按鈕,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-12-12
這篇文章主要介紹了Vue解決移動端彈窗滾動穿透問題的方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
插槽slot可以說在一個Vue項目里面處處都有它的身影，比如我們使用一些UI組件庫的時候，我們通常可以使用插槽來自定義我們的內(nèi)容，這篇文章主要介紹了Vue3中slot插槽使用方式,需要的朋友可以參考下2022-09-09
Vue 實(shí)現(xiàn)前端權(quán)限控制的示例代碼
這篇文章主要介紹了Vue 實(shí)現(xiàn)前端權(quán)限控制的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07