前端-elementUI表单组件-输入框长度控制

最新推荐文章于 2024-08-07 10:28:28 发布

大卫软件测试

最新推荐文章于 2024-08-07 10:28:28 发布

阅读量868

点赞数 2

文章标签：前端 elementui javascript

本文链接：https://blog.csdn.net/qadnkz/article/details/137911430

版权

本文讲述了在使用ElementUI开发表单时，如何通过引入col组件和调整span属性来控制输入框的长度，以实现期望的样式。作者强调了仔细阅读文档的重要性，并给出了实际应用的代码示例。

摘要由CSDN通过智能技术生成

在用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,成为了我们想要的样子,这个可以按需调整,具体还是得阅读饿了么的文档

原文链接：https://blog.csdn.net/a666666000/article/details/125187219

关注