需求：
1. 使用 el-radio 组件实现单选功能，通过 v-model 绑定当前选中项。
2. 切换选中时会触发 change 事件，可在此处理回显逻辑。
3. 通过 selectedRadio 变量记录当前选中值，实现回显功能。
代码实现：
<template>
<div>
<el-radio-group v-model="selectedRadio" @change="handleRadioChange">
<el-radio :label="1">选项一</el-radio>
<el-radio :label="2">选项二</el-radio>
<el-radio :label="3">选项三</el-radio>
</el-radio-group>
<p>当前选中: {{ selectedRadio }}</p>
</div>
</template>
<script>
export default {
data() {
return {
selectedRadio: 1, // 当前选中的 radio 值
previousRadio: 1 // 用于保存切换前的值
};
},
methods: {
async handleRadioChange(val) {
// 保存当前选中值为上一个值
this.previousRadio = this.selectedRadio;
try {
// 弹出确认框
await this.$confirm(
'确定要切换选项吗？切换后将丢失当前操作。',
'确认切换',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}
);
// 用户点击确定，更新选中值
this.selectedRadio = val;
console.log('已切换到:', val);
} catch (error) {
// 用户点击取消，回显之前的值
this.selectedRadio = this.previousRadio;
console.log('取消切换，回显值:', this.previousRadio);
}
}
}
};
</script>
