el-radio-group 校验满足条件才能切换

`el-radio-group` 是 Element UI 提供的一个单选框组组件，它通常用于展示一组选项让用户选择其中一项。如果需要对用户的选取进行校验，确保用户选择的值满足某些条件才能允许切换（例如必填项、特定范围的数值等），你可以结合 Vue 的数据绑定和 `v-model` 指令以及自定义事件来进行控制。

首先，在模板里，设置 `el-radio-group` 的 `v-model` 绑定到一个变量，如 `selectedOption`：

<el-radio-group v-model="selectedOption" @change="handleChange">
  <el-radio v-for="option in options" :key="option.value" :label="option.value">{{ option.label }}</el-radio>
</el-radio-group>

然后，在你的 Vue 实例中，定义一个数组 `options` 作为可选项，并实现 `handleChange` 方法来处理用户的选择：

export default {
  data() {
    return {
      selectedOption: '',
      options: [
        { value: 'value1', label: '选项1', required: true }, // 添加 "required" 属性表示是否必要填写
        { value: 'value2', label: '选项2', min: 10, max: 20 }   // 如果需要限制范围，可以添加 "min" 和 "max" 属性
      ]
    };
  },
  methods: {
    handleChange(value) {
      if (value.required && !this.selectedOption) {
        this.$message.error('请选择有效选项');
        return;
      }
      if (value.min && value.max && !(this.selectedOption >= value.min && this.selectedOption <= value.max)) {
        this.$message.error(`请输入在 ${value.min}-${value.max} 范围内的数字`);
        return;
      }
      // 校验通过，这里可以进一步处理或者提交数据
      console.log('选项已选择:', value);
    }
  }
};

在这个例子中，当用户尝试切换到新的选项时，会触发 `handleChange` 方法，检查当前选项是否满足 `required` 或者 `min`/`max` 的条件。如果不满足，就显示错误消息并阻止切换。只有当所有条件都满足时，才视为选择有效，可以继续后续操作。