问题：要解决lable和input水平排列且input宽度可以自定义 1、el-fORM有个属性inline默认为false，故而lable和input不是水平排列，input输入框
问题：要解决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;
总结
到此这篇关于el-form中el-input输入框的宽度问题详解的文章就介绍到这了,更多相关el-form el-input输入框宽度内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
--结束END--
本文标题: 关于el-form中el-input输入框的宽度问题详解
本文链接: https://www.lsjlt.com/news/176521.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0