关于el-form中el-input输入框的宽度问题详解
yellow-V 人气:0问题:要解决lable和input水平排列且input宽度可以自定义
1、el-form有个属性inline默认为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设置为true,实现了lable和input水平排列,但是宽度无法自定义设置
<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、关掉inline属性,给el-input包裹一层el-col,通过span属性设置宽度
注意:在inline="ture"时,没法设置宽度
<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设置高度和宽度
一、设置input的高度
使用:rows="10" 来调整input 输入框的高度
二、设置input的宽度
/deep/ .bbb #input1 { min-height: 30px; margin: 0px; width: 1348px; height: 171px;
总结
加载全部内容