背景

太久没用原生的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>

在这里插入图片描述

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐