element-plus中el-radio-group 默认选中
时间: 2023-07-26 18:29:23 浏览: 263
在 element-plus 中,el-radio-group 默认选中的方式是通过 `v-model` 绑定选中值。你可以在 `el-radio` 元素上加上 `label` 属性,将其值绑定到 `v-model` 上,即可设置默认选中项。例如:
```html
<template>
<el-radio-group v-model="selected">
<el-radio label="option1">Option 1</el-radio>
<el-radio label="option2">Option 2</el-radio>
<el-radio label="option3">Option 3</el-radio>
</el-radio-group>
</template>
<script>
export default {
data() {
return {
selected: 'option2' // 默认选中 option2
};
}
};
</script>
```
相关问题
element-plus的单选框
element-plus的单选框可以通过el-radio-group和el-radio两个组件来实现。其中el-radio-group是单选框组的容器,el-radio是单选框选项。具体使用方法如下:
```html
<template>
<el-radio-group v-model="radio">
<el-radio :label="1">选项一</el-radio>
<el-radio :label="2">选项二</el-radio>
<el-radio :label="3">选项三</el-radio>
</el-radio-group>
</template>
<script>
export default {
data() {
return {
radio: 1
};
}
};
</script>
```
其中,v-model绑定的是当前选中的选项的值,即label的值。如果需要设置默认选中的选项,可以在data中设置radio的初始值。
element-plus vue弹框单选
您可以使用 element-plus 中的 el-radio 组件来实现弹框单选功能。具体步骤如下:
1. 在弹框中使用 el-radio-group 组件包裹多个 el-radio 组件,设置 v-model 绑定选中的值。
2. 在 el-radio 组件中设置 label 属性,用于区分不同选项。
3. 点击确定按钮时,获取选中的值进行处理。
示例代码如下:
```
<template>
<el-dialog :visible.sync="dialogVisible">
<el-radio-group v-model="selected">
<el-radio :label="1">选项1</el-radio>
<el-radio :label="2">选项2</el-radio>
<el-radio :label="3">选项3</el-radio>
</el-radio-group>
<div slot="footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleConfirm">确定</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
data() {
return {
dialogVisible: false,
selected: ''
}
},
methods: {
handleConfirm() {
// 处理选中的值
console.log(this.selected)
this.dialogVisible = false
}
}
}
</script>
```