如何让el-item-form横着
时间: 2023-07-05 17:14:42 浏览: 708
要让 `el-form-item` 横向排列,你可以使用 `el-row` 和 `el-col` 栅格布局来实现。示例代码如下:
```html
<el-form>
<el-row>
<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-input></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="性别">
<el-radio-group>
<el-radio label="男"></el-radio>
<el-radio label="女"></el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
</el-form>
```
这样,三个 `el-form-item` 就会横向排列在一行中。你可以根据需要更改 `el-col` 的 `:span` 属性来调整每个表单项的宽度。
相关问题
el-form-item 横着展示
您好,非常感谢您提出问题。关于el-form-item横向展示的问题,您可以通过设置el-form的属性label-position为'top'或者'right'来实现横向展示。具体代码实现如下:
``` html
<el-form label-position='right'>
<el-form-item label='姓名'>
<el-input></el-input>
</el-form-item>
<el-form-item label='性别'>
<el-radio-group>
<el-radio-button label='男'></el-radio-button>
<el-radio-button label='女'></el-radio-button>
</el-radio-group>
</el-form-item>
</el-form>
```
其中label-position的取值包括top, right, left, bottom。如果设置为right,则每个form-item会在一行内显示,label会显示在左侧,组件显示在右侧。希望这个回答能够帮助到您,如果您还有其他问题可以继续问我哦!
手写 el-form el-form-item
<>
<el-form ref="myForm" :model="form" label-width="120px">
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model="form.age"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
name: '',
age: ''
}
};
},
methods: {
submitForm() {
this.$refs.myForm.validate((valid) => {
if (valid) {
// 在这里处理表单提交逻辑
console.log(this.form);
} else {
console.log('表单校验失败');
return false;
}
});
}
}
};
</script>
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_lunwen.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)