webb2b/src/packages/pc/components/modules/address/index.vue

<template>
    <el-select class="app-address" value-key="autoid" :placeholder="placeholder" v-model="selectedItem" @change="onChange"
        @clear="onChange" clearable>
        <el-option class="app-address-item" v-for="(item, i) in dataList" :key="i"
            :label="[item.provincename, item.cityname, item.districtname, item.address].join(' ')" :value="item" />
    </el-select>
</template>

<script lang="ts" setup>
import { shallowRef } from 'vue'
import { queryUserReceiveInfo } from '@/services/api/user'

const props = defineProps({
    modelValue: Number,
    placeholder: {
        type: String,
        default: '请选择'
    }
})

const emit = defineEmits(['update:modelValue', 'change'])
const dataList = shallowRef<Ermcp.UserReceiveInfoRsp[]>([])
const selectedItem = shallowRef<Ermcp.UserReceiveInfoRsp>()

const onChange = (item?: Ermcp.UserReceiveInfoRsp) => {
    emit('update:modelValue', item?.autoid)
    emit('change', item)
}

queryUserReceiveInfo().then((res) => {
    dataList.value = res.data
    selectedItem.value = res.data.find((e) => e.autoid === props.modelValue)
})
</script>

<style lang="less">
@import './index.less';
</style>