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