關(guān)于el-form中el-input輸入框的寬度問題詳解
更新時間：2023年01月03日 12:03:35 作者：yellow-V
自從用了element-ui,確實好用,該有的組件都有,下面這篇文章主要給大家介紹了關(guān)于el-form中el-input輸入框的寬度問題的相關(guān)資料,需要的朋友可以參考下
問題：要解決lable和input水平排列且input寬度可以自定義
1、el-form有個屬性inline默認(rèn)為false，故而lable和input不是水平排列，input輸入框占了整行
<el-form :model="addDialogForm" :rules="addDialogRules" >
<el-form-item prop="attr_name" :label="addTitle">
<el-input v-model="addDialogForm.attr_name" style="width:100%"></el-input>
</el-form-item>
</el-form>
2、將屬性inline設(shè)置為true，實現(xiàn)了lable和input水平排列，但是寬度無法自定義設(shè)置
<el-form :model="addDialogForm" :rules="addDialogRules" :inline="true">
<el-form-item prop="attr_name" :label="addTitle">
<el-input v-model="addDialogForm.attr_name" style="width:100%"></el-input>
</el-form-item>
</el-form>
3、關(guān)掉inline屬性，給el-input包裹一層el-col,通過span屬性設(shè)置寬度
注意：在inline="ture"時，沒法設(shè)置寬度
<el-form :model="addDialogForm" :rules="addDialogRules" >
<el-form-item prop="attr_name" :label="addTitle">
<el-col :span="21">
<el-input v-model="addDialogForm.attr_name" style="width:100%"></el-input>
</el-col>
</el-form-item>
</el-form>
附：el-input設(shè)置高度和寬度
一、設(shè)置input的高度
使用:rows="10" 來調(diào)整input 輸入框的高度
二、設(shè)置input的寬度
/deep/ .bbb #input1 {
min-height: 30px;
margin: 0px;
width: 1348px;
height: 171px;
總結(jié)
到此這篇關(guān)于el-form中el-input輸入框的寬度問題詳解的文章就介紹到這了,更多相關(guān)el-form el-input輸入框?qū)挾葍?nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
剛剛創(chuàng)建好vue項目的時候,運(yùn)行 npm run dev 會報錯,下面這篇文章主要給大家介紹了關(guān)于運(yùn)行npm?run?dev報錯的原因及解決方法,需要的朋友可以參考下2022-10-10
Vue3使用vant檢索組件van-search遇到的問題小結(jié)
當(dāng)清空按鈕與檢索按鈕同時居右時,點擊clear清空按鈕事件時會同時觸發(fā)click-right-icon事件,這個時候容易觸發(fā)一系列問題,小編小編給大家分享Vue3使用vant檢索組件van-search遇到的問題小結(jié),感興趣的朋友一起看看吧2024-02-02
這篇文章主要介紹了 Vue press 支持圖片放大功能,本文通過代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2018-11-11
vue中radio根據(jù)動態(tài)值綁定checked無效的解決
這篇文章主要介紹了vue中radio根據(jù)動態(tài)值綁定checked無效的解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要給大家介紹了關(guān)于Vue獲取表單數(shù)據(jù)的多種方式,在Vue中我們通常使用v-model命令綁定表單的屬性值(通常是value),獲取到的屬性值就是表單數(shù)據(jù),需要的朋友可以參考下2023-09-09
前端Vue手機(jī)號校驗以及后端Java手機(jī)號校驗例子
接收一個輸入的手機(jī)號,判斷輸入的手機(jī)號是否正確是一個很常見的功能,這篇文章主要給大家介紹了關(guān)于前端Vue手機(jī)號校驗以及后端Java手機(jī)號校驗的相關(guān)資料,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了詳解vue 數(shù)組和對象渲染問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
使用vue插件axios傳數(shù)據(jù)的Content-Type及格式問題詳解
這篇文章主要介紹了使用vue插件axios傳數(shù)據(jù)的Content-Type以及格式問題,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-09-09
使用vue根據(jù)狀態(tài)添加列表數(shù)據(jù)和刪除列表數(shù)據(jù)的實例
今天小編就為大家分享一篇使用vue根據(jù)狀態(tài)添加列表數(shù)據(jù)和刪除列表數(shù)據(jù)的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
本篇文章主要介紹了在vscode里使用.vue代碼模板的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04