多个el-form-item标签如何放在一行显示?
时间: 2023-12-14 12:12:24 浏览: 301
你可以使用 `inline` 属性来将多个 `el-form-item` 标签放在同一行显示。例如:
```html
<el-form>
<el-form-item label="姓名" inline>
<el-input></el-input>
</el-form-item>
<el-form-item label="年龄" inline>
<el-input></el-input>
</el-form-item>
<el-form-item label="性别" inline>
<el-radio-group>
<el-radio label="男"></el-radio>
<el-radio label="女"></el-radio>
</el-radio-group>
</el-form-item>
</el-form>
```
这样每个 `el-form-item` 就会在同一行显示了。记得加上 `inline` 属性。
相关问题
怎么让多个el-form-item在同一行显示
如果你想让多个 `el-form-item` 在同一行显示,可以使用 `el-row` 和 `el-col` 的布局方式来实现。具体步骤如下:
1. 在 `el-form` 标签外部包裹一个 `el-row` 标签,表示将 `el-form-item` 放在同一行中。
2. 在每个 `el-form-item` 标签外部包裹一个 `el-col` 标签,表示每个表单项占据的列数。
3. 设置 `el-col` 的 `span` 属性,表示每个表单项占据的列数。
4. 可以在 `el-row` 标签上添加 `justify` 和 `align` 属性,来控制行内元素的水平和垂直对齐方式。
示例代码如下:
```html
<template>
<el-form>
<el-row justify="center" align="middle">
<el-col :span="8">
<el-form-item label="姓名">
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="手机号">
<el-input v-model="form.phone"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="邮箱">
<el-input v-model="form.email"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</template>
```
这样就可以让三个表单项在同一行中显示。注意要根据实际情况调整 `el-col` 的 `span` 属性,保证表单项宽度合适。
el-form-item如何每行显示多个
可以通过设置`el-form-item`的`label-width`属性和内部元素的宽度来实现每行显示多个`el-form-item`。
例如,如果要在一行中显示两个`el-form-item`,可以将`label-width`设置为`100px`,并将每个`el-form-item`的宽度设置为`calc(50% - 50px)`,如下所示:
```html
<template>
<el-form>
<el-row>
<el-col :span="12">
<el-form-item label="姓名" label-width="100px">
<el-input v-model="name" :style="{width: 'calc(50% - 50px)'}"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="年龄" label-width="100px">
<el-input v-model="age" :style="{width: 'calc(50% - 50px)'}"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</template>
<script>
export default {
data() {
return {
name: '',
age: ''
}
}
}
</script>
```
这样就可以让两个`el-form-item`在同一行内显示。