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"> 審查項(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í),可通過頁(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)單來看:
1、使用屬性 readonly="true" 方式,輸入框或文本域無灰色底
2、使用屬性 :disabled="true" 方式,輸入框或文本域有灰色底
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
解決vue使用vant下拉框van-dropdown-item 綁定title值不變問題
這篇文章主要介紹了解決vue使用vant下拉框van-dropdown-item 綁定title值不變問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08Vue項(xiàng)目數(shù)據(jù)動(dòng)態(tài)過濾實(shí)踐及實(shí)現(xiàn)思路
這篇文章主要介紹了Vue項(xiàng)目數(shù)據(jù)動(dòng)態(tài)過濾實(shí)踐,,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09深入探究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ī)制并非完美無缺,本文將探討Vue2響應(yīng)式原理及其存在的缺陷2023-08-08elementUI?checkBox報(bào)錯(cuò)Cannot read property &ap
這篇文章主要為大家介紹了elementUI?checkBox報(bào)錯(cuò)Cannot read property 'length' of undefined的解決分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06Vue3+Antd實(shí)現(xiàn)彈框顯示內(nèi)容并加入復(fù)制按鈕
這篇文章主要介紹了Vue3+Antd實(shí)現(xiàn)彈框顯示內(nèi)容并加入復(fù)制按鈕,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12Vue 實(shí)現(xiàn)前端權(quán)限控制的示例代碼
這篇文章主要介紹了Vue 實(shí)現(xiàn)前端權(quán)限控制的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07