element-ui中el-select下拉框实现拼音、首字母、汉字等模糊搜索

安装pinyin-match

// 安装 pinyin-matchnpm install pinyin-match --save

引入

import PinyinMatch from 'pinyin-match'

ele 下拉框

<el-select filterable :filter-method="handleFilter"><el-optionv-for="item in orderDetails":key="item.id":label="item.codeName":value="item.id"></el-option></el-select>

拼音和输入数值过滤

注意：

// 复制
this.copyOrderDetails = Object.assign(this.orderDetails)

handleFilter(val) {// 对绑定数据赋值if (val) {this.orderDetails = this.copyOrderDetails.filter((item) => {// 如果直接包含输入值直接返回trueif (item.codeName) {if (item.codeName.toUpperCase().indexOf(val.toUpperCase()) != -1) {return true}// 输入值拼音dreturn PinyinMatch.match(item.codeName, val)}})} else {this.orderDetails = this.copyOrderDetails}}

element-ui中el-select下拉框实现拼音、首字母、汉字等模糊搜索相关推荐

TP中给select下拉框选中的内容搜索选中seleted
开发某个搜索功能时,在select下拉框选中条件后,单击搜索后总是重置下拉框条件,不能固定之前选中的条件.因此使用TP框架中的IF标签来实现. 代码如下: <select name=" ...
在hta中使用select下拉框
由于要做一个纯静态的客户端项目,又考虑到成本和使用场景,所以选择hta. hta由于历史原因,逐步被淘汰,网上的资料少得可怜,hta对新的前端技术支持非常差劲. 进入正题. 1.整个项目采用的是boo ...
elementui下拉框选择图片_Element UI系列：Select下拉框实现默认选择
[编程题目]一个整数数组,长度为 n,将其分为 m 份,使各份的和相等,求 m 的最大值★★ (自己没有做出来!!) 45.雅虎(运算.矩阵): 2.一个整数数组,长度为 n,将其分为 m 份,使各份 ...
Vue中select下拉框的默认选中项的三种情况
在Vue中使用select下拉框主要靠的是 v-model 来绑定选项 option 的 value 值. select下拉框在界面的展示,我们都希望看到框中有一个值而不是空白,比如显示 &qu ...
antd vue 多个下拉联动_antd中select下拉框值为对象选中的问题
使用antd中的select下拉框,遇到个小问题,后台管理系统中,使用下拉框,一般不会是简单的就直接使用select中的value值,而是会使用id或者value中文对应的keyword,并且这个在o ...
layui 下拉框空选项不显示_layui下select下拉框不显示或没有效果
Layui会对select.checkbox.radio等原始元素隐藏,从而进行美化修饰处理.但这需要依赖于form组件,所以你必须加载 form,并且执行一个实例.值得注意的是:导航的Hover效果 ...
iview select选中值取值_完美解决iview 的select下拉框选项错位的问题
在使用iview的过程中,我遇到这样一个问题,在Model中使用select下拉框组件.但是当弹出框超过一屏需要滚动时,select的下拉选项会出现错位(下图1为正常,图2为滚动后,下拉选项错位.) ...
iview select 怎么清空_如何解决iview 的select下拉框选项错位的问题，具体操作如下...
下面我就为大家分享一篇完美解决iview 的select下拉框选项错位的问题,具有很好的参考价值,希望对大家有所帮助. 在使用iview的过程中,我遇到这样一个问题,在Model中使用select下拉 ...
Ant Design select下拉框突然拉长
Ant Design select下拉框在弹窗中被拉长在使用react+Ant Design的开发中使用select下拉框遇到了以下情况在弹窗里面 ,表单内容较多出现了下拉条,然后在点击搜索框输 ...
element ui中select 下拉框在火狐浏览器最后一行显示不完全（谷歌正常）
在项目开发的时候用到了el-scrollbar组件并且设置了隐藏横向滚动条下面展示一些内联代码片. // 隐藏横向滚动条 .el-scrollbar__wrap {overflow-x: hid ...

element-ui中el-select下拉框实现拼音、首字母、汉字等模糊搜索

安装pinyin-match

element-ui中el-select下拉框实现拼音、首字母、汉字等模糊搜索相关推荐

最新文章

热门文章