vue如何让el-form-item水平排列,超过固定宽度就换行
时间: 2023-12-14 10:11:20 浏览: 222
Vue中el-form标签中的自定义el-select下拉框标签功能
您可以使用flex布局来实现el-form-item水平排列,并且超过固定宽度就换行。具体实现方法如下:
1. 在el-form上添加flex布局样式:
```html
<el-form :model="form" label-width="80px" style="display: flex; flex-wrap: wrap;">
```
2. 在el-form-item上添加样式控制宽度和margin:
```html
<el-form-item label="姓名" style="width: 200px; margin-right: 20px;">
```
完整示例代码如下:
```html
<template>
<el-form :model="form" label-width="80px" style="display: flex; flex-wrap: wrap;">
<el-form-item label="姓名" style="width: 200px; margin-right: 20px;">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="年龄" style="width: 200px; margin-right: 20px;">
<el-input v-model="form.age"></el-input>
</el-form-item>
<el-form-item label="性别" style="width: 200px; margin-right: 20px;">
<el-radio-group v-model="form.gender">
<el-radio label="male">男</el-radio>
<el-radio label="female">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="手机号" style="width: 200px;">
<el-input v-model="form.phone"></el-input>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
name: '',
age: '',
gender: '',
phone: ''
}
};
}
};
</script>
```
在上述代码中,我们使用了 `display: flex` 将 `el-form` 转换为弹性容器,并使用 `flex-wrap: wrap` 实现换行。同时,我们通过在 `el-form-item` 上设置 `width` 和 `margin-right` 控制每个表单项的宽度和间距。当容器宽度不足以容纳所有表单项时,它们会自动换行。
阅读全文