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