diff --git a/src/components/GuipRadio.vue b/src/components/GuipRadio.vue index 8a7baa0..e5b286c 100644 --- a/src/components/GuipRadio.vue +++ b/src/components/GuipRadio.vue @@ -1,18 +1,14 @@ @@ -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] + }, }, }; diff --git a/src/views/elementGroups.vue b/src/views/elementGroups.vue index 3d5a520..28e52b7 100644 --- a/src/views/elementGroups.vue +++ b/src/views/elementGroups.vue @@ -14,6 +14,12 @@ @change="radioChange" :rules="rules.language" />
+ + +
+
@@ -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]);