vue3 el-radio-group选中即禁用

在 Vue3 中，如果你想创建一个`<el-radio-group>`，其中一旦某个 radio 被选中，就自动禁用其他选项，你可以这样做：

首先，在模板中，声明你的 radio 组并设置默认值，同时添加一个 `@change` 事件监听器来控制禁用状态：

<template>
  <el-radio-group v-model="selectedOption" @change="handleRadioChange">
    <el-radio
      v-for="(option, index) in options"
      :key="index"
      :label="option.value"
      :disabled="!(index === selectedOption)">
      {{ option.label }}
    </el-radio>
  </el-radio-group>
</template>

然后，在 script 部分，定义 `options` 数组，以及 `selectedOption` 和 `handleRadioChange` 函数：

<script setup>
import { ref, computed } from 'vue';

const options = [
  // 定义你的选项，比如：
  { label: 'Option A', value: 'a' },
  { label: 'Option B', value: 'b' },
  // ...
];

const selectedOption = ref(null); // 或者初始化为第一个元素的索引

function handleRadioChange(value) {
  // 当某项被选中时，更新 selectedOption 并判断是否需要禁用其他选项
  selectedOption.value = value;

  const disableOthers = options.some(option => option.value !== value);
  options.forEach(option => {
    option.disabled = disableOthers;
  });
}
</script>

在这个例子中，当你切换选择的 radio，`handleRadioChange`会被触发，它会检查所有选项中是否有相同的值（也就是已选中的选项），如果有，则将所有非该选项都设置为 `disabled` 状态，反之则全部启用。