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也绑定上地区的区号,修改完后的效果如下:

      

  • 相关阅读:
    近期学习情况
    java连接数据库的两种方法总结
    近两个星期学习成果
    云笔记第一阶段总结
    圆面积
    C++计算器项目的初始部分
    C++视频课程
    A+B Format
    大一下学期的自我目标
    Kohana的请求流
  • 原文地址:https://www.cnblogs.com/aloneer/p/14265757.html
Copyright © 2011-2022 走看看