🙂博主：爱学习的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写法来实现，思路+步骤：

第一步：准备数据

创建一个假数据，这一步是为了模拟后端接口返回给前端使用的数据，格式一般是数组包对象形式。

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，用于存放处理筛选条件后的数据。

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高阶函数实现多条件筛选。

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页面只保留

function searchEvent(){
  list.value=handleSearch(search,data.value)
}

新建一个search.js文件，逻辑代码封装在这个文件中：

export function handleSearch(searchObj, all) {
  let arr = [...all]
  for (const item in searchObj) {
    console.log(searchObj[item].value)
    arr = arr.filter((row) => row[item].includes(searchObj[item].value))
  }
  return arr
}

同时在App.vue页面需要导入

import {handleSearch} from "./search.js";

---

vue写法实现前端搜索功能（完整代码）

完整代码，打包成资源上传了。需要研究的可以等资源上传成功下载学习。

说明一下：
下载后，需要终端执行命令：
npm i，安装依赖
npm run dev运行项目

有不明白的，欢迎评论区留言讨论。如果本文解决了你的问题，对你有帮助，还望不吝三连🙂🙂🙂

---