vue项目,使用第三方element-ui2.15.8版的radio单选组件中的标签el-radio-group,如何实现页面初始化时,默认选中第一选箱
时间: 2024-12-25 17:27:10 浏览: 10
在Vue项目中,如果你想要使用Element UI 2.15.8版本的`<el-radio-group>`组件,并让其中的第一个选项默认选中,你可以通过JavaScript操作DOM或者在数据绑定时设置值的方式来实现。这里提供两种常见的方法:
1. **直接在模板中设置**: 在HTML模板中,给`<el-radio>`的`v-model`属性绑定一个初始值,这个值应该是数组的第一个元素的key或者索引。
```html
<template>
<el-radio-group v-model="selectedOption">
<el-radio :label="option.key" v-for="(option, index) in options" :key="index">{{ option.name }}</el-radio>
</el-radio-group>
</template>
<script>
export default {
data() {
return {
options: [
{ key: '0', name: '第一个选项' },
{ key: '1', name: '第二个选项' },
// 更多选项...
],
selectedOption: '0' // 默认选择第一个选项
};
}
};
</script>
```
2. **在`mounted`生命周期钩子中设置**:
如果你想在组件挂载后动态设置,可以在`mounted()`函数里做处理:
```javascript
mounted() {
this.$refs.radioGroup && (this.selectedOption = 0); // 确保ref存在并且更新值
},
```
这里的`$refs`需要你在模板上添加`ref="radioGroup"`,然后在组件实例中引用。
阅读全文