在用elementUI的时候经常会碰到表单中输入框长度长短不一问题,看文档去用里面自带的属性调整了一会还是发现效果不是自己想像的那样,并且搜了很多解决方法都不得劲,终于找到一个比较不错的解决方法,记录在这边方便找!
后面又仔细翻阅了一下文档,发现Layout布局这个部分就是我想要的!!!(文档还是要仔细看看!),在这里可以使用col
组件,并设置其:span
属性大小,:span
值
为24时会铺满整行,希望一半的时候就设置:span
属性为12就好
下面这两张是elementUI的一个表单中的直接拿下来的某一行输入框部分与他的默认样式
<el-form-item label="活动名称">
<el-input v-model="sizeForm.name"></el-input>
</el-form-item>
在加入col组件后,我给:span属性设置为8,代码和效果图如下
<el-form-item label="活动名称">
<el-col :span="8">
<el-input v-model="sizeForm.name"></el-input>
</el-col>
</el-form-item>