element-ui中el-select下拉框实现拼音、首字母、汉字等模糊搜索

安装pinyin-match

// 安装 pinyin-match

npm install pinyin-match --save

引入

import PinyinMatch from 'pinyin-match'

ele 下拉框

<el-select filterable :filter-method="handleFilter">

                      <el-option

                        v-for="item in orderDetails"

                        :key="item.id"

                        :label="item.codeName"

                        :value="item.id"

                      ></el-option>

                    </el-select>

拼音和输入数值过滤

注意：

// 复制

this.copyOrderDetails = Object.assign(this.orderDetails)

handleFilter(val) {

      // 对绑定数据赋值

      if (val) {

        this.orderDetails = this.copyOrderDetails.filter((item) => {

          // 如果直接包含输入值直接返回true

          if (item.codeName) {

            if (item.codeName.toUpperCase().indexOf(val.toUpperCase()) != -1) {

              return true

            }

            // 输入值拼音d

            return PinyinMatch.match(item.codeName, val)

          }

        })

      } else {

        this.orderDetails = this.copyOrderDetails

      }

    }

————————————————

                            版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。


原文链接：https://blog.csdn.net/wjx_jasin/article/details/109681147

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容