二次封装 antd-v a-select

<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>