elementUI表单组件的输入框长度控制

在用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>

 

 设置成功,这边的宽度占据整行的1/3,成为了我们想要的样子,这个可以按需调整,具体还是得阅读饿了么的文档