后端返回数组,vue+element组件需要前端进行传参搜索查询过滤,模糊匹配
例子:
<template>
<el-input placeholder="搜索应用名称" v-model.trim="searchText" clearable>
<template #suffix>
<div class="search-input-icon" @click="searchList">
<i class="el-icon-search"></i>
</div>
</template>
</el-input>
<p v-for="item in list" :key="item.id">{{item.name}}</p>
</template>
<script>
export default {
data() {
return {
searchText: "",
listAll:[{name:'111',id:1,title:'测试1'},{name:'222',id:2,title:'测试2'}],
list :[]
}
},
watch: {
searchText(val) {
if (!val) {
this.list = this.listAll;
} else {
this.list = this.searchvalue(this.listAll, this.searchText);
}
},
},
methods: {
//模糊搜索
searchvalue(list, keyWord) {
if (keyWord !== "") {
var reg = new RegExp(keyWord);
var arr = [];
for (var i = 0; i < list.length; i++) {
if (reg.test(list[i].name)) {
//这里匹配的是数组中需要的的内容,可根据业务需求自行修改!
arr.push(list[i]);
}
}
return arr; //返回符合条件的数组
} else {
return list;
}
},
}
},