You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
73 lines
2.0 KiB
73 lines
2.0 KiB
<template>
|
|
<component :is="render" />
|
|
</template>
|
|
<script setup lang="jsx">
|
|
import { ElSelect, ElOption } from 'element-plus/es/components/select/index';
|
|
import 'element-plus/es/components/select/style/css';
|
|
const props = defineProps({
|
|
opts: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
clearable: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
filterable: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
config: {
|
|
type: Object,
|
|
default() {
|
|
return {
|
|
label: 'label',
|
|
value: 'value',
|
|
disabled: 'disabled',
|
|
};
|
|
},
|
|
},
|
|
});
|
|
const slots = useSlots();
|
|
let config = {
|
|
label: 'label',
|
|
value: 'value',
|
|
disabled: 'disabled',
|
|
...props.config,
|
|
};
|
|
function handleItemDisabled(item, index) {
|
|
let res = false;
|
|
if (config.disabled instanceof Function) {
|
|
res = config.disabled(item, index);
|
|
} else {
|
|
res = !!item[config.disabled];
|
|
}
|
|
return res;
|
|
}
|
|
const opts = computed(() =>
|
|
props.opts.map((item) => {
|
|
return typeof item !== 'object' ? { label: item, value: item } : item;
|
|
})
|
|
);
|
|
const render = () => (
|
|
<ElSelect
|
|
{...props}
|
|
v-slots={{
|
|
default: () =>
|
|
unref(opts).map((item, index) => (
|
|
<ElOption
|
|
label={item[config.label]}
|
|
value={item[config.value]}
|
|
disabled={handleItemDisabled(item, index)}
|
|
>
|
|
{slots.option?.(item, index) || item[config.label]}
|
|
</ElOption>
|
|
)),
|
|
...slots,
|
|
}}
|
|
></ElSelect>
|
|
);
|
|
</script>
|
|
|
|
<style lang="less" scoped></style>
|