安裝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>
拼音和輸入數(shù)值過(guò)濾
注意：
// 復(fù)制
this.copyOrderDetails = Object.assign(this.orderDetails)
handleFilter(val) {
? ? ? // 對(duì)綁定數(shù)據(jù)賦值
? ? ? 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
? ? ? }
? ? }
————————————————
? ? ? ? ? ? ? ? ? ? ? ? ? ? 版權(quán)聲明：本文為博主原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接和本聲明。
原文鏈接：https://blog.csdn.net/wjx_jasin/article/details/109681147
