kuailelunwen_new_houtai/src/components/GuipRadio.vue

<template>
  <el-form-item
  :class="[{'column':column},'form-item']"
  :label="label" :prop="prop" :rules="rules" :required="required">
    <el-radio-group
      v-model="selectedValue"
      v-bind="$attrs"
      @change="handleChange"
    >
      <el-radio
        v-for="option in options"
        :key="option.value"
        :label="option.value"
        :disabled="option.disabled"
      >
      <!-- 默认展示和选中显示 不同文案 -->
        {{( selectedValue === option.value ) ? (option.selectedLabel ? option.selectedLabel : option.label) :option.label }}
      </el-radio>
    </el-radio-group>
  </el-form-item>
</template>

<script>
export default {
  name: 'MyRadioGroup',
  props: {
    // 是否是纵向排列
    column:{
      type:String,
      default:''
    },
    required:{
      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>