el-radio复选框
时间: 2023-12-31 12:04:58 浏览: 100
复选框
el-radio是Element Plus组件库中的单选框组件。它可以让用户从多个选项中选择一个选项。下面是一个el-radio的示例代码:
```html
<template>
<el-radio-group v-model="selectedOption">
<el-radio label="option1">选项1</el-radio>
<el-radio label="option2">选项2</el-radio>
<el-radio label="option3">选项3</el-radio>
</el-radio-group>
</template>
<script>
export default {
data() {
return {
selectedOption: 'option1'
};
}
};
</script>
```
在上面的代码中,el-radio-group用于包裹el-radio组件,并通过v-model绑定一个变量来实现选中值的双向绑定。每个el-radio组件都有一个label属性,用于表示选项的值。用户可以通过点击el-radio来选择一个选项。
如果你想要纵向排列el-radio组件,可以使用CSS的flex布局。在el-radio-group上添加style属性,并设置display为flex,flex-flow为column nowrap,align-items为flex-start,即可实现纵向排列的效果。
```html
<template>
<el-radio-group v-model="selectedOption" style="display: flex; flex-flow: column nowrap; align-items: flex-start;">
<el-radio label="option1">选项1</el-radio>
<el-radio label="option2">选项2</el-radio>
<el-radio label="option3">选项3</el-radio>
</el-radio-group>
</template>
<script>
export default {
data() {
return {
selectedOption: 'option1'
};
}
};
</script>
```
这样,el-radio组件就会纵向排列显示了。
阅读全文