vue.js - 是否可以将 'label-position: top' 仅应用于 Element UI 中的一个表单项

Question

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

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

https://gyazo.com/4cf04aa85d0a9bb9a4f2d09a693bbdd6

并且有两个 el-form-item 组件(Form Item A 和 Form Item B)。

我想将“label-position: left”应用到“Form Item B”，而不是“Form Item A”。但是，有一个问题我已经知道了。

[问题]

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

我该如何解决？

这是我的代码。

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

Answer 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相同的效果