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)樽罱恢痹趯懬岸隧?yè)面, 對(duì)樣式要求也慢慢變高了
所以出現(xiàn)對(duì)這個(gè)稍微有點(diǎn)強(qiáng)迫癥.....
代碼如下：
其他form也是差不多的寫法, 但是就這個(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 Router組件內(nèi)路由鉤子的使用,用于權(quán)限驗(yàn)證、數(shù)據(jù)預(yù)加載、防止數(shù)據(jù)丟失等場(chǎng)景,具有一定的參考價(jià)值,感興趣的可以了解一下2025-06-06
這篇文章主要給大家介紹了關(guān)于Vue父子之間值傳遞的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
vue給input file綁定函數(shù)獲取當(dāng)前上傳的對(duì)象完美實(shí)現(xiàn)方法
這篇文章主要介紹了vue給input file綁定函數(shù)獲取當(dāng)前上傳的對(duì)象完美實(shí)現(xiàn)方法,需要的朋友可以參考下2017-12-12
一文帶你搞懂Vue.js如何實(shí)現(xiàn)全選反選功能
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)全選反選功能的相關(guān)知識(shí),文中是示例代碼簡(jiǎn)潔易懂,具有一定的借鑒價(jià)值,有需要的小伙伴可以了解下2025-01-01
這篇文章主要介紹了Vue組件封裝方案實(shí)現(xiàn)，我們將從分析組件封裝的優(yōu)勢(shì)開始，然后依次介紹 vue.js 的基本概念，以及如何創(chuàng)建、封裝和使用自定義組件2023-03-03
el-element中el-table表格嵌套el-select實(shí)現(xiàn)動(dòng)態(tài)選擇對(duì)應(yīng)值功能
這篇文章主要給大家介紹了關(guān)于el-element中el-table表格嵌套el-select實(shí)現(xiàn)動(dòng)態(tài)選擇對(duì)應(yīng)值功能的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-01-01
Vue的實(shí)例、生命周期與Vue腳手架（vue-cli）實(shí)例詳解
本文通過(guò)實(shí)例代碼+圖片描述的形式給大家介紹了Vue的實(shí)例、生命周期與Vue腳手架（vue-cli）知識(shí),需要的朋友可以參考下2017-12-12
vue實(shí)現(xiàn)直播間點(diǎn)贊飄心效果的示例代碼
這篇文章主要介紹了vue實(shí)現(xiàn)直播間點(diǎn)贊飄心效果的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
vue使用echarts基本原理以及報(bào)錯(cuò)提示undefined(reading?init)的解決過(guò)程
Vue2使用ECharts時(shí),因未全局注冊(cè)或錯(cuò)誤引入導(dǎo)致TypeError報(bào)錯(cuò),解決方法為全局注冊(cè),正確獲取DOM節(jié)點(diǎn)并設(shè)置寬高,通過(guò)生命周期或數(shù)據(jù)請(qǐng)求后調(diào)用getMain2方法初始化圖表,option對(duì)象需根據(jù)實(shí)際數(shù)據(jù)配置2025-09-09
本篇文章主要介紹了vue 組件之間使用eventbus傳值。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10