<template>
<a-select v-bind="$attrs">
<a-select-option v-for="item in props.options" :key="item[prop.id]" :value="item[prop.value]" :disabled="item[prop.disabled]">{{item[prop.label]}}</a-select-option>
</a-select>
</template>
<!--
拓展 a-select 组件
options 选择的数据
prop Object 显示字段名称
-->
<script setup lang="ts">
import {computed, withDefaults, readonly} from 'vue';
interface Prop {
id: string
value: string
label: string
disabled: string
}
type Options = Array<{
[k: string] : unknown
}>
const props = withDefaults(
defineProps<{
prop?: Prop
options: Options
}>(),
{
prop: undefined,
}
)
// 默认使用字段名
const defaultProp = readonly({
id: "id",
value: "value",
label: "label",
disabled: "disabled",
})
// 使用字段名 = 默认使用字段名与合并传入的字段名
const prop = computed<Prop>(()=>{
let prop = {...defaultProp}
if(props.prop){
prop = { ...prop, ...props.prop }
}
return {...defaultProp}
})
</script>
<style lang='less' scoped>
</style>
04-28