參考https://www.npmjs.com/package/pinyin-match

npminstallpinyin-match--save

constPinyinMatch=require('pinyin-match');
lettest='123曾經滄海難為水除卻巫山不是云'
PinyinMatch.match(test,'23曾');// [1, 3]

案例1：

<el-form-itemlabel="控制方案">

<el-selectv-model="lngcontrolplanid":placeholder="請輸入":filter-method="selectFilter"filterable @focus="onFocus">
<el-option
v-for="(item,index)incontrolPlanList"
:key="item.lngcontrolplanid"
:value-key="item.lngcontrolplanid"
:label="item.strcontrolplanname"
:value="item.lngcontrolplanid"
/>
</el-select>
</el-form-item>

<script>

importpinyinMatchfrom'pinyin-match'

methods:{
//聚焦時顯示全部數據
onFocus(){
this.controlPlanList=this.copyControlPlanList
},
selectFilter(val){
if(val){
this.controlPlanList=this.copyControlPlanList.filter((item)=>{
returnPinyinMatch.match(item.strcontrolplanname,val) //(需要過濾的名稱，輸入的關鍵詞)
})
}else{
this.controlPlanList=this.copyControlPlanList
}
},
}

</script>

案例2

<el-form-itemlabel="出差地點"prop="districtIds">

<el-cascader
ref="areaNames"
v-model="disValue"
:options="districtAll"
:props="{
label:'treedataname',
value:'treedataid',
children:'childList'
}"
:collapse-tags="collapseTags"
filterable
:filter-method="filterMethod"
/>

</el-form-item>
<script>

importpinyinMatchfrom'pinyin-match'

methods:{
filterMethod(node,keyword){
returnpinyinMatch.match(node.text,keyword)
}
}

</script>

總結

以上是生活随笔為你收集整理的PinyinMatch实现拼音匹配，分词、缩写、多音字匹配能力的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。