1、既然要用到拼音搜索,我们就需要一个拼音库,在这里我推荐一个第三方包:https://github.com/xmflswood/pinyin-match,在这里首先对这个包的开发者表示万分的感谢。

2.安装第三方包:

npm install pinyin-match --save
3.在index.html中引入

<script src="pinyin-match/dist/main.js"></script>

4.好了现在我们就能使用了,话不多说直接上代码,为select添加filter-method方法,这是html部分的

5.PinyinMatch()这个方法的具体内容

val使我们输入框的内容

copycommonAddr是我们对commonAddr的复制数据

这样我们就实现了打出拼音简码选项即可跳出的功能,效果如下图:

---------------------
作者:李少0
来源:CSDN
原文:https://blog.csdn.net/li00828/article/details/85089358
版权声明:本文为博主原创文章,转载请附上博文链接!

vue.js + element中el-select实现拼音匹配,分词、缩写、多音字匹配能力的更多相关文章

  1. 如何Vue-cli开始使用在Vue.js项目中启动TDD(测试驱动开发)

    通常,使用测试驱动开发(TDD)最困难的部分是开始.你必须下载带有奇怪依赖项的软件包,让测试套件与你的构建系统协同工作,然后你必须弄清楚如何编写一个测试!难怪这么多的开发者在你提起它的时候就开始跑开了 ...

  2. 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题

        方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...

  3. vue.js双向绑定之--select获取text

    在大多数情况下select下拉菜单都是value和text设置不同的值的,value一般来说是与后台交互的值,而text是前端用来显示的文本: 但是,vue.js对到表单的双向绑定时如果option设 ...

  4. vue.js+element ui Table+spring boot增删改查

    小白初学,不懂的还是太多了,找了好多资料才做出来的先记录一下 1.先用Spring boot创建一个包含了增删改查的项目 2.创建vue.js项目 3.安装Element UI (1)进入项目文件夹下 ...

  5. Vue.js 组件中data的使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. vue.js + element 搭建后台管理系统 笔记(一)

    此文仅记录本人在搭建后台系统过程中遇到的难点及注意点,如果能帮到各位自然是极好的~~~ 项目主要架构:vueJS.elementUI.scss 一.项目初始化 首先需要安装nodejs,安装方法就不在 ...

  7. Vue.js + Element.ui 从搭建环境到打包部署

    一.搭建环境 由于新的node已经集成了npm,所以直接安装node,前往node官网下载最新版本的node,根据自己的操作系统选择相应的包,按照步骤一步步走就可以,这里不做过多介绍. 安装好后可以打 ...

  8. vue.js 1中父组件跳到子组件中并传参让子组件显示不同的内容

    父组件中的点击跳转: <ul class="insurance-entry clearfloat"> <li v-link="{name:'produc ...

  9. vue封装element中table组件

    后台系统,table被用的次数比较多,所以决定提出来作为组件 1.新建一个Table.vue文件 <!--region 封装的分页 table--> <template>  & ...

随机推荐

  1. IntelliJ IDEA 2018.3.2 永久破解

    PS:动手能力强的来,手残的去淘宝买吧,大概15块钱1年.建议看完后在动手,有一个全局观,浪费不了多少时间 一. 下载破解补丁文件 链接:https://pan.baidu.com/s/1wFp14t ...

  2. TC SRM556 OldBridges

    题意 有一个包含\(n\)个点的图,点的编号分别为\(0\)到\(n-1\).有若干双向边连接两个点,有些边可以经过无限次,有些边最多只能经过(双向)两次.Alice计划从\(a1\)到\(a2\)进 ...

  3. 09、const与extern在一起跨文件引用

    const与extern都属于属性一类. 两者加一起用需要注意的一点是,在多文件编译中,加入我们共用一个全局常量.一般的定义会是这样: A.cpp文件 const int gg_int = 100; ...

  4. shadow文件中密码的加密方式

    1) 查看shadow文件的内容 cat /etc/shadow 可以得到shadow文件的内容,限于篇幅,我们举例说明: root:$1$Bg1H/4mz$X89TqH7tpi9dX1B9j5YsF ...

  5. SSL证书基础知识

    公司要为一个英国的客户提供由HTTP升级到HTTPS的服务,于是接触查询并学习了相关的SSL证书方面的内容,并整理了一翻. I.SSL证书说明 SSL 证书按大类一般可分为 DV SSL .OV SS ...

  6. 安装MySQL被提示缺少msvcr120.dll,msvcp120.dll或提示0xc00007b错误

    踩坑经历: 我的电脑昨天重装了win10系统,在安装MySQL时被提示缺少msvcr120.dll,我去下载msvcr120.dll后放入System32中,又被提示缺少msvcp120.dll,然后 ...

  7. VMware、Linux(CentOS 7)安装,供参考。

    前端开发,学习Linux,记录安装中的一些问题,比如在安装最小版后,如何由命令行转为图形界面等. -------------笔记中截图参考其他资料. 下载文件 VMware 12: 链接:https: ...

  8. leetcode四道组合总和问题总结(39+40+216+377)

    39题目: 链接:https://leetcode-cn.com/problems/combination-sum/ 给定一个无重复元素的数组 candidates 和一个目标数 target ,找出 ...

  9. Linux网络课程学习第一天

    第一天上课主要介绍了LINUX系统和Linux课程的情况.了解了开源系统的四大优势,六大特点. 最具有心得的一句话: 学习是件苦差事: 稻盛和夫先生的话也深深激励着我:“工作马马虎虎,只想在兴趣和游戏 ...

  10. H5-设置全屏背景图片样式

    .bgimg{ width: 100%; height: 95vh; margin: 0; padding: 0 .32rem; background-image: url('../image/ld. ...