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

🤵 作者coderYYY

🧑 个人简介 :前端程序媛,目前主攻web前端 ,后端辅助,其他技术知识也会偶尔分享🍀欢迎和我一起交流!🚀(评论和私信一般会回!!)

👉 个人专栏推荐《前端项目教程以及代码》

✨一、效果

多个 el-form-item两列布局,且里面的表单组件宽度一致100%撑满

整整齐齐,适合多表单组件布局

🚩二、代码

  • 只需设置一个合适的label-width(注意:别加 :inline='true',不然宽度不会自适应)
  • form组件如el-inputel-select等都需style="width:100%"
  • 结合el-rowel-col,把el-form-item分别放进左右两个el-col就可以,两列就:span="12",更多列可以再自行设置
html 复制代码
  <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%"></el-input>
        </el-form-item>
        <el-form-item label="活动区域">
          <el-select v-model="form.region" placeholder="请选择活动区域" style="width:100%">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动时间">

          <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>

        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="活动形式">
          <el-input type="textarea" v-model="form.desc" style="width:100%"></el-input>
        </el-form-item>
        <el-form-item label="即时配送">
          <el-select v-model="form.region2" placeholder="请选择时间段" style="width:100%">
            <el-option label="时间段" value="shanghai"></el-option>
            <el-option label="时间段" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动性质">
          <el-input v-model="form.xz" style="width:100%"></el-input>
        </el-form-item>
        <el-form-item label="特殊资源">
          <el-input v-model="form.zy" style="width:100%"></el-input>
        </el-form-item>

      </el-col>

  </el-form>
相关推荐
啃火龙果的兔子5 分钟前
CSS 预处理器(Preprocessor)和后处理器(Postprocessor)
前端·css
懋学的前端攻城狮7 分钟前
JavaScript作用域与闭包深度解析:从原理到实战
前端·javascript
晓得迷路了12 分钟前
栗子前端技术周刊第 92 期 - TypeScript 5.9、pnpm 10.14、Vite 下载量超 Webpack...
前端·javascript·vite
我不吃饼干8 小时前
在 React 中实现倒计时功能会有什么坑
前端·react.js
小小小小宇9 小时前
前端PerformanceObserver
前端
王者鳜錸9 小时前
PYTHON从入门到实践-18Django从零开始构建Web应用
前端·python·sqlite
拾光拾趣录9 小时前
ES6到HTTPS全链路连环拷问,99%人第3题就翻车?
前端·面试
haaaaaaarry10 小时前
Element Plus常见基础组件(二)
开发语言·前端·javascript
xyphf_和派孔明10 小时前
关于echarts的性能优化考虑
前端·性能优化·echarts
PyHaVolask10 小时前
HTML 表单进阶:用户体验优化与实战应用
前端·javascript·html·用户体验