zoukankan      html  css  js  c++  java
  • 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也绑定上地区的区号,修改完后的效果如下:

      

  • 相关阅读:
    ADO.NET 中的数据并发
    net中前台javascript与后台c#函数相互调用
    js正则函数match、exec、test、search、replace、split使用介绍集合
    jQuery遍历Table tr td td中包含标签
    SQL你必须知道的-查询聚合分组排序
    haut-1280 诡异的迷宫
    int、long long等的取值范围
    codeforce 855B
    nyoj-2357
    codeforces 858A
  • 原文地址:https://www.cnblogs.com/aloneer/p/14265757.html
Copyright © 2011-2022 走看看