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

最新推荐文章于 2024-03-25 14:53:48 发布

jasin4j

最新推荐文章于 2024-03-25 14:53:48 发布

阅读量5k

点赞数 1

分类专栏： vue

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

版权

vue 专栏收录该内容

13 篇文章

订阅专栏

安装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
      }
    }