fix(form-create): 修复字典选择器 modelValue 回显兼容

- Vben5 web-ele 使用默认 modelValue 绑定,修正相关注释避免误用 model-value
- Vben5 web-antd 保留 value 绑定并明确组件库差异
- Vue3 DictSelect 显式接收 modelValue 并派发 update:modelValue,避免选择值更新后回显异常
master
YunaiV 2026-05-31 17:16:17 +08:00
parent e6c0976c52
commit 595b8c5bb4
1 changed files with 40 additions and 3 deletions

View File

@ -1,6 +1,12 @@
<!-- 数据字典 Select 选择器 -->
<template>
<el-select v-if="selectType === 'select'" class="w-1/1" v-bind="attrs">
<el-select
v-if="selectType === 'select'"
v-model="selectedValue"
class="w-1/1"
v-bind="attrs"
@change="handleChange"
>
<el-option
v-for="(dict, index) in getDictOptions"
:key="index"
@ -8,12 +14,24 @@
:value="dict.value"
/>
</el-select>
<el-radio-group v-if="selectType === 'radio'" class="w-1/1" v-bind="attrs">
<el-radio-group
v-if="selectType === 'radio'"
v-model="selectedValue"
class="w-1/1"
v-bind="attrs"
@change="handleChange"
>
<el-radio v-for="(dict, index) in getDictOptions" :key="index" :value="dict.value">
{{ dict.label }}
</el-radio>
</el-radio-group>
<el-checkbox-group v-if="selectType === 'checkbox'" class="w-1/1" v-bind="attrs">
<el-checkbox-group
v-if="selectType === 'checkbox'"
v-model="selectedValue"
class="w-1/1"
v-bind="attrs"
@change="handleChange"
>
<el-checkbox
v-for="(dict, index) in getDictOptions"
:key="index"
@ -33,6 +51,7 @@ const attrs = useAttrs()
//
interface Props {
dictType: string //
modelValue?: any // form-create modelValue
valueType?: 'str' | 'int' | 'bool' //
selectType?: 'select' | 'radio' | 'checkbox' // select checkbox radio
formCreateInject?: any
@ -43,6 +62,20 @@ const props = withDefaults(defineProps<Props>(), {
selectType: 'select'
})
const emit = defineEmits<{
(e: 'update:modelValue', value: any): void
}>()
const selectedValue = ref<any>()
watch(
() => props.modelValue,
(newValue) => {
selectedValue.value = newValue
},
{ immediate: true }
)
//
const getDictOptions = computed(() => {
switch (props.valueType) {
@ -56,4 +89,8 @@ const getDictOptions = computed(() => {
return []
}
})
const handleChange = (value: any) => {
emit('update:modelValue', value)
}
</script>