fix(form-create): 修复字典选择器 modelValue 回显兼容
- Vben5 web-ele 使用默认 modelValue 绑定,修正相关注释避免误用 model-value - Vben5 web-antd 保留 value 绑定并明确组件库差异 - Vue3 DictSelect 显式接收 modelValue 并派发 update:modelValue,避免选择值更新后回显异常pull/881/head
parent
e6c0976c52
commit
595b8c5bb4
|
|
@ -1,6 +1,12 @@
|
||||||
<!-- 数据字典 Select 选择器 -->
|
<!-- 数据字典 Select 选择器 -->
|
||||||
<template>
|
<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
|
<el-option
|
||||||
v-for="(dict, index) in getDictOptions"
|
v-for="(dict, index) in getDictOptions"
|
||||||
:key="index"
|
:key="index"
|
||||||
|
|
@ -8,12 +14,24 @@
|
||||||
:value="dict.value"
|
:value="dict.value"
|
||||||
/>
|
/>
|
||||||
</el-select>
|
</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">
|
<el-radio v-for="(dict, index) in getDictOptions" :key="index" :value="dict.value">
|
||||||
{{ dict.label }}
|
{{ dict.label }}
|
||||||
</el-radio>
|
</el-radio>
|
||||||
</el-radio-group>
|
</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
|
<el-checkbox
|
||||||
v-for="(dict, index) in getDictOptions"
|
v-for="(dict, index) in getDictOptions"
|
||||||
:key="index"
|
:key="index"
|
||||||
|
|
@ -33,6 +51,7 @@ const attrs = useAttrs()
|
||||||
// 接受父组件参数
|
// 接受父组件参数
|
||||||
interface Props {
|
interface Props {
|
||||||
dictType: string // 字典类型
|
dictType: string // 字典类型
|
||||||
|
modelValue?: any // 选中值,由 form-create 默认 modelValue 绑定
|
||||||
valueType?: 'str' | 'int' | 'bool' // 字典值类型
|
valueType?: 'str' | 'int' | 'bool' // 字典值类型
|
||||||
selectType?: 'select' | 'radio' | 'checkbox' // 选择器类型,下拉框 select、多选框 checkbox、单选框 radio
|
selectType?: 'select' | 'radio' | 'checkbox' // 选择器类型,下拉框 select、多选框 checkbox、单选框 radio
|
||||||
formCreateInject?: any
|
formCreateInject?: any
|
||||||
|
|
@ -43,6 +62,20 @@ const props = withDefaults(defineProps<Props>(), {
|
||||||
selectType: 'select'
|
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(() => {
|
const getDictOptions = computed(() => {
|
||||||
switch (props.valueType) {
|
switch (props.valueType) {
|
||||||
|
|
@ -56,4 +89,8 @@ const getDictOptions = computed(() => {
|
||||||
return []
|
return []
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const handleChange = (value: any) => {
|
||||||
|
emit('update:modelValue', value)
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue