el-form表單el-form-item label不換行問(wèn)題及解決
更新時(shí)間：2023年10月17日 10:02:39 作者：大大大大碼龍
這篇文章主要介紹了el-form表單el-form-item label不換行問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
el-form表單 el-form-item label不換行
因?yàn)樽罱恢痹趯?xiě)前端頁(yè)面, 對(duì)樣式要求也慢慢變高了
所以出現(xiàn)對(duì)這個(gè)稍微有點(diǎn)強(qiáng)迫癥.....
代碼如下：
其他form也是差不多的寫(xiě)法, 但是就這個(gè)表達(dá)式, 因?yàn)槎嘁粋€(gè)字, 導(dǎo)出出現(xiàn)換行的問(wèn)題
也百度了很多, 大部分都是要改css的, 個(gè)人覺(jué)得很麻煩
也問(wèn)了同事... 說(shuō)給個(gè)寬試試.....然后
最終解決了
<el-dialog :title="title" :visible.sync="open" width="35%" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-form-item label="標(biāo)簽名稱" prop="tagName">
<el-input v-model="form.tagName" placeholder="請(qǐng)輸入標(biāo)簽名稱"/>
</el-form-item>
<el-form-item label="正則表達(dá)式" prop="tagExp">
<el-input v-model="form.tagExp" placeholder="請(qǐng)輸入正則表達(dá)式" style="width: 300px; margin-right: 10px"/>
<el-tooltip content="校驗(yàn)結(jié)果; 如:'^\-[1-9][0-9]*$','^[0-9]*$'" placement="top">
<el-button icon="el-icon-bell" circle @click="checkRegular"/>
</el-tooltip>
</el-form-item>
</el-form>
</el-dialog>代碼如上 ↑
效果如下 ↓
就全部對(duì)齊了
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue.js添加一些觸摸事件以及安裝fastclick的實(shí)例
今天小編就為大家分享一篇vue.js添加一些觸摸事件以及安裝fastclick的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
vue簡(jiǎn)單封裝axios插件和接口的統(tǒng)一管理操作示例
這篇文章主要介紹了vue簡(jiǎn)單封裝axios插件和接口的統(tǒng)一管理操作,結(jié)合具體實(shí)例形式分析了vue中axios插件安裝、配置及接口統(tǒng)一管理具體操作技巧,需要的朋友可以參考下2020-02-02
vue路由傳參的使用場(chǎng)景一般都是應(yīng)用在父路由跳轉(zhuǎn)到子路由時(shí),攜帶參數(shù)跳轉(zhuǎn),下面這篇文章主要給大家介紹了關(guān)于Vue路由傳參的三種方式,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
之前只是淺顯的使用插件進(jìn)行vue開(kāi)發(fā)展示,最近深入的研究了下,下面這篇文章主要給大家介紹了關(guān)于Vue3兄弟組件傳值之mitt的超詳細(xì)講解,需要的朋友可以參考下2022-06-06
Ant Design Vue table中列超長(zhǎng)顯示...并加提示語(yǔ)的實(shí)例
這篇文章主要介紹了Ant Design Vue table中列超長(zhǎng)顯示...并加提示語(yǔ)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
vue3+vant4封裝日期時(shí)間組件方式(年月日時(shí)分秒)
這篇文章主要介紹了vue3+vant4封裝日期時(shí)間組件方式(年月日時(shí)分秒),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue3.0實(shí)踐之寫(xiě)tsx語(yǔ)法實(shí)例
很久不寫(xiě)博客了,最近在使用ts和tsx開(kāi)發(fā)vue類項(xiàng)目,網(wǎng)上資料比較少,順便記錄一下方便同樣開(kāi)發(fā)的人互相學(xué)習(xí)共同進(jìn)步,下面這篇文章主要給大家介紹了關(guān)于vue3.0實(shí)踐之寫(xiě)tsx語(yǔ)法的相關(guān)資料,需要的朋友可以參考下2022-07-07
vue中的el-form表單rule校驗(yàn)問(wèn)題(特殊字符、中文、數(shù)字等)
這篇文章主要介紹了vue中的el-form表單rule校驗(yàn)問(wèn)題(特殊字符、中文、數(shù)字等)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了vue渲染方式render和template的區(qū)別，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
Vue 實(shí)現(xiàn)手動(dòng)刷新組件的方法
這篇文章主要介紹了Vue 實(shí)現(xiàn)手動(dòng)刷新組件的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02