form表单中,输入框和单选框在同一行显示 elementUI
时间: 2024-02-01 07:14:43 浏览: 67
可以使用 ElementUI 中的 Grid 布局,将输入框和单选框放在同一行显示,具体实现步骤如下:
1. 在 template 中使用 el-row 和 el-col 标签,构建 Grid 布局的结构。
```html
<el-row>
<el-col :span="12">
<!-- 输入框 -->
<el-input v-model="inputValue" placeholder="请输入"></el-input>
</el-col>
<el-col :span="12">
<!-- 单选框 -->
<el-radio-group v-model="radioValue">
<el-radio label="A">选项A</el-radio>
<el-radio label="B">选项B</el-radio>
<el-radio label="C">选项C</el-radio>
</el-radio-group>
</el-col>
</el-row>
```
2. 在 script 中定义 inputValue 和 radioValue 变量,并在 methods 中实现相应的逻辑。
```javascript
export default {
data() {
return {
inputValue: '',
radioValue: ''
}
},
methods: {
// 点击单选框时触发
handleRadioChange(val) {
console.log('选中了:' + val)
}
}
}
```
阅读全文
相关推荐
![rar](https://img-home.csdnimg.cn/images/20241231044955.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![](https://img-home.csdnimg.cn/images/20250102104920.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![rar](https://img-home.csdnimg.cn/images/20241231044955.png)
![](https://img-home.csdnimg.cn/images/20250102104920.png)
![-](https://img-home.csdnimg.cn/images/20241231044955.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)