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