vue.js + element中el-select实现拼音匹配,分词、缩写、多音字匹配能力
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实现拼音匹配,分词、缩写、多音字匹配能力的更多相关文章
- 如何Vue-cli开始使用在Vue.js项目中启动TDD(测试驱动开发)
通常,使用测试驱动开发(TDD)最困难的部分是开始.你必须下载带有奇怪依赖项的软件包,让测试套件与你的构建系统协同工作,然后你必须弄清楚如何编写一个测试!难怪这么多的开发者在你提起它的时候就开始跑开了 ...
- 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...
- vue.js双向绑定之--select获取text
在大多数情况下select下拉菜单都是value和text设置不同的值的,value一般来说是与后台交互的值,而text是前端用来显示的文本: 但是,vue.js对到表单的双向绑定时如果option设 ...
- vue.js+element ui Table+spring boot增删改查
小白初学,不懂的还是太多了,找了好多资料才做出来的先记录一下 1.先用Spring boot创建一个包含了增删改查的项目 2.创建vue.js项目 3.安装Element UI (1)进入项目文件夹下 ...
- Vue.js 组件中data的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue.js + element 搭建后台管理系统 笔记(一)
此文仅记录本人在搭建后台系统过程中遇到的难点及注意点,如果能帮到各位自然是极好的~~~ 项目主要架构:vueJS.elementUI.scss 一.项目初始化 首先需要安装nodejs,安装方法就不在 ...
- Vue.js + Element.ui 从搭建环境到打包部署
一.搭建环境 由于新的node已经集成了npm,所以直接安装node,前往node官网下载最新版本的node,根据自己的操作系统选择相应的包,按照步骤一步步走就可以,这里不做过多介绍. 安装好后可以打 ...
- vue.js 1中父组件跳到子组件中并传参让子组件显示不同的内容
父组件中的点击跳转: <ul class="insurance-entry clearfloat"> <li v-link="{name:'produc ...
- vue封装element中table组件
后台系统,table被用的次数比较多,所以决定提出来作为组件 1.新建一个Table.vue文件 <!--region 封装的分页 table--> <template> & ...
随机推荐
- 论文-MobileNetV2: Inverted Residuals and Linear Bottlenecks
1.主要创新 1)提出了一种新的layer module:the inverted residual with linear bottleneck, 2)short connect被置于bottlen ...
- 前端-2019 history 与 location
HTML5 API解析之Window.history历史记录 1.简介 window.history是用来保存用户在一个会话期间的网站访问记录,并提供相应的方法进行追溯.其对应的成员如下: 方法:ba ...
- 0008 基于DRF框架开发(01 DRF开发的基本流程)
1 创建模型 由于之前在<004 工程配置>中,已在Applications/Organizations/models中创建了一个UserInfo模型.此处引用这个模型. from dja ...
- Python标准库之logging模块
很多程序都有记录日志的需求,并且日志中包含的信息即有正常的程序访问日志,还可能有错误.警告等信息输出,python的logging模块提供了标准的日志接口,你可以通过它存储各种格式的日志,loggin ...
- python 3 可迭代对象与迭代器
1,可迭代对象 内部含有__iter__方法的对象是可迭代对象 遵循可迭代协议 dir() 检查对象含有什么方法 dir()会返回一个列表,这个列表中含有该对象的以字符串的形式所有方法名.这样我们就可 ...
- vjudge A^B Mod C 然后,10.6最。。。的 快速幂!!!
链接:https://vjudge.net/contest/331993#problem/D 给出3个正整数A B C,求A^B Mod C. 例如,3 5 8,3^5 Mod 8 = 3. Inpu ...
- 【剑指Offer】47、求1+2+3+...+n
题目描述: 求1+2+3+...+n,要求不能使用乘除法.for.while.if.else.switch.case等关键字及条件判断语句(A?B:C). 题解:递归实现/利用Math //利用短路 ...
- flutter loading
在发起请求时 需要有loading页面这样可以让用户知道当前正在操作,又可以防止多次点击等误操作,所以这里就自定义了一个loading页面 菊花使用flutter_spinkit里面的菊花来代替 在需 ...
- Proxy SwitchyOmega 使用黑名单和白名单
“黑名单”会告诉代理工具,黑名单(国外)里面的网站要使用代理:“白名单”会告诉代理工具,白名单(大陆网站)里面的网站直接连接,其余使用代理. 黑名单PAC 黑名单PAC两条(任选其一):https:/ ...
- Dataset: online data
From Kaggle: Appliances Energy Prediction Energy consumption of the Netherlands International Energy ...