vue.js - 是否可以将“标签位置:顶部”仅应用于元素 UI 中的一个表单项
问题描述
我正在使用 Nuxt 和 Element UI 构建 Web 应用程序。我有一个关于表单组件提供的元素 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-item 组件在 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>
解决方案
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
推荐阅读
- php - 顶部有匹配项的订单标签
- tensorflow - tf.data.Dataset 中的 TensorFlow 动态批量大小
- c++ - 从异构列表中提取数据
- sql - SSRS 表达式在替换括号“(”“)”时显示#Error
- xml - 在 oracle 中每隔 3 次出现逗号后打印所有字符
- java - 与框架相同的包名和类名
- python - 如何在 Python 中使用 Kullback-Leibler Divergence 获得概率密度函数
- magento2 - 如果 magento 2 中有两次,请从 URL 末尾删除 .html
- java - 阴影静态变量(全局变量)
- php - Laravel 邮件队列不同于邮件发送