傳送手機號驗證碼是一個很常見的需求，專案中也遇到了好幾次，但突然因為業務的拓展，導致以前和現有的這種發驗證碼的地方前面需要加上個地區碼，需求也很簡單。就用了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也繫結上地區的區號，修改完後的效果如下：