對(duì)獲取到的原始數(shù)組數(shù)據(jù)進(jìn)行深拷貝，以免改變?cè)紨?shù)組結(jié)構(gòu)盒蟆；通過(guò)輸入值匹配數(shù)組對(duì)象值來(lái)重組匹配出來(lái)的數(shù)組踏烙。
1.安裝lodash： npm install lodash --save
2.組件中使用：
import?_?from?'lodash'
<input?v-model="name"? @input="searchInfo" />
<ul>
? ? <li v-for="(item,index)?in?searchList"??:key="index">
? ? ? ? {{item.name}}
????</li>
</ul>
data()?{
????return?{
? ??????name:?'',
? ? ? ? dataList:[{name:'張三',sex:'男'}拌夏，{name:'李四',sex:'男'}],
? ??????searchList:[],
????}
},
searchInfo:?_.debounce(function()?{
? ? ? ? this.search();
?},?200),
search(){
? ??if(this.name){
? ? ? ? let?dataList?=?_.cloneDeep(this.dataList);
? ? ? ??let?inputName?=?this.name.toLowerCase();?//轉(zhuǎn)小寫搜索更精確
? ? ? ? let?newList?=?[];?//??用于存放搜索出來(lái)數(shù)據(jù)的新數(shù)組
? ? ? ? dataList?.filter(item?=>?{
? ? ? ? ????if?(item.name.toLowerCase().indexOf(inputName)?!==?-1)?{
? ? ? ? ? ? ????newList.push(item);
? ? ? ? ?????}
? ? ? ? })?
? ? ? ? this.searchList =?newList;
????}
}
