🙂博主：爱学习的Akali king
🙂本文核心：vue写法——使用js高阶函数实现多条件搜索功能
类比一下react写法
之前出过一个react写法的前端搜索（react写法——使用js高阶函数实现多条件搜索功能）
今天我们再研究一下vue中怎么实现。
react和vue有什么区别？
这个区别要细说可太多了，但是最终都能归为语法不同，封装方式不同，但本质一样，都是基于JavaScript的两种不同框架语言（相当于龙生九子，各有不同）。
用react实现前端搜索功能，我们有三步：
第一步：创建一个假数据，这一步是为了模拟后端接口返回给前端使用的数据，格式一般是数组包对象形式。
第二步：引入表格组件，将数据进行Dom渲染。这个时候我们要准备三个变量，data变量用来接收存放数据，list变量用来做数据渲染，search变量用来数据筛选
第三步：利用js高阶函数来筛选条件，有几个条件就筛选几次。筛选条件之间是交集关系。
那么vue呢？
之前用react写法实现前端搜索功能时，我们是从思路出发的，并不局限于框架语言。所以我们用vue实现前端搜索，思路也是一样，还是这三步。不过我们要做一个新的东西，就是封装。
因为我们将一个搜索功能写好后，这就相当于是一个工具函数。 在需要这一功能的时候，我们去调用即可，所以我们把这个功能封装起来，需要的时候导入即可。
这样也算是实现了代码复用，并优化了性能。
我们依然采用尽可能最简单的方式来实现，其实vue实现会更加容易。如果用react要100行实现，那么vue就是50行。
vue_29">用vue写法来实现，思路+步骤：
第一步：准备数据
创建一个假数据，这一步是为了模拟后端接口返回给前端使用的数据，格式一般是数组包对象形式。
javascript">const list = ref([
{ id: 1, name: '张温', age: '19', gender: '男' ,skill:`狂风绝息斩`},
{ id: 2, name: '张三丰', age: '38', gender: '男',skill:`封尘绝念斩` },
{ id: 3, name: '张无忌', age: '25', gender: '男',skill:`天霸横空烈击` },
{ id: 4, name: '王无维', age: '25', gender: '男',skill:`魔影迷踪` },
{ id: 5, name: '马云禄', age: '27', gender: '女',skill:`大地之力` },
{ id: 6, name: '黄月英', age: '15', gender: '女',skill:`张嘉文一枪做掉` },
{ id: 7, name: '李青', age: '15', gender: '女',skill:`妙手回春` },
{ id: 8, name: '亚索', age: '12', gender: '女',skill:`随后枪出如龙` },
{ id: 9, name: '暗影', age: '78', gender: '女',skill:`一点寒芒先到` },
{ id: 10, name: '剑魔', age: '87', gender: '女',skill:`狐臭` },
{ id: 11, name: '蛮族之王', age: '17', gender: '女',skill:`五神之力` },
{ id: 12, name: '无双剑姬', age: '25', gender: '女',skill:`铁布衫` },
{ id: 13, name: '青钢影', age: '45', gender: '女',skill:`天音波` },
{ id: 14, name: '波比', age: '36', gender: '女',skill:`神龙摆尾` },
{ id: 15, name: '乐芙兰', age: '17', gender: '女',skill:`金钟罩` },
{ id: 16, name: '大树', age: '23', gender: '女',skill:`困天地` },
{ id: 17, name: '蛤蟆', age: '18', gender: '女',skill:`一口吃掉` },
{ id: 18, name: '永恩', age: '17', gender: '女',skill:`哈撒给` },
])
这里我们直接给了list变量，相当于接口返回给前端的数据，我们深拷贝了一次给list变量。（这也是我们要声明的第一个变量）
第二步：根据数据结构渲染Dom
我们要声明三个变量。第一个变量叫list，用于接收接口返回的数据。第二个变量data，用于渲染表格。第三个变量search，用于存放处理筛选条件后的数据。
javascript">const data=ref(list.value)
const search = reactive({
name:{
value:``,
than:'includes',
},
age: {
value:``,
than:'includes',
},
gender:{
value:``,
than:'includes',
},
skill:{
value:``,
than:'includes',
}})
引入表格组件，渲染
<el-table :data="list">
<el-table-column prop="name"
label="name" />
<el-table-column prop="age"
label="age" />
<el-table-column prop="gender"
label="gender" />
<el-table-column prop="skill"
label="skill" />
</el-table>
第三步：处理筛选条件
数据中有5个字段，分别是id，name，age，gender，skill。所以我们最多可以设置5个搜索框，但是一般情况下，不会设置id搜索框，意义不大。
最终我们选择name，age，gender，skill四个字段作为条件，设置四个搜索框。并给四个搜索框绑定input事件，即一边输入一遍显示，属于双向数据绑定，这种搜索体验感非常爽。
<el-form>
<el-form-item label="name">
<el-input v-model="search.name.value" @input="searchEvent"/>
</el-form-item>
<el-form-item label="age">
<el-input v-model="search.age.value" @input="searchEvent"/>
</el-form-item>
<el-form-item label="gender">
<el-input v-model="search.gender.value" @input="searchEvent"/>
</el-form-item>
<el-form-item label="skill">
<el-input v-model="search.skill.value" @input="searchEvent"/>
</el-form-item>
</el-form>
其中绑定的函数searchEvent，我们要用到js高阶函数实现多条件筛选。
javascript">function searchEvent(){
let arr = [...data.value]
for (const item in search) {
arr = arr.filter((row) => row[item].includes(search[item].value))
}
return arr
}
至此已经实现了前端搜索功能
⭐⭐效果：
第四步：封装
这一步，我们将功能封装一下。封装的核心，其实是封装逻辑，也就是说：多个地方都需要用到搜索这一功能，其实用的是这一逻辑。所以封装的是逻辑代码。
最终我们App.vue页面只保留
javascript">function searchEvent(){
list.value=handleSearch(search,data.value)
}
新建一个search.js文件，逻辑代码封装在这个文件中：
javascript">export function handleSearch(searchObj, all) {
let arr = [...all]
for (const item in searchObj) {
arr = arr.filter((row) =>{
return searchObj[item].value?row[item].includes(searchObj[item].value):true;
})
}
return arr
}
同时在App.vue页面需要导入
javascript">import {handleSearch} from "./search.js";
vue_167">vue写法实现前端搜索功能（完整代码）
完整代码，打包成资源上传了。需要研究的可以等资源上传成功下载学习。
说明一下：
下载后，需要终端执行命令：
npm i，安装依赖
npm run dev运行项目
有不明白的，欢迎评论区留言讨论。如果本文解决了你的问题，对你有帮助，还望不吝三连🙂🙂🙂
