封装el-select（全球国家名字及国家区号），select 输入框回显

首先》 网上找了个 全球国家名字对应其电话区号的 json文件

 

修修改改，整理整理，格式化一下，漂亮多了；

 

 然后进入正题：

1，搞个独立下拉框组件出来，

2，将 value属性 props出来，否则报错；

3，用输入框事件把 选择值发出 @input="change($event)" ，

change (val) {
this.$emit('input', val)
}

4，下拉框显示的值【国家名字（英文）+电话区号】所以需要拼接一下

5，引入组件，使用

已经OK了，接下来看样式；

 

6，因为国家名字有长有短，不好显示，所以用其 value 值作为显示；

用 watch监听 ：

 

这里解释一下：

option的 value 值如果为 number，保存后从后台拿到的值需要转为 number 类型；

如果为string，则需要转为 string 类型才能回显成功

 

下面为组件vue：

<template>
  <el-select placeholder="请选择国家区号" :value="value" @input="change($event)">
    <el-option v-for="item in options" :key="item.value" :label="`${item.name}(${item.en})  +${item.tel}`" :value="item.tel">
    </el-option>
  </el-select>
</template>

<script>
export default {
  name: 'select-country',
  props: {
    value: {
      type: [String, Number, Array],
      default: ''
    }
  },
  data () {
    return {
      options: [{
        'short': 'AD',
        'name': '安道尔共和国',
        'en': 'Andorra',
        'tel': '376'
      }, {
        'short': 'AE',
        'name': '阿拉伯联合酋长国',
        'en': 'UnitedArabEmirates',
        'tel': '971'
      }, {
        'short': 'AF',
        'name': '阿富汗',
        'en': 'Afghanistan',
        'tel': '93'
      }, {
        'short': 'AG',
        'name': '安提瓜和巴布达',
        'en': 'AntiguaandBarbuda',
        'tel': '1268'
      }, {
        'short': 'AI',
        'name': '安圭拉岛',
        'en': 'Anguilla',
        'tel': '1264'
      }, {
        'short': 'AL',
        'name': '阿尔巴尼亚',
        'en': 'Albania',
        'tel': '355'
      }, {
        'short': 'AM',
        'name': '亚美尼亚',
        'en': 'Armenia',
        'tel': '374'
      }, {
        'short': '',
        'name': '阿森松',
        'en': 'Ascension',
        'tel': '247'
      }, {
        'short': 'AO',
        'name': '安哥拉',
        'en': 'Angola',
        'tel': '244'
      }, {
        'short': 'AR',
        'name': '阿根廷',
        'en': 'Argentina',
        'tel': '54'
      }, {
        'short': 'AT',
        'name': '奥地利',
        'en': 'Austria',
        'tel': '43'
      }, {
        'short': 'AU',
        'name': '澳大利亚',
        'en': 'Australia',
        'tel': '61'
      }, {
        'short': 'AZ',
        'name': '阿塞拜疆',
        'en': 'Azerbaijan',
        'tel': '994'
      }, {
        'short': 'BB',
        'name': '巴巴多斯',
        'en': 'Barbados',
        'tel': '1246'
      }, {
        'short': 'BD',
        'name': '孟加拉国',
        'en': 'Bangladesh',
        'tel': '880'
      }, {
        'short': 'BE',
        'name': '比利时',
        'en': 'Belgium',
        'tel': '32'
      }, {
        'short': 'BF',
        'name': '布基纳法索',
        'en': 'Burkina-faso',
        'tel': '226'
      }, {
        'short': 'BG',
        'name': '保加利亚',
        'en': 'Bulgaria',
        'tel': '359'
      }, {
        'short': 'BH',
        'name': '巴林',
        'en': 'Bahrain',
        'tel': '973'
      }, {
        'short': 'BI',
        'name': '布隆迪',
        'en': 'Burundi',
        'tel': '257'
      }, {
        'short': 'BJ',
        'name': '贝宁',
        'en': 'Benin',
        'tel': '229'
      }, {
        'short': 'BL',
        'name': '巴勒斯坦',
        'en': 'Palestine',
        'tel': '970'
      }, {
        'short': 'BM',
        'name': '百慕大群岛',
        'en': 'BermudaIs.',
        'tel': '1441'
      }, {
        'short': 'BN',
        'name': '文莱',
        'en': 'Brunei',
        'tel': '673'
      }, {
        'short': 'BO',
        'name': '玻利维亚',
        'en': 'Bolivia',
        'tel': '591'
      }, {
        'short': 'BR',
        'name': '巴西',
        'en': 'Brazil',
        'tel': '55'
      }, {
        'short': 'BS',
        'name': '巴哈马',
        'en': 'Bahamas',
        'tel': '1242'
      }, {
        'short': 'BW',
        'name': '博茨瓦纳',
        'en': 'Botswana',
        'tel': '267'
      }, {
        'short': 'BY',
        'name': '白俄罗斯',
        'en': 'Belarus',
        'tel': '375'
      }, {
        'short': 'BZ',
        'name': '伯利兹',
        'en': 'Belize',
        'tel': '501'
      }, {
        'short': 'CA',
        'name': '加拿大',
        'en': 'Canada',
        'tel': '1'
      }, {
        'short': '',
        'name': '开曼群岛',
        'en': 'CaymanIs.',
        'tel': '1345'
      }, {
        'short': 'CF',
        'name': '中非共和国',
        'en': 'CentralAfricanRepublic',
        'tel': '236'
      }, {
        'short': 'CG',
        'name': '刚果',
        'en': 'Congo',
        'tel': '242'
      }, {
        'short': 'CH',
        'name': '瑞士',
        'en': 'Switzerland',
        'tel': '41'
      }, {
        'short': 'CK',
        'name': '库克群岛',
        'en': 'CookIs.',
        'tel': '682'
      }, {
        'short':