X-Financial/web/src/components/shared/EnterpriseSelect.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'
import { ElSelect, ElOption } from 'element-plus/es/components/select/index.mjs'

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>