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
版权声明:本文为博主原创文章,转载请附上博文链接!

原文地址:https://www.cnblogs.com/hellofangfang/p/10906986.html

时间: 2024-11-05 23:26:15

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

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

方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加的表单验证是否正确,需要注意的点有: 1.使用此方法前检查prop一定必须要写在<el-form-item>上面,写在里面的input上或者其他任何地方都不行(el-form-item prop属性绑定) 2.el-form rules,model属性绑定,ref标识 自定义表单验证的坑: 一.valid

Vue.js 组件中data的使用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

net MVC +Vue.js+Element UI 笔记

最近项目需求要用到Vue 与 Element UI.但是又不想用Node.js.就结合了Net.MVC来做项目开发.故而做个笔记来记录一些遇到的问题和处理思路 用到MVC主要考虑是到 对 Node.js 不是特别了解.不想给自己埋坑. 而且基于MVC的话,能用到MVC的服务器端渲染,Session,验证,路由机制等等还是非常和嗨皮的. 然而集合MVC的话,比较烦的是在做可复用Component和JS文件的封装上没Node.js那么方便. Note:不得不吐槽,Vue.js简直和Flash Fle

vue封装element中table组件

后台系统,table被用的次数比较多,所以决定提出来作为组件 1.新建一个Table.vue文件 <!--region 封装的分页 table--> <template>  <div class="table">  <el-table id="iTable" v-loading.iTable="options.loading" :data="list" :stripe="op

vue之element中el-dialog关闭相关属性

在el-dialog中加入这俩属性: :close-on-press-escape="false" :close-on-click-modal="false" 效果:键盘按Esc键,或者鼠标点击dialog外面, dialog都不会关闭了. PS: Vue中属性有无冒号的区别: 加冒号的,说明后面的是一个变量或者表达式:没加冒号的后面就是对应的字符串字面量! 尤其是Boolean类型的容易混淆.例如上面dialog例子,带冒号表示后面属性是Boolean,否则只是单

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

父组件中的点击跳转: <ul class="insurance-entry clearfloat"> <li v-link="{name:'productlist',params:{id:1}}">1</li> <li v-link="{name:'productlist',params:{id:2}}">2</li> <li v-link="{name:'product

如何降低Vue.js项目中Webpack打包文件的大小?

https://blog.csdn.net/maray/article/details/50988500?utm_source=blogxgwz0 import Blur from 'vux/src/components/blur/index.vue' import Cell from 'vux/src/components/cell/index.vue' import Range from 'vux/src/components/range/index.vue' import Toast fr

vue.js框架中的日期格式转化

最近在用vue框架写一个app,这个是用到的日期格式转换,把下面的标准格式转换为字符串连接格式 原文地址:https://www.cnblogs.com/lyxzxp/p/10511181.html

(vue.js)element ui 表单重置

el-form需要接收一个model,并且需要配合el-form-item一起使用,并且在el-form-item上绑定prop属性,resetField方法才能好使. <el-form :model="addServiceData" ref="addServiceForm"> <el-form-item label="手机号" prop="mobile"> <el-input v-model=&