73 lines
1.7 KiB
Vue
73 lines
1.7 KiB
Vue
|
<template>
|
||
|
|
<ElSelect
|
||
|
|
class="enterprise-select"
|
||
|
|
popper-class="enterprise-select-popper"
|
||
|
|
:model-value="modelValue"
|
||
|
|
:placeholder="placeholder"
|
||
|
|
:disabled="disabled"
|
||
|
|
:clearable="clearable"
|
||
|
|
:filterable="filterable"
|
||
|
|
:size="size"
|
||
|
|
:teleported="teleported"
|
||
|
|
@change="handleChange"
|
||
|
|
>
|
||
|
|
<ElOption
|
||
|
|
v-for="option in normalizedOptions"
|
||
|
|
:key="option.key"
|
||
|
|
:label="option.label"
|
||
|
|
:value="option.value"
|
||
|
|
:disabled="option.disabled"
|
||
|
|
/>
|
||
|
|
</ElSelect>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { computed } from 'vue'
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
modelValue: { type: [String, Number, Boolean], default: '' },
|
||
|
|
options: { type: Array, required: true },
|
||
|
|
placeholder: { type: String, default: '请选择' },
|
||
|
|
disabled: { type: Boolean, default: false },
|
||
|
|
clearable: { type: Boolean, default: false },
|
||
|
|
filterable: { type: Boolean, default: false },
|
||
|
|
size: { type: String, default: 'default' },
|
||
|
|
teleported: { type: Boolean, default: true }
|
||
|
|
})
|
||
|
|
|
||
|
|
const emit = defineEmits(['update:modelValue', 'change'])
|
||
|
|
|
||
|
|
const normalizedOptions = computed(() =>
|
||
|
|
props.options.map((option, index) => {
|
||
|
|
if (option && typeof option === 'object') {
|
||
|
|
const value = option.value ?? option.label ?? ''
|
||
|
|
|
||
|
|
return {
|
||
|
|
key: `${value}-${index}`,
|
||
|
|
label: String(option.label ?? value),
|
||
|
|
value,
|
||
|
|
disabled: Boolean(option.disabled)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
key: `${option}-${index}`,
|
||
|
|
label: String(option),
|
||
|
|
value: option,
|
||
|
|
disabled: false
|
||
|
|
}
|
||
|
|
})
|
||
|
|
)
|
||
|
|
|
||
|
|
function handleChange(value) {
|
||
|
|
emit('update:modelValue', value)
|
||
|
|
emit('change', value)
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.enterprise-select {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
</style>
|