el-form-item

el-form-item 是 Element UI 中的一个表单项组件，用于包装表单控件。它可以设置表单控件的 label、prop、rules 等属性，方便表单数据的校验和提交。例如：

<el-form :model="form" :rules="rules">
  <el-form-item label="用户名" prop="username">
    <el-input v-model="form.username"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="password">
    <el-input type="password" v-model="form.password"></el-input>
  </el-form-item>
</el-form>

这里的 form 是表单数据对象，rules 是表单校验规则对象，el-input 是 Element UI 中的输入框组件。通过 el-form-item 组件包装 el-input，可以方便地设置 label、prop、rules 等属性，实现表单数据的校验和提交。

相关问题

el-form-item内 循环el-form-item el-form-item输入内容了,但是失去叫焦点为什么会校验

el-form-item内循环el-form-item时，如果输入内容后失去焦点，仍然会进行校验的原因是因为el-form-item内部的el-form-item会继承父级el-form-item的校验规则。所以即使子级el-form-item输入了内容，但是失去焦点后，父级el-form-item仍然会进行校验。

为了解决这个问题，可以在子级el-form-item上添加`prop`属性，并将其设置为一个唯一的值，以避免继承父级校验规则。例如：

<el-form-item prop="childFormItem">
  <el-form-item>
    <el-input v-model="inputValue"></el-input>
  </el-form-item>
</el-form-item>

这样，子级el-form-item就会独立进行校验，不会受到父级el-form-item的影响。

<el-form label-position="left"> <el-row> <el-col :span="4"> <el-form-item label="姓名"> <el-input></el-input> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="年龄"> <el-input></el-input> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="性别"> <el-radio-group> <el-radio label="male">男</el-radio> <el-radio label="female">女</el-radio> </el-radio-group> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="地址"> <el-input></el-input> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="邮箱"> <el-input></el-input> </el-form-item> </el-col> </el-row> </el-form> 如何使表单的标签显示在左侧

可以通过设置 `label-position` 属性为 "left" 来使表单的标签显示在左侧，具体代码如下：

<el-form label-position="left"> 
  <!-- 表单内容 -->
</el-form>

这样表单中每个表单项的标签都会显示在左侧。