Vue 表单布局

最新推荐文章于 2025-10-11 17:37:22 发布

原创最新推荐文章于 2025-10-11 17:37:22 发布 · 2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #html #javascript

Vue学习笔记专栏收录该内容

8 篇文章

订阅专栏

这篇博客展示了如何使用Vue.js的Element UI库创建一个响应式的表单。通过`el-form`的`inline`属性实现一行显示，`el-row`的`gutter`设置栅格间距，`justify`属性实现两端对齐。`el-col`的`span`属性用于调整元素宽度，创建了姓名、身份证、性别和出生日期的输入字段，提供了良好的视觉效果和布局结构。

Vue代码

    <el-form :inline="true" class="demo-form-inline">
       <el-row :gutter="20" type="flex" justify="space-between">
         <el-col :span="12" style="background-color: coral;">
           <el-form-item label="姓名">
             <el-input></el-input>
           </el-form-item>
         </el-col>
         <el-col :span="12" style="background-color: #42b983;text-align:right">
          <el-form-item label="身份证号码">
            <el-input></el-input>
          </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20" type="flex" justify="space-between" >
         <el-col :span="12" style="background-color: coral;">
           <el-form-item label="性别">
             <el-input></el-input>
           </el-form-item>
         </el-col>
         <el-col :span="12" style="background-color: #42b983;text-align:right" >
           <el-form-item label="出生日期">
             <el-input></el-input>
           </el-form-item>
         </el-col>
       </el-row>
     </el-form>

页面样式：