1
This commit is contained in:
@@ -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)
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user