使用Element UI 开发页面遇到的问题之下拉菜单支持拼音缩写查询

时间:2024-04-05 12:56:16

下拉菜单支持拼音缩写查询

下拉菜单其实就是select选择器下拉菜单,功能就是可以支持拼音缩写查询
1、既然要用到拼音搜索,我们就需要一个拼音库,在这里我推荐一个第三方包:https://github.com/xmflswood/pinyin-match,在这里首先对这个包的开发者表示万分的感谢。

2.安装第三方包:

npm install pinyin-match --save

3.在index.html中引入

1.html代码

引入拼音包之后,需要给select添加 filter-method方法,html页面结构如下:
使用Element UI 开发页面遇到的问题之下拉菜单支持拼音缩写查询

2.js代码

这是数据部分
使用Element UI 开发页面遇到的问题之下拉菜单支持拼音缩写查询
这边是js代码
使用Element UI 开发页面遇到的问题之下拉菜单支持拼音缩写查询
最终效果如图:
使用Element UI 开发页面遇到的问题之下拉菜单支持拼音缩写查询