el-select地区区号选择

  发送手机号验证码是一个很常见的需求，项目中也遇到了好几次，但突然因为业务的拓展，导致以前和现有的这种发验证码的地方前面需要加上个地区码，需求也很简单。就用了element的 el-select 的下拉框。

  最开始在网上整理的数据使用后的效果如下：
  

   发现一个不太对的地方，就是点击下拉框中的内容，在输入框中完全显示，想要的效果是选中某个国家地区时，输入框中只显示该国家地区的地区号，而不是国家名称和区号一起显示。

   原因是因为刚开始整理的数据的value是区号，但label是国家名称和区号，就导致了这种原因。

   后来经过改正，将整理的数据也进行了修改，如下：(只展示了一部分)

  {
    text: 'China (中国) (+86)',
    value: '86',
    label: '+86'
  },
  {
    text: 'Afghanistan (‫افغانستان‬‎) (+93)',
    value: '93',
    label: '+93'
  },
  {
    text: 'Albania (Shqipëri) (+355)',
    value: '355',
    label: '+355'
  },
  {
    text: 'Algeria (‫الجزائر‬‎) (+213)',
    value: '213',
    label: '+213'
  },
  {
    text: 'American Samoa (+1684)',
    value: '1684',
    label: '+1684'
  },

   数据修改完了，使用上也进行了修改：

<el-option v-for="item in Areacode" :key="item.value" :label="item.label" :value="item.value">{{item.text}}</el-option>

   即label也绑定上地区的区号，修改完后的效果如下：