關(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)文章
Vue自定義組件實現(xiàn)?v-model?的幾種方式
在?Vue?中,v-model?是一個常用的指令,用于實現(xiàn)表單元素和組件之間的雙向綁定,當(dāng)我們使用原生的表單元素時,直接使用?v-model?是很方便的,本文給大家介紹了Vue自定義組件實現(xiàn)?v-model?的幾種方式,需要的朋友可以參考下2024-02-02
dhtmlxGantt是一個強大的JavaScript Gantt圖表庫,提供易于使用、高度可自定義的Gantt圖表組件,它支持多項任務(wù)和進度條,以及多種列和行布局,可用于創(chuàng)建各種類型的時間線和計劃表,本文給大家介紹前端vue實現(xiàn)甘特圖的相關(guān)知識,感興趣的朋友跟隨小編一起看看吧2024-04-04
自從體驗了一下vite之后,真的太快了,然而對vue3還不是很熟練,就想著在vue2的項目中使用以下vite,下面這篇文章主要給大家介紹了關(guān)于vite搭建vue2項目的相關(guān)資料,需要的朋友可以參考下2022-11-11
本文主要介紹了Vue.js項目在IE11白屏報錯的解決方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-08-08
這篇文章主要介紹了vue3如何實現(xiàn)變量雙向綁定問題,具有很好的參考價值,希望對大家有所幫助,2023-11-11
這篇文章主要介紹了vue配置多代理服務(wù)接口地址操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了Vue的兼容性解決方案Babel-polyfill的相關(guān)知識,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-11-11
當(dāng)協(xié)議,域名,端口其中某一個不一致的時候,就會產(chǎn)生跨域問題,下面這篇文章主要給大家介紹了關(guān)于Vue項目中該如何解決跨域問題的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
解決VUE mounted 鉤子函數(shù)執(zhí)行時 img 未加載導(dǎo)致頁面布局的問題
這篇文章主要介紹了解決VUE mounted 鉤子函數(shù)執(zhí)行時 img 未加載導(dǎo)致頁面布局的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
本篇文章主要介紹了在Vue中使用echarts的實例代碼（3種圖），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07