el-form 左右两排表单
时间: 2023-10-02 14:11:23 浏览: 39
你可以使用 `el-row` 和 `el-col` 来创建一个左右两排的表单,其中左侧使用 `label-width` 属性来控制标签宽度,右侧使用 `span` 属性来控制宽度。例如:
```html
<template>
<el-form>
<el-row>
<el-col :span="6">
<el-form-item label="姓名" :label-width="formLabelWidth">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="年龄" :label-width="formLabelWidth">
<el-input v-model="form.age"></el-input>
</el-form-item>
</el-col>
<el-col :span="18">
<el-form-item label="地址">
<el-input v-model="form.address"></el-input>
</el-form-item>
<el-form-item label="电话">
<el-input v-model="form.phone"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
name: '',
age: '',
address: '',
phone: ''
},
formLabelWidth: '80px'
}
}
}
</script>
```
在上面的示例中,左侧占用 6 个栅格,右侧占用 18 个栅格,用 `label-width` 属性来控制左侧标签的宽度。右侧的表单项则直接使用默认的宽度。