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> & ...
随机推荐
- 如何规范git commit提交
相信很多人使用SVN.Git等版本控制工具时候都会觉得每次提交都要写一个注释有什么用啊?好麻烦,所以我每次都是随便写个数字就提交了,但是慢慢的我就发现了,如果项目长期维护或者修改很久之前的项目,没有一 ...
- 在C#中使用RESTful API的几种好方法
什么是Restful API REST 即Representational State Transfer的缩写.直接翻译的意思是"表现层状态转化". 它是一种互联网应用程序的API ...
- P4075 [SDOI2016]模式字符串
总结 P4075 [SDOI2016]模式字符串 题目描述 给出n个结点的树结构T,其中每一个结点上有一个字符,这里我们所说的字符只考虑大写字母A到Z,再给出长度为m的模式串s,其中每一位仍然是A到z ...
- @Value注解没有起作用的梳理
今天在使用@Value注解的时候遇到其不起作用的现象,先把场景说明一下:现在有A类和B类,而A类对象是通过new操作生成的临时对象,而B类对象是在A类中使用的:调试步骤如下: (1)将B类的属性字段都 ...
- Java文件与类动手动脑
动手动脑1: 使用Files. walkFileTree()找出指定文件夹下所有大于指定大小(比如1M)的文件. package classJava; import java.io.IOExcepti ...
- gulp常用插件之gulp-useref使用
更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-useref这是一款可以将HTML引用的多个CSS和JS合并起来,减小依赖的文件个数,从而减少浏览器发起的请求次数.gulp-usere ...
- java课后动手动脑作业
public class Suiji { public long a=12345L;//定义long类型的a,b,c变量 public long c=12345L; public long m=456 ...
- 牛客网 —— 爱奇艺2020校招C++方向笔试题 总结
错了5,6个,主要集中在数据库和操作系统上. C++还需要提高熟练度. 总结 第6题: 折半查找树:根据二分查找构造得到的树,它一定是一个二叉排序树,是一个特殊的二叉排序树. (接近于平衡二叉 ...
- Java如何自定义注解
本文主要是记录所学,以供后续参考.注解是Java 1.5引入的,Java自定义注解是通过运行时靠反射获取注解,注解相当于是一种嵌入在程序中的元数据,可以使用注解解析工具或编译器对其进行解析,也可以指定 ...
- Wannafly Camp 2020 Day 2J 邦邦的2-SAT模板
#include <bits/stdc++.h> using namespace std; int main() { int n; cin>>n; cout<<n& ...