Element-UI Select 下拉框根据汉字拼音过滤选择选项（使用filter-method，filterable属性）

在使用 Element-UI Select 组件时，遇到一个需求是根据汉字或汉字拼音来过滤选项，记录一下解决方案。

这里需要使用 Element-UI Select 组件的 filter-method 和 filterable属性。

另外需要使用 js 拼音库 CnChar ，这个库主要就是做汉字转拼音和汉字笔画数的。使用 npm i cnchar 就可以安装使用啦，详细的使用 CnChar 文档里有介绍。

需求大概是这样的：汉字匹配就不用多说了，拼音匹配有个要求，就是只能从某个汉字的拼音开始匹配，不能截断，比如说：双皮奶不能被 huangpinai 匹配，但是可以被 pinai 匹配。

实现思路就是在 filter-method 中使用数组的filter方法对源数据进行过滤就可以，过滤方法使用 CnChar 提供的 .spell方法可以获取拼音数组。

其实也比较简单，我就直接上代码啦，注释写的比较完整，就不过多解释啦，有不理解的地方可以留言哈：

<template><div><el-select v-model="value" :filter-method="filter" filterable placeholder="请选择"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select></div>
</template><script>import cnchar from "cnchar";export default {data() {return {copy: [],options: [{value: "选项1",label: "黄金糕"},{value: "选项2",label: "双皮奶"},{value: "选项3",label: "先生"},{value: "选项4",label: "西安城"},{value: "选项5",label: "松下电器"},{value: "选项6",label: "学习成果"}],value: ""};},mounted() {//保留数据源this.copy = Object.assign(this.options);},methods: {filter(v) {//对绑定数据赋值this.options = this.copy.filter((item) => {//如果直接包含输入值直接返回trueif (item.label.indexOf(v) !== -1) return true;//将label拆散成小写拼音数组let arr = item.label.spell('low', 'array');//拼接成完整label的拼音let spell = arr.join('');//lengths 是label完整拼音 中每个汉字第一个拼音字母的index值的数组let lengths = [0];for (var i = 0; i < arr.length - 1; i++) {lengths.push(lengths[i] + arr[i].length);};//判断label完整拼音 中 输入值的 index 是不是等于某个汉字第一个拼音字母的index值return lengths.indexOf(spell.indexOf(v)) !== -1;})}}};
</script>

Element-UI Select 下拉框根据汉字拼音过滤选择选项（使用filter-method，filterable属性）相关推荐

Element UI select 下拉框样式覆盖
因为我需要写一个大屏页面,然后需要用到select框,我想把select下拉选项的背景颜色改成透明,然后我想覆盖掉它本身的样式.我本来想改变el-select-dropdown的样式,即使使用了 /d ...
使用element ui select下拉框多选，编辑状态下回显数据
最近在做一个项目,项目的后端是地址:https://github.com/wangyuanjun008/wyj-springboot-security.git 前端地址是 https://github ...
解决element ui select下拉框不回显数据问题
最近在做一个项目,项目的后端是地址: https://github.com/wangyuanjun008/wyj-springboot-security.git 前端地址是 https://githu ...
element UI select下拉选项位置问题
element UI select下拉选项位置问题在使用elementUI下拉选项时,可能存在下拉时下拉列表选项框的位置距离下拉框所在的位置距离过大,这个是由于elementUI自己设置的根据下拉框 ...
Vue实现Element UI的下拉框默认选中，值来自父组件或异步获取
子组件使用watch监听父组件传过来的值,并且赋值给子组件的data参数. 1.父组件传了一个userId属性给子组件 <Children@searchForm="searchForm ...
vue iview动态循环的表单里的select下拉框的值不能重复选择
先上效果图: 实现 1.循环显示名称下拉框  <div v-for="(item,index) in costAllocationForm.app ...
element 中select下拉框和el-popover下拉框位置偏移的情况
出现改问题的原因是下拉的定位信息在body中,只需要将定位置于父组件即可解决. <el-select :teleported="false" v-model="d ...
element-UI select下拉框加搜索拼音搜索滚动加载新的数据
DOM 写法 <el-form-itemlabel="样品名称"prop="sampleName"label-width="150"& ...
python获取select选中的值_Python3.x：遍历select下拉框获取value值
Python3.x:遍历select下拉框获取value值 Select提供了三种选择方法: # 通过选项的顺序,第一个为 0 select_by_index(index) # 通过value属性 s ...
element ui中select 下拉框在火狐浏览器最后一行显示不完全（谷歌正常）
在项目开发的时候用到了el-scrollbar组件并且设置了隐藏横向滚动条下面展示一些内联代码片. // 隐藏横向滚动条 .el-scrollbar__wrap {overflow-x: hid ...

Element-UI Select 下拉框根据汉字拼音过滤选择选项（使用filter-method，filterable属性）

Element-UI Select 下拉框根据汉字拼音过滤选择选项（使用filter-method，filterable属性）相关推荐

最新文章

热门文章

Element-UI Select 下拉框 根据汉字拼音过滤选择选项（使用filter-method，filterable属性）

Element-UI Select 下拉框 根据汉字拼音过滤选择选项（使用filter-method，filterable属性）相关推荐

最新文章

热门文章

Element-UI Select 下拉框根据汉字拼音过滤选择选项（使用filter-method，filterable属性）

Element-UI Select 下拉框根据汉字拼音过滤选择选项（使用filter-method，filterable属性）相关推荐