vue antd table表格的增删改查（三）input输入框根据关键字模糊查询【后台管理系统 使用filter与indexOf嵌套】

知识回调

文章内容	文章链接
vue3 antd table表格的增删改查（一）input输入框根据关键字搜索【后台管理系统纯前端filter过滤】	https://blog.csdn.net/XSL_HR/article/details/128072584?spm=1001.2014.3001.5501
vue3 antd table表格的增删改查（二）input输入框根据关键字搜索【后台管理系统 请求后端接口 前后端交互】	https://blog.csdn.net/XSL_HR/article/details/128089801?spm=1001.2014.3001.5501
【JavaScript基础语法】web前端判断数组对象是否含有某个值的方法（6种）	https://blog.csdn.net/XSL_HR/article/details/129787319?spm=1001.2014.3001.5501

场景复现

在后台管理系统的项目开发中，对于数据的查询无处不在，我们可以通过输入全称来进行百分百比对的查询，也可以通过输入关键字进行模糊查询。具体选择什么样的查询效果，可以根据具体需求来选择。不过一般都是以关键字模糊查询为基础。

具体需求： input搜索框可以输入关键字进行模糊查询
解决方法：使用JavaScript原生的filter方法和indexOf方法

实现效果：（输入关键字即可搜索相关结果）

---

下面介绍具体的解决方法，分别针对三种不同的数据情况。

利用filter和indexOf方法实现模糊查询

点击查看原生JavaScript判断数组对象是否有某个元素的方法
搜索框组件的封装和值的双向绑定在这里就不过多解释了，重点介绍模糊查询的实现。

1.查询对象为单层的数组元素

这种数据的结构显然是最简单的，单层是指我们需要查询的数据只被一层数组包裹。运用我们往期封装的模糊查询，稍作更改替换即可。

• 首先我们看看后端返回的数据结构，数据结构非常简单，需要搜索的内容是string类型，我们只需要使用一层过滤即可实现模糊查询。
  

源代码：

// 搜索广告
const onSearch = () => {
   
  let newListData: any = []
  if (searchData.bannerTitle && searchData.bannerTitle !== '') {
   
    tableData.value.filter(item => {
   
      if (item.bannerTitle