怎么让el-form-item 的label和input分两行显示

你可以使用 CSS 样式来实现这个效果。可以在 `el-form-item` 的包裹元素上添加一个类名，然后设置该类名的样式如下：

.form-item-row {
  display: flex;
  flex-direction: column;
}

然后在 `el-form-item` 组件上添加 `class="form-item-row"`，即可将 `label` 和 `input` 分别放在两行显示。

<el-form-item label="用户名" class="form-item-row">
  <el-input v-model="username"></el-input>
</el-form-item>

相关问题

怎么让el-form-item 的label和input分两行显示,且靠左对齐

可以使用以下样式来实现：

.el-form-item__label {
  display: block;
  float: none;
  clear: both;
  width: auto;
  text-align: left;
}
.el-form-item__content {
  margin-left: 0;
}

这样，label 和 input 就会分两行显示，并且靠左对齐了。需要注意的是，如果是在某个特定表单中使用，最好将样式加上一个类名，以免影响到其他表单。比如：

<el-form>
  <el-form-item class="split-label">
    <template slot="label">姓名</template>
    <el-input></el-input>
  </el-form-item>
  <!-- 其他表单项 -->
</el-form>

.split-label .el-form-item__label {
  display: block;
  float: none;
  clear: both;
  width: auto;
  text-align: left;
}
.split-label .el-form-item__content {
  margin-left: 0;
}

<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>

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