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