Cheng Zhou
50 lines
1.3 KiB
Vue
50 lines
1.3 KiB
Vue
<template>
|
|
<el-select
|
|
:model-value="modelValue"
|
|
:multiple="multiple"
|
|
:placeholder="placeholder || TEXT.common.placeholders.select"
|
|
:filterable="filterable"
|
|
:clearable="clearable"
|
|
:loading="loading"
|
|
style="width: 100%"
|
|
@update:model-value="onUpdate"
|
|
>
|
|
<el-option v-for="opt in options" :key="String(opt.value)" :label="opt.label" :value="opt.value" />
|
|
<slot />
|
|
</el-select>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from "vue";
|
|
import { TEXT } from "../../locales";
|
|
|
|
type OptionItem = {
|
|
label: string;
|
|
value: string | number;
|
|
};
|
|
|
|
const props = defineProps<{
|
|
modelValue?: string | number | Array<string | number> | null;
|
|
options?: OptionItem[];
|
|
multiple?: boolean;
|
|
placeholder?: string;
|
|
filterable?: boolean;
|
|
clearable?: boolean;
|
|
loading?: boolean;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
(event: "update:modelValue", value: string | number | Array<string | number> | null): void;
|
|
}>();
|
|
|
|
const onUpdate = (value: string | number | Array<string | number> | null) => {
|
|
emit("update:modelValue", value);
|
|
};
|
|
|
|
const options = computed(() => props.options ?? []);
|
|
const multiple = computed(() => props.multiple ?? false);
|
|
const filterable = computed(() => props.filterable ?? true);
|
|
const clearable = computed(() => props.clearable ?? true);
|
|
const loading = computed(() => props.loading ?? false);
|
|
</script>
|