NationalitySelector.vue 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. <script setup lang="ts">
  2. import { fetchtNationalityList } from '@/api/modules/anycallService'
  3. // 定义组件属性
  4. interface Props {
  5. modelValue?: string
  6. disabled?: boolean
  7. placeholder?: string
  8. style?: string | object
  9. className?: string
  10. }
  11. // 定义组件事件
  12. interface Emits {
  13. (e: 'update:modelValue', value: string | undefined): void
  14. (e: 'update:key', value: string | undefined): void
  15. }
  16. // 设置默认属性
  17. const props = withDefaults(defineProps<Props>(), {
  18. disabled: false,
  19. placeholder: '请选择',
  20. style: 'width: 140px;',
  21. })
  22. // 定义事件触发器
  23. const emit = defineEmits<Emits>()
  24. // 创建本地响应式变量用于v-model绑定
  25. const localValue = ref(props.modelValue)
  26. // 监听props中的modelValue变化,同步到本地变量
  27. watch(
  28. () => props.modelValue,
  29. (newValue) => {
  30. localValue.value = newValue
  31. },
  32. { immediate: true }
  33. )
  34. const options = ref<Array<{value: string, name: string}>>([])
  35. const fetchData = async () => {
  36. try {
  37. const res = await fetchtNationalityList()
  38. if (res.code === 0) {
  39. console.log(res.data,3333)
  40. options.value = res.data
  41. // // 将API返回的数据转换为select需要的格式
  42. // options.value = res.data.content.map((item: any) => ({
  43. // value: item.id,
  44. // name: item.name
  45. // }))
  46. } else {
  47. console.error('获取 I18n 失败:', res.msg)
  48. }
  49. } catch (error) {
  50. console.error('获取 I18n 失败:', error)
  51. }
  52. }
  53. onMounted(() => {
  54. fetchData()
  55. })
  56. const updateModelValue = (value: string) => {
  57. emit('update:modelValue', value)
  58. const f = options.value.find(item => item.value === value)
  59. if(f){
  60. emit('update:key', f.name)
  61. }
  62. }
  63. </script>
  64. <template>
  65. <el-select
  66. v-model="localValue"
  67. :placeholder="placeholder"
  68. :style="style"
  69. :disabled="disabled"
  70. :class="className"
  71. clearable
  72. filterable
  73. @update:model-value="updateModelValue"
  74. >
  75. <el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.value" />
  76. </el-select>
  77. </template>