用element-ui el-select 实现拼音码搜搜功能ts版

我是air

于 2021-12-23 13:00:11 发布

阅读量779

点赞数

文章标签： ui vue.js elementui typescript

本文链接：https://blog.csdn.net/m0_50406470/article/details/122104197

版权

本文介绍如何在Vue项目中，基于ElementUI和TypeScript实现el-select组件的拼音码搜索功能。通过安装'pinyin-match'依赖，封装方法，并在main.ts中引入全局方法，可以在select组件中实现拼音搜索。对于ts新手，文中提供了参考和学习路径。

摘要由CSDN通过智能技术生成

我是参考这个改写的，js版请看这篇文章Vue项目中实现ElementUi框架el-select拼音搜索功能_a-slow-sparrow的博客-CSDN博客_el 搜索

用ts写的，请看下面。

第一步要安装依赖： npm install pinyin-match --save

element代码如下

<el-select filterable :filter-method="(val)=>{$handleMatch(val,'zjlx','label')}"
           @click.native="$resetOpts('zjlx')"
           v-model="formData.zjlx" placeholder="请选择"> 
          <el-option v-for="item in zjlx" 
                    :key="item.value" :label="item.label" 
                    :value="item.value">
          </el-option>
</el-select>

封装方法如下(文件名：newDict.ts)：