index.vue

<template>
    <selector v-model="valueSync" :options="countryList" value-field="tel" key-field="id" :label-field="item => $l(item, 'name') + ' +' + item.tel" filterable clearable :disabled="disabled"></selector>
</template>
<script>
import {getCountryListAll} from '@/api/ecw/country'
import selector from '@/components/Selector'
export default {
    components: {selector},
    props: {
        value: String,
        disabled: Boolean
    },
    data(){
        return {
            valueSync: '',
            countryList:[]
        }
    },
    watch:{
        valueSync(){
            this.$emit('input', this.valueSync.replace('+', ''))
        },
        value(){
            if(this.value)this.valueSync = this.value
        }
    },
    created(){
        if(this.value){
            this.valueSync = this.value
        }
        getCountryListAll().then(res => {
          this.countryList = res.data.map(item => {
            item.tel = item.tel.replace('+', '')
            return item
          })
        })
    },
    methods:{

    }
}
</script>