vue写法——使用js高阶函数实现多条件搜索功能

这篇具有很好参考价值的文章主要介绍了vue写法——使用js高阶函数实现多条件搜索功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

vue写法——使用js高阶函数实现多条件搜索功能
🙂博主:小猫娃来啦
🙂本文核心: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搜索框,意义不大。
最终我们选择nameagegenderskill四个字段作为条件,设置四个搜索框。并给四个搜索框绑定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
}

至此已经实现了前端搜索功能
⭐⭐效果:
vue写法——使用js高阶函数实现多条件搜索功能


第四步:封装

这一步,我们将功能封装一下。封装的核心,其实是封装逻辑,也就是说:多个地方都需要用到搜索这一功能,其实用的是这一逻辑。所以封装的是逻辑代码。
最终我们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运行项目

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

vue写法——使用js高阶函数实现多条件搜索功能文章来源地址https://www.toymoban.com/news/detail-514565.html


到了这里,关于vue写法——使用js高阶函数实现多条件搜索功能的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3项目使用pdf.js插件实现:搜索高亮、修改pdf.js显示的页码、向pdf.js传值、控制搜索、处理接口文件流

    官网地址:http://mozilla.github.io/pdf.js/ 中文文档地址:https://gitcode.gitcode.host/docs-cn/pdf.js-docs-cn/print.html PDF.js是基于HTML5技术构建的,用于展示可移植文档格式的文件(PDF),它可以在现代浏览器中使用且无需安装任何第三方插件。 pdf.js主要包含两个库文件 pdf.js:负责API解析 pdf.wor

    2024年02月13日
    浏览(67)
  • 【Vue】使用print.js插件实现打印预览功能,超简单

    目录 一、实现效果  二、实现步骤 【1】安装插件 【2】在需要打印的页面导入 【3】在vue文件中需要打印的部分外层套一层div,给div设置id。作为打印的区域 【4】在打印按钮上添加打印事件 【5】在methods中添加点击事件 三、完整代码   print.js插件,可以打印html、pdf、json数

    2024年02月14日
    浏览(48)
  • vue 使用高德地图实现自定义选取起点和终点功能,支持搜索地址跳转定位(保姆级教程)

    1. 起点终点选择  2. 地址搜索   1. 获取高德地图key 1.1  访问高德地图官网注册完成后登录,进入控制台  1.2  左侧 应用管理-我的应用,点击创建新应用 1.3 点击添加   1.4 选择 Web端(JS API)  1.5 创建完成,得到key和安全密钥   2. 引入高德地图npm包 提示:以下代码全部在*.vu

    2024年02月04日
    浏览(46)
  • JS实现搜索功能页面(可搜索,无需数据库,无后端)

    很多刚学习前端的小伙伴想做一个搜索页面,一看要做后端又要数据库的可能就放弃了,这里给大家带来一个不需要数据库的,也可以使用的搜索功能页面。网页包含了3个功能:搜索框,类别选项,价格进度条。 搜索框是实时搜索的,而且做了不区分英语大小写,也支持中

    2024年02月11日
    浏览(43)
  • 在vue项目里使用js-web-screen-shot 实现截图的功能

    怎么在前端项目里添加一个截图功能呢,今天我们使用js-web-screen-shot  来实现一下,超详细的代码,教你轻轻松松做截图。以下是基于vue3+ts

    2024年04月15日
    浏览(40)
  • VUE element-ui实现表格动态展示、动态删减列、动态排序、动态搜索条件配置、表单组件化。

        1、本组件支持列表的表头自定义配置,checkbox实现 2、本组件支持列表列排序,vuedraggable是拖拽插件,上图中字段管理里的拖拽效果 ,需要的话请自行npm install 3、本组件支持查询条件动态配置,穿梭框实现 https://download.csdn.net/download/askuld/88216937

    2024年01月16日
    浏览(60)
  • 使用JavaScript和Vue.js框架开发的电子商务网站,实现商品展示和购物车功能

    引言: 随着互联网的快速发展和智能手机的普及,电子商务行业正迎来一个全新的时代。越来越多的消费者选择网上购物,而不再局限于传统的实体店。这种趋势不仅仅是改变了消费者的习惯购物,也给企业带来了巨大的商机。为了不断满足消费者的需求,电子商务网站需要

    2024年02月15日
    浏览(54)
  • Vue前端:几种搜索框功能实现

    相信很多朋友遇到需要在网页上增加一个搜索框的功能,本文简单介绍两种搜索框的实现。 搜索框的功能一般分为: (1)即时检索,即搜索框输入内容自动检索,会随着搜索内容的不断输入,改变界面的显示 (2)点击搜索按钮再开始搜索 以下分别介绍这两种搜索框的简单

    2024年02月02日
    浏览(39)
  • 只使用JS怎么给静态页面网站添加站内全局搜索功能?

    💂 个人网站:【 海拥】【神级代码资源网站】【办公神器】 🤟 基于Web端打造的:👉轻量化工具创作平台 💅 想寻找共同学习交流的小伙伴,请点击【全栈技术交流群】 静态页面通常由HTML、CSS 和 JavaScript 等静态文件组成,这些文件在服务器上不会动态生成或修改,所以加

    2024年02月05日
    浏览(42)
  • JS数组函数 reduce() 的用法—包含基础、进阶、高阶用法

    目录 一、语法剖析 二、实例讲解 1. 求数组项之和 2. 求数组项最大值 3. 数组去重 三、其他相关方法 1. reduceRight() 2. forEach()、map()、every()、some()和filter() 四、重点总结 先看w3c语法 ✔ 常见用法 数组求和 数组最大值 ✔ 进阶用法 数组对象中的用法  求字符串中字母出现的次数

    2024年01月20日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包