fix: 🐛 修复字典组件初始值无法回显问题
This commit is contained in:
@@ -52,7 +52,6 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, watch, onBeforeMount } from "vue";
|
|
||||||
import { useDictStore } from "@/store";
|
import { useDictStore } from "@/store";
|
||||||
|
|
||||||
const dictStore = useDictStore();
|
const dictStore = useDictStore();
|
||||||
@@ -109,7 +108,24 @@ watch(
|
|||||||
if (props.type === "checkbox") {
|
if (props.type === "checkbox") {
|
||||||
selectedValue.value = Array.isArray(newValue) ? newValue : [];
|
selectedValue.value = Array.isArray(newValue) ? newValue : [];
|
||||||
} else {
|
} else {
|
||||||
selectedValue.value = newValue;
|
selectedValue.value = newValue?.toString() || "";
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ immediate: true }
|
||||||
|
);
|
||||||
|
|
||||||
|
// 监听 options 变化并重新匹配 selectedValue
|
||||||
|
watch(
|
||||||
|
() => options.value,
|
||||||
|
(newOptions) => {
|
||||||
|
// options 加载后,确保 selectedValue 可以正确匹配到 options
|
||||||
|
if (newOptions.length > 0 && selectedValue.value !== undefined) {
|
||||||
|
const matchedOption = newOptions.find(
|
||||||
|
(option) => option.value === selectedValue.value
|
||||||
|
);
|
||||||
|
if (!matchedOption) {
|
||||||
|
selectedValue.value = ""; // 如果找不到匹配项,清空选中
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
@@ -120,17 +136,7 @@ function handleChange(val: any) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 获取字典数据
|
// 获取字典数据
|
||||||
onBeforeMount(async () => {
|
onMounted(() => {
|
||||||
options.value = await dictStore.getDictionary(props.code);
|
options.value = dictStore.getDictionary(props.code);
|
||||||
|
|
||||||
if (props.modelValue !== undefined) {
|
|
||||||
if (props.type === "checkbox") {
|
|
||||||
selectedValue.value = Array.isArray(props.modelValue)
|
|
||||||
? props.modelValue
|
|
||||||
: [];
|
|
||||||
} else {
|
|
||||||
selectedValue.value = props.modelValue;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Reference in New Issue
Block a user