🙂博主:小猫娃来啦
🙂本文核心: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) {
arr = arr.filter((row) =>{
return searchObj[item].value?row[item].includes(searchObj[item].value):true;
})
}
return arr
}
同时在App.vue
页面需要导入
import {handleSearch} from "./search.js";
开源地址(完整代码)
gitee资源下载:点击此处
csdn资源下载:点击此处
完整代码,打包成资源上传了。需要研究的可以等资源上传成功下载学习。
说明一下:
下载后,需要终端执行命令:npm i
,安装依赖npm run dev
运行项目
有不明白的,欢迎评论区留言讨论。如果本文解决了你的问题,对你有帮助,还望不吝三连🙂🙂🙂文章来源:https://www.toymoban.com/news/detail-514565.html
文章来源地址https://www.toymoban.com/news/detail-514565.html
到了这里,关于vue写法——使用js高阶函数实现多条件搜索功能的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!