是否可以将“标签位置：顶部”仅应用于元素 UI 中的一个表单项答案

【问题标题】：Is it possible to apply 'label-position: top' to only one form-item in Element UI是否可以将“标签位置：顶部”仅应用于元素 UI 中的一个表单项
【发布时间】：2020-04-01 01:21:45
【问题描述】：

我正在使用 Nuxt 和 Element UI 构建 Web 应用程序。我对表单组件提供的 Element UI 有疑问。

这是我的网络应用程序的屏幕截图。

https://gyazo.com/4cf04aa85d0a9bb9a4f2d09a693bbdd6

还有两个 el-form-item 组件（Form Item A 和 Form Item B）。

我想将“标签位置：左”应用于“表单项 B”，而不是“表单项 A”。但是，有一个问题我已经知道了。

[问题]

el-form-item 组件没有 'label-position' 属性，所以如果我想应用它，我必须将它应用到 el-form 组件，但如果我这样做，所有 el-form应用 el-from 中的 -item 组件。

我该如何解决？

这是我的代码。

<template>
  <el-form ref="form" :model="form" label-width="120px" label-position="left">
    <el-form-item label="Form Item A">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="Form Item B">
      <el-select v-model="form.region" placeholder="please select your zone">
        <el-option label="Zone one" value="shanghai"></el-option>
        <el-option label="Zone two" value="beijing"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script>
  export default {
    data() {
      return {
        form: {
          name: '',
          region: '',
        }
      }
    },
  }
</script>

【问题讨论】：

标签： vue.js nuxt.js element-ui

【解决方案1】：

var Main = {
  data() {
    return {
      form: {
        name: '',
        region: ''
      }
    };
  }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

@import url("//unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css");
.el-form-item--label-top .el-form-item__label {
  width: auto!important;
  float: none;
  display: inline-block;
  text-align: left;
  padding: 0 0 10px;
}

.el-form-item--label-top .el-form-item__content {
  margin-left: 0!important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="//unpkg.com/element-ui@2.13.0/lib/index.js"></script>

<div id="app">
  <el-form ref="form" :model="form" label-width="120px" label-position="left">
    <el-form-item label="Form Item A" class="el-form-item--label-top">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="Form Item B">
      <el-select v-model="form.region" placeholder="please select your zone">
        <el-option label="Zone one" value="shanghai"></el-option>
        <el-option label="Zone two" value="beijing"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
</div>

您可以自定义一个类并将其应用到el-form-item，以达到与'label-position' attribute相同的效果

【讨论】：