在form表单下,让输入框和单选框显示在同一行,用elmentUI
时间: 2023-12-09 09:04:27 浏览: 188
vue复杂的form表单封装和使用
5星 · 资源好评率100%
你可以使用 Element UI 中的 Grid 栅格系统来实现让输入框和单选框显示在同一行。以下是一个示例代码:
```html
<template>
<el-form>
<el-row>
<el-col :span="12">
<el-form-item label="姓名">
<el-input v-model="name"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="性别">
<el-radio-group v-model="gender">
<el-radio :label="1">男</el-radio>
<el-radio :label="0">女</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
</el-form>
</template>
<script>
export default {
data() {
return {
name: '',
gender: ''
}
}
}
</script>
```
在这个示例中,我们在 form 标签下使用了一个 el-row 标签,并在其中使用了两个 el-col 标签,分别占据了 12 个栅格的宽度。然后在每个 el-col 标签中,我们使用了 el-form-item 标签,并在其中放置了 el-input 和 el-radio-group 标签,分别用来表示输入框和单选框。这样,输入框和单选框就能够在同一行显示了。
阅读全文