多个el-form-item两列布局排齐且el-select/el-input组件宽度撑满

原创

于 2025-05-12 12:07:52 发布 · 1k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript #elementui #前端框架

🤵 作者：coderYYY
🧑 个人简介：前端程序媛，目前主攻web前端，后端辅助，其他技术知识也会偶尔分享🍀欢迎和我一起交流！🚀（评论和私信一般会回！！）
👉 个人专栏推荐：《前端项目教程以及代码》

✨一、效果

多个 el-form-item两列布局，且里面的表单组件宽度一致100%撑满
在这里插入图片描述
整整齐齐，适合多表单组件布局

🚩二、代码

只需设置一个合适的label-width（注意：别加 :inline='true'，不然宽度不会自适应）
form组件如el-input、el-select等都需style="width:100%"
结合el-row和el-col，把el-form-item分别放进左右两个el-col就可以，两列就:span="12"，更多列可以再自行设置

  <el-form ref="form" :model="form" label-width="120px">
    <el-row>
      <el-col :span="12">
        <el-form-item label="活动名称">
          <el-input v-model="form.name" style="width:100%">