vue el-form-item如何添加icon和tooltip
更新時(shí)間：2023年10月17日 16:55:02 作者：布熬夜了
這篇文章主要介紹了vue el-form-item如何添加icon和tooltip問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
el-form-item添加icon和tooltip
1.el-form-item添加icon與tooltip
使用slot="label"解決，代碼如下：
<el-form-item prop="examine6Remark">
<template slot="label">
審查項(xiàng)目6描述
</template>
<el-input type="textarea" :autosize="{ minRows: 3, maxRows: 6}" placeholder="請(qǐng)輸入審查項(xiàng)目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)商不得在“信用中國(guó)”網(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)容不允許變更。
此時(shí)，可通過(guò)頁(yè)面限制防止用戶修改
方法：添加 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="請(qǐng)輸入"></el-input>
</el-form-item>
<el-form-item label="昵稱：" :label-width="formLabelWidth">
<el-input type="textarea" :disabled="true" v-model="formData.targetDetail" clearable placeholder="請(qǐng)輸入"></el-input>
</el-form-item>從顯示樣式上簡(jiǎn)單來(lái)看：
1、使用屬性 readonly="true" 方式，輸入框或文本域無(wú)灰色底
2、使用屬性 :disabled="true" 方式，輸入框或文本域有灰色底
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
解決vue使用vant下拉框van-dropdown-item 綁定title值不變問(wèn)題
這篇文章主要介紹了解決vue使用vant下拉框van-dropdown-item 綁定title值不變問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
這篇文章主要介紹了vue使用exif獲取圖片經(jīng)緯度的示例代碼，幫助大家更好的利用vue獲取圖片信息，感興趣的朋友可以了解下2020-12-12
Vue項(xiàng)目數(shù)據(jù)動(dòng)態(tài)過(guò)濾實(shí)踐及實(shí)現(xiàn)思路
這篇文章主要介紹了Vue項(xiàng)目數(shù)據(jù)動(dòng)態(tài)過(guò)濾實(shí)踐,，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-09-09
vue中漸進(jìn)過(guò)渡效果實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了vue中漸進(jìn)過(guò)渡效果的實(shí)現(xiàn)方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
深入探究Vue2響應(yīng)式原理的實(shí)現(xiàn)及存在的缺陷
Vue的響應(yīng)式數(shù)據(jù)機(jī)制是其核心特性之一,它能夠自動(dòng)追蹤數(shù)據(jù)的變化,并實(shí)時(shí)更新相關(guān)的視圖,然而,Vue2中的響應(yīng)式數(shù)據(jù)機(jī)制并非完美無(wú)缺,本文將探討Vue2響應(yīng)式原理及其存在的缺陷2023-08-08
elementUI?checkBox報(bào)錯(cuò)Cannot read property &ap
這篇文章主要為大家介紹了elementUI?checkBox報(bào)錯(cuò)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ù)制按鈕,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12
Vue解決移動(dòng)端彈窗滾動(dòng)穿透問(wèn)題
這篇文章主要介紹了Vue解決移動(dòng)端彈窗滾動(dòng)穿透問(wèn)題的方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
插槽slot可以說(shuō)在一個(gè)Vue項(xiàng)目里面處處都有它的身影，比如我們使用一些UI組件庫(kù)的時(shí)候，我們通?？梢允褂貌宀蹃?lái)自定義我們的內(nèi)容，這篇文章主要介紹了Vue3中slot插槽使用方式,需要的朋友可以參考下2022-09-09
Vue 實(shí)現(xiàn)前端權(quán)限控制的示例代碼
這篇文章主要介紹了Vue 實(shí)現(xiàn)前端權(quán)限控制的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07