79 lines
1.8 KiB
Vue
79 lines
1.8 KiB
Vue
<template>
|
|
<el-select
|
|
v-model="selectedValue"
|
|
:placeholder="placeholder"
|
|
:disabled="disabled"
|
|
clearable
|
|
@change="handleChange"
|
|
>
|
|
<el-option
|
|
v-for="option in options"
|
|
:key="option.value"
|
|
:label="option.label"
|
|
:value="option.value"
|
|
/>
|
|
</el-select>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import DictDataAPI from "@/api/dict-data";
|
|
|
|
const props = defineProps({
|
|
code: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
modelValue: {
|
|
type: [String, Number],
|
|
required: false,
|
|
},
|
|
placeholder: {
|
|
type: String,
|
|
default: "请选择",
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
});
|
|
|
|
// 使用 defineEmits 声明 emits
|
|
const emit = defineEmits(["update:modelValue"]);
|
|
|
|
// 下拉框选项
|
|
const options = ref<Array<{ label: string; value: string | number }>>([]);
|
|
const selectedValue = ref<string | number | undefined>(props.modelValue);
|
|
|
|
// 监听 modelValue 变化
|
|
watch(
|
|
() => props.modelValue,
|
|
(newValue) => {
|
|
// 类型转换确保 selectedValue 和 option.value 类型一致
|
|
if (typeof options.value[0]?.value === "number") {
|
|
selectedValue.value = Number(newValue);
|
|
} else {
|
|
selectedValue.value = String(newValue);
|
|
}
|
|
}
|
|
);
|
|
|
|
// 监听 selectedValue 的变化并触发 update:modelValue
|
|
function handleChange(val?: string | number) {
|
|
emit("update:modelValue", val);
|
|
}
|
|
|
|
// 获取字典数据
|
|
onBeforeMount(async () => {
|
|
const data = await DictDataAPI.getOptions(props.code);
|
|
options.value = data;
|
|
// 初次加载时处理类型一致性
|
|
if (props.modelValue !== undefined) {
|
|
if (typeof options.value[0]?.value === "number") {
|
|
selectedValue.value = Number(props.modelValue);
|
|
} else {
|
|
selectedValue.value = String(props.modelValue);
|
|
}
|
|
}
|
|
});
|
|
</script>
|