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方法可以获取拼音数组。

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




 

你可能感兴趣的:(cnchar使用,element-ui)