el-form的label和el-input不在同一行

背景太久没用原生的elementUI，遗忘故记录问题一：单个el-input和el-form-item的label在同一行方法一：给el-form-item设置label-width<el-form model="form" :rules="rules" class="form_class"><el-form-item label="公文编号:" label-width="100

好记性真不如烂笔头

17194人浏览 · 2022-03-17 20:50:26

好记性真不如烂笔头 · 2022-03-17 20:50:26 发布

背景

太久没用原生的elementUI，遗忘故记录

问题一：单个el-input和el-form-item的label在同一行

方法一：给el-form-item设置label-width

  <el-form model="form" :rules="rules" class="form_class">
            <el-form-item label="公文编号:" label-width="100px">
              <el-input placeholder="公文编号"></el-input>
            </el-form-item>
      </el-form>

在这里插入图片描述

方法二：el-input外面套一层el-col，并且设置宽度

  <el-form model="form" :rules="rules" class="form_class" >
    <el-form-item  label="公文编号">
      <el-col :span="21">
        <el-input style="width:100%"></el-input>
      </el-col>
    </el-form-item>
  </el-form>

在这里插入图片描述

问题二：一行多个el-form-item和el-input

在el-form-item外面套el-col在设置label-width或者el-input的width宽度

		<el-row>
          <el-col :span="12">
            <el-form-item label="公文编号:" label-width="100px">
              <el-input placeholder="公文编号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公文编号:" label-width="100px">
              <el-input placeholder="公文编号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

在这里插入图片描述

或者：

    <el-row>
          <el-col :span="12">
            <el-form-item label="公文编号:">
              <el-input placeholder="公文编号" style="width: 80%"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公文编号:">
              <el-input placeholder="公文编号" style="width: 80%"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

在这里插入图片描述