el-form-item如何每行显示多个
时间: 2023-12-14 21:50:18 浏览: 162
可以通过设置`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`在同一行内显示。
阅读全文