??博主：小貓娃來(lái)啦
??本文核心：vue封裝——使用js高階函數(shù)實(shí)現(xiàn)多條件搜索功能

類(lèi)比一下react寫(xiě)法

之前出過(guò)一個(gè)react寫(xiě)法的前端搜索（react寫(xiě)法——使用js高階函數(shù)實(shí)現(xiàn)多條件搜索功能）
今天我們?cè)傺芯恳幌聉ue中怎么實(shí)現(xiàn)。
react和vue有什么區(qū)別？
這個(gè)區(qū)別要細(xì)說(shuō)可太多了，但是最終都能歸為語(yǔ)法不同，封裝方式不同，但本質(zhì)一樣，都是基于JavaScript的兩種不同框架語(yǔ)言（相當(dāng)于龍生九子，各有不同）。

用react實(shí)現(xiàn)前端搜索功能，我們有三步：
第一步：創(chuàng)建一個(gè)假數(shù)據(jù)，這一步是為了模擬后端接口返回給前端使用的數(shù)據(jù)，格式一般是數(shù)組包對(duì)象形式。
第二步：引入表格組件，將數(shù)據(jù)進(jìn)行Dom渲染。這個(gè)時(shí)候我們要準(zhǔn)備三個(gè)變量，data變量用來(lái)接收存放數(shù)據(jù)，list變量用來(lái)做數(shù)據(jù)渲染，search變量用來(lái)數(shù)據(jù)篩選
第三步：利用js高階函數(shù)來(lái)篩選條件，有幾個(gè)條件就篩選幾次。篩選條件之間是交集關(guān)系。

那么vue呢？

之前用react寫(xiě)法實(shí)現(xiàn)前端搜索功能時(shí)，我們是從思路出發(fā)的，并不局限于框架語(yǔ)言。所以我們用vue實(shí)現(xiàn)前端搜索，思路也是一樣，還是這三步。不過(guò)我們要做一個(gè)新的東西，就是封裝。

因?yàn)槲覀儗⒁粋€(gè)搜索功能寫(xiě)好后，這就相當(dāng)于是一個(gè)工具函數(shù)。 在需要這一功能的時(shí)候，我們?nèi)フ{(diào)用即可，所以我們把這個(gè)功能封裝起來(lái)，需要的時(shí)候?qū)爰纯伞?/p>

這樣也算是實(shí)現(xiàn)了代碼復(fù)用，并優(yōu)化了性能。

我們依然采用盡可能最簡(jiǎn)單的方式來(lái)實(shí)現(xiàn)，其實(shí)vue實(shí)現(xiàn)會(huì)更加容易。如果用react要100行實(shí)現(xiàn)，那么vue就是50行。

用vue寫(xiě)法來(lái)實(shí)現(xiàn)，思路+步驟：

第一步：準(zhǔn)備數(shù)據(jù)

創(chuàng)建一個(gè)假數(shù)據(jù)，這一步是為了模擬后端接口返回給前端使用的數(shù)據(jù)，格式一般是數(shù)組包對(duì)象形式。

const list = ref([
  { id: 1, name: '張溫', age: '19', gender: '男' ,skill:`狂風(fēng)絕息斬`},
  { id: 2, name: '張三豐', age: '38', gender: '男',skill:`封塵絕念斬` },
  { id: 3, name: '張無(wú)忌', age: '25', gender: '男',skill:`天霸橫空烈擊` },
  { id: 4, name: '王無(wú)維', 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:`一點(diǎn)寒芒先到` },
  { id: 10, name: '劍魔', age: '87', gender: '女',skill:`狐臭` },
  { id: 11, name: '蠻族之王', age: '17', gender: '女',skill:`五神之力` },
  { id: 12, name: '無(wú)雙劍姬', age: '25', gender: '女',skill:`鐵布衫` },
  { id: 13, name: '青鋼影', age: '45', gender: '女',skill:`天音波` },
  { id: 14, name: '波比', age: '36', gender: '女',skill:`神龍擺尾` },
  { id: 15, name: '樂(lè)芙蘭', age: '17', gender: '女',skill:`金鐘罩` },
  { id: 16, name: '大樹(shù)', age: '23', gender: '女',skill:`困天地` },
  { id: 17, name: '蛤蟆', age: '18', gender: '女',skill:`一口吃掉` },
  { id: 18, name: '永恩', age: '17', gender: '女',skill:`哈撒給` },
])

這里我們直接給了list變量，相當(dāng)于接口返回給前端的數(shù)據(jù)，我們深拷貝了一次給list變量。（這也是我們要聲明的第一個(gè)變量）

第二步：根據(jù)數(shù)據(jù)結(jié)構(gòu)渲染Dom

我們要聲明三個(gè)變量。第一個(gè)變量叫l(wèi)ist，用于接收接口返回的數(shù)據(jù)。第二個(gè)變量data，用于渲染表格。第三個(gè)變量search，用于存放處理篩選條件后的數(shù)據(jù)。

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>

第三步：處理篩選條件

數(shù)據(jù)中有5個(gè)字段，分別是id，name，age，gender，skill。所以我們最多可以設(shè)置5個(gè)搜索框，但是一般情況下，不會(huì)設(shè)置id搜索框，意義不大。
最終我們選擇name，age，gender，skill四個(gè)字段作為條件，設(shè)置四個(gè)搜索框。并給四個(gè)搜索框綁定input事件，即一邊輸入一遍顯示，屬于雙向數(shù)據(jù)綁定，這種搜索體驗(yàn)感非常爽。

    <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>

其中綁定的函數(shù)searchEvent，我們要用到j(luò)s高階函數(shù)實(shí)現(xiàn)多條件篩選。

function searchEvent(){
  let arr = [...data.value]
  for (const item in search) {
    arr = arr.filter((row) => row[item].includes(search[item].value))
  }
  return arr
}

至此已經(jīng)實(shí)現(xiàn)了前端搜索功能
??效果：

第四步：封裝

這一步，我們將功能封裝一下。封裝的核心，其實(shí)是封裝邏輯，也就是說(shuō)：多個(gè)地方都需要用到搜索這一功能，其實(shí)用的是這一邏輯。所以封裝的是邏輯代碼。
最終我們App.vue頁(yè)面只保留

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

新建一個(gè)search.js文件，邏輯代碼封裝在這個(gè)文件中：

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
}

同時(shí)在App.vue頁(yè)面需要導(dǎo)入

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

開(kāi)源地址（完整代碼）

gitee資源下載：點(diǎn)擊此處
csdn資源下載：點(diǎn)擊此處
完整代碼，打包成資源上傳了。需要研究的可以等資源上傳成功下載學(xué)習(xí)。

說(shuō)明一下：
下載后，需要終端執(zhí)行命令：
npm i，安裝依賴
npm run dev運(yùn)行項(xiàng)目

有不明白的，歡迎評(píng)論區(qū)留言討論。如果本文解決了你的問(wèn)題，對(duì)你有幫助，還望不吝三連??????

文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-514565.html

到了這里，關(guān)于vue寫(xiě)法——使用js高階函數(shù)實(shí)現(xiàn)多條件搜索功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！