vue3 ts + Ant Design 的Select的使用

<script setup lang="ts">
import type { SelectProps } from 'ant-design-vue'
import type { SelectValue } from 'ant-design-vue/es/select'

let searchGoodShop = ref<string | unknown>('请选择店铺')

// 商铺下的店铺列表
const goodShopList =  ref<SelectProps['options']>([])

// 获取商铺下的店铺列表
const getGoodShopList = async (params: { Authorization: unknown }) => {
  try {
    let { data } = await goodsApi.getShopList(params)
    if (data.code === 0) {
      goodShopList.value = data?.data?.list.map((item: { [propName: string]: any }) => {
        return {
          label: item.shop_name,
          value: item.authorize_id,
        }
      })
      // console.log('goodShopList=', goodShopList.value)
    } else {
      message.error(data.msg)
    }
  } catch (error) {
    message.error('网络连接失败~')
  }
}

const selectGoodShop = (selectValue: unknown) => {
  searchGoodShop.value = selectValue
}


const reset = () => {
  searchGoodShop.value = '请选择店铺'
}
</script>


<template>
	<a-select
	  style="width: 150px; margin-right: 10px"
	  :value="(searchGoodShop as SelectValue)"
	  allowClear
	  show-search
	  @change="selectGoodShop"
	>
	  <a-select-option v-for="(item, index) in goodShopList" :key="index" :value="item.value">
	    {{ item.label }}
	  </a-select-option>
	</a-select>


	 <a-button @click="reset">重置</a-button>
</template>