feat: ✨ 字典组件支持Number类型

https://gitee.com/youlaiorg/vue3-element-admin/issues/I7N3DO #I7N3DO

Former-commit-id: 68a8da9e2d19e2ab3f842d3d97fb8850406d30c3

src/components/Dictionary/index.vue

@@ -5,6 +5,7 @@
       :placeholder="placeholder"
       :disabled="disabled"
       clearable
+      @change="handleChange"
     >
       <el-option
         v-for="option in options"
@@ -20,6 +21,9 @@
 import { getDictOptions } from "@/api/dict";
 
 const props = defineProps({
+  /**
+   * 字典类型编码(eg: 性别-gender)
+   */
   typeCode: {
     type: String,
     required: true,
@@ -38,11 +42,15 @@ const props = defineProps({
   },
 });
 
-const emits = defineEmits(["update:modelValue"]);
+const emits = defineEmits(["update:modelValue"]); // 父组件监听事件，同步子组件值的变化给父组件
 
-const selectedValue = useVModel(props, "modelValue", emits);
+const options: Ref<OptionType[]> = ref([]); // 字典下拉数据源
 
-const options: Ref<OptionType[]> = ref([]);
+const selectedValue = computed(() => props.modelValue.toString()); // 将父组件的值统一转化String和下拉数据源进行比较，避免值的类型不一致导致回显失败
+
+function handleChange(val?: string) {
+  emits("update:modelValue", val);
+}
 
 onBeforeMount(() => {
   // 根据字典类型编码(typeCode)获取字典选项