kuailelunwen_new_houtai/src/components/GuipRadio.vue

   <template>
    <el-form-item
    :class="[{'column':column},'form-item']"
    :label="label" :prop="prop" :rules="rules">
      <el-radio-group
        v-model="selectedValue"
        @change="handleChange"
      >
        <el-radio
          v-for="option in options"
          :key="option.value"
          :label="option.value"
          :disabled="option.disabled"
        >
        <!-- 默认展示和选中显示 不同文案 -->
          {{ selectedValue === option.value ? option.selectedLabel : option.label }}
          <!-- 自定义 选中图标 -->
          <!-- <template #label>
            <span><img src="../assets/radio_checked.svg" alt="custom icon" style="width: 16px; height: 16px;"> {{ text }}</span>
          </template> -->
        </el-radio>
      </el-radio-group>
    </el-form-item>
  </template>
  
  <script>
  export default {
    name: 'MyRadioGroup',
    props: {
      // 是否是纵向排列
      column:{
        type:Boolean,
        default:false
      },
      // 选项列表，格式为 [{ label: '显示文本', value: '值', disabled: false }]
      options: {
        type: Array,
        required: true,
      },
      // 当前选中的值，使用 v-model 绑定
      value: {
        type: [String, Number, Boolean],
        default: '',
      },
      // 表单项的 label
      label: {
        type: String,
        default: '',
      },
      // 表单项的 prop（用于表单校验）
      prop: {
        type: String,
        default: '',
      },
      // 校验规则
      rules: {
        type: Array,
        default: () => [],
      },
    },
    data() {
      return {
        selectedValue: this.value, // 内部维护的选中值
      };
    },
    watch: {
      // 监听外部传入的 value 变化，更新内部 selectedValue
      value(newVal) {
        this.selectedValue = newVal;
      },
    },
    methods: {
      // 选中值变化时触发
      handleChange(value) {
        this.$emit('input', value); // 更新 v-model
        this.$emit('change', value); // 触发 change 事件
      },
    },
  };
  </script>
  
  <style scoped>
  /* 自定义样式 */
  .el-radio-group {
    margin: 10px 0;
  }
  </style>