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

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