This commit is contained in:
张成
2025-11-06 14:59:12 +08:00
parent 6953193cf5
commit 84563bafa1

View File

@@ -3,12 +3,13 @@
<!-- 使用组件映射表来简化条件渲染 -->
<component
:is="getComponentName(col.com)"
v-model="value"
:value="col.com === 'Radio' ? radioValue : value"
v-bind="getComponentProps(col)"
:disabled="disabled"
:class="getComponentClass(col.com)"
:style="getComponentStyle(col.com)"
@input="handleInput"
@on-change="handleChange"
@change="handleChange"
>
<!-- Select 组件的选项 -->
@@ -25,11 +26,11 @@
<!-- Radio 组件的选项 -->
<template v-else-if="col.com === 'Radio'">
<Radio
:label="item.key"
:key="item.key"
v-for="item in col.source"
:label="getRadioValue(item)"
:key="getRadioKey(item)"
v-for="item in getRadioSource(col)"
>
{{ item.value }}
{{ getRadioLabel(item) }}
</Radio>
</template>
@@ -92,6 +93,27 @@ export default {
icons: []
}
},
computed: {
// 确保 Radio 的值类型正确
radioValue() {
if (this.col.com === 'Radio') {
const source = this.getRadioSource(this.col)
if (source.length > 0 && this.value !== undefined && this.value !== null) {
const firstItem = source[0]
const firstValue = this.getRadioValue(firstItem)
// 如果第一个选项的值是数字类型,确保 value 也是数字
if (typeof firstValue === 'number') {
return Number(this.value)
}
// 如果第一个选项的值是字符串类型,确保 value 也是字符串
if (typeof firstValue === 'string') {
return String(this.value)
}
}
}
return this.value
}
},
mounted() {
// 安全处理图标数据
if (Array.isArray(icons)) {
@@ -135,6 +157,7 @@ export default {
// 移除不需要传递给组件的属性
delete baseProps.com
delete baseProps.source
delete baseProps.options
delete baseProps.editRender
delete baseProps.inLine
delete baseProps.display
@@ -162,6 +185,59 @@ export default {
return baseProps
},
// 获取 Radio 数据源(支持 source 和 options 两种格式)
getRadioSource(col) {
return col.source || col.options || []
},
// 获取 Radio 选项的值(支持多种数据格式)
getRadioValue(item) {
// 支持 { key: value, value: label } 格式
if (item.key !== undefined) {
return item.key
}
// 支持 { value: value, label: label } 格式
if (item.value !== undefined) {
return item.value
}
// 支持字符串数组
if (typeof item === 'string' || typeof item === 'number') {
return item
}
return item
},
// 获取 Radio 选项的 key用于 v-for
getRadioKey(item) {
if (item.key !== undefined) {
return item.key
}
if (item.value !== undefined) {
return item.value
}
if (typeof item === 'string' || typeof item === 'number') {
return item
}
return JSON.stringify(item)
},
// 获取 Radio 选项的显示文本
getRadioLabel(item) {
// 支持 { key: value, value: label } 格式
if (item.value !== undefined && typeof item.value === 'string') {
return item.value
}
// 支持 { value: value, label: label } 格式
if (item.label !== undefined) {
return item.label
}
// 支持字符串数组
if (typeof item === 'string' || typeof item === 'number') {
return item
}
return item.value || item.key || item
},
// 获取组件样式类
getComponentClass(componentType) {
const classMap = {
@@ -184,11 +260,39 @@ export default {
// 处理输入事件
handleInput(value) {
// 确保 Radio 的值类型正确
if (this.col.com === 'Radio') {
const source = this.getRadioSource(this.col)
if (source.length > 0) {
const firstItem = source[0]
// 如果第一个选项的值是数字类型,确保 value 也是数字
const firstValue = this.getRadioValue(firstItem)
if (typeof firstValue === 'number' && typeof value === 'string') {
value = Number(value)
} else if (typeof firstValue === 'string' && typeof value === 'number') {
value = String(value)
}
}
}
this.$emit('input', value)
},
// 处理变化事件
handleChange(value) {
// 确保 Radio 的值类型正确
if (this.col.com === 'Radio') {
const source = this.getRadioSource(this.col)
if (source.length > 0) {
const firstItem = source[0]
// 如果第一个选项的值是数字类型,确保 value 也是数字
const firstValue = this.getRadioValue(firstItem)
if (typeof firstValue === 'number' && typeof value === 'string') {
value = Number(value)
} else if (typeof firstValue === 'string' && typeof value === 'number') {
value = String(value)
}
}
}
this.$emit('change', value)
}
}