radio增加自定义属性取值

src/components/GuipRadio.vue

@@ -1,18 +1,14 @@
 <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-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"
+        v-for="option in processedOptions"
+        :key="getValue(option)"
+        :label="getValue(option)"
         :disabled="option.disabled"
-      >{{( selectedValue === option.value ) ? (option.selectedLabel ? option.selectedLabel : option.label) :option.label }}</el-radio>
+      >
+        {{ getLabel(option) }}
+      </el-radio>
     </el-radio-group>
   </el-form-item>
 </template>
@@ -55,6 +51,33 @@ export default {
       type: Array,
       default: () => [],
     },
+    labelKey: {
+      type: String,
+      default: 'label'
+    },
+    // 自定义value的字段名
+    valueKey: {
+      type: String,
+      default: 'value'
+    },
+    // 格式化label的函数
+    formatter: {
+      type: Function,
+      default: null
+    }
+  },
+  computed: {
+    processedOptions() {
+      return this.options.map(option => {
+        if (this.formatter) {
+          return {
+            ...option,
+            formattedLabel: this.formatter(option)
+          }
+        }
+        return option
+      })
+    }
   },
   data() {
     return {
@@ -73,6 +96,13 @@ export default {
       this.$emit('input', value); // 更新 v-model
       this.$emit('change', value); // 触发 change 事件
     },
+    getLabel(option) {
+      if (this.formatter) return option.formattedLabel || this.formatter(option)
+      return option[this.labelKey]
+    },
+    getValue(option) {
+      return option[this.valueKey]
+    },
   },
 };
 </script>

src/views/elementGroups.vue

@@ -14,6 +14,12 @@
                         @change="radioChange" :rules="rules.language" />
                 </div>
                 <div class="ele-item">
+                    <label for="">单选框11：</label>
+                    <GuipRadio v-model="form.language" :options="languageOptions" label="自定义属性" prop="language"
+                        @change="radioChange" :rules="rules.language" label-key="name"  :formatter="formatLabel"
+                        value-key="id" />
+                </div>
+                <div class="ele-item">
                     <label for="">下拉框：</label>
                     <GuipSelect width="600px" v-model="form.card" clearable label="卡片" :default-value="form.card"
                         prop="card" :options="options" valueKey="id1" labelKey="id2" />
@@ -609,10 +615,10 @@ export default {
                 input3: '',
             },
             languageOptions: [
-                { label: 'JavaScript', value: 'js', selectedLabel: 'JavaScripthhhhhhhhhh' },
-                { label: 'Python', value: 'py', selectedLabel: 'JavaScripthhhhhhhhhh' },
-                { label: 'Java', value: 'java', disabled: true, selectedLabel: 'JavaScripthhhhhhhhhh' }, // 禁用选项
-                { label: 'Go', value: 'go', selectedLabel: 'JavaScripthhhhhhhhhh' },
+                { label: 'JavaScript', value: 'js', selectedLabel: 'JavaScripthhhhhhhhhh',id:'1',name:'麻辣烫' },
+                { label: 'Python', value: 'py', selectedLabel: 'JavaScripthhhhhhhhhh',id:'10',name:'易烊千玺' },
+                { label: 'Java', value: 'java', disabled: true, selectedLabel: 'JavaScripthhhhhhhhhh',id:'11',name:'王鹤di' }, // 禁用选项
+                { label: 'Go', value: 'go', selectedLabel: 'JavaScripthhhhhhhhhh',id:'12',name:'王俊凯' },
             ],
             rules: {
                 username: [
@@ -872,6 +878,10 @@ export default {
         }
     },
     methods: {
+        // 自定义的radio label 展示内容
+        formatLabel(option) {
+            return `${option.name} (ID: ${option.id})`;
+        },
         findItemById(valueKey, key) {
             // 自动查找选中项 
             return this.domainOptions.find(item => item[valueKey] === this.form[key]);