chat-admin/src/components/EnumSelect.vue

<template>
    <ElSelect
        :modelValue="modelValue"
        @change="change"
        :placeholder="placeholder"
        :clearable="clearable"
        @clear="clear"
        :multiple="multiple"
        :multipleLimit="multipleLimit"
    >
        <ElOption v-for="item in options" :key="item.value" :value="item.value" :label="item.label" />
    </ElSelect>
</template>
<script setup>
import { computed, defineEmits } from 'vue'

const props = defineProps({
    enum: {
        type: Object,
        required: true
    },
    modelValue: {},
    placeholder: {
        type: String,
        default: '请选择'
    },
    clearable: {
        type: Boolean,
        default: true
    },
    multiple: {
        type: Boolean,
        default: false
    },
    multipleLimit: {}
})
const emit = defineEmits(['update:modelValue'])
const options = computed(() => {
    return Object.keys(props.enum).map((key) => {
        return {
            label: props.enum[key],
            value: key
        }
    })
})
function change(value) {
    emit('update:modelValue', value)
}
function clear() {
    emit('update:modelValue', null)
}
</script>