vue antd table表格的增删改查（三）input输入框根据关键字查询【后台管理系统filter与indexOf嵌套】
知识回调场景复现利用filter和indexOf方法实现模糊查询1.查询对象为单层的数组元素2.查询对象为多层的数组元素（两层为例）3.查询对象为复杂的数组元素
知识回调
文章内容文章链接vue3 antd table表格的增删改查（一）input输入框根据关键字搜索【后台管理系统纯前端filter过滤】https://blog.csdn.net/XSL_HR/article/details/128072584?spm=1001.2014.3001.5501vue3 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.indexOf(searchData.bannerTitle) !== -1) {
newListData.push(item);
}
})
tableData.value = newListData
} else {
// 获取数据
getAllBanner()
}
}
// 数据监听
watch(
[() => searchData.bannerTitle],
() => {
// 如果输入框中的内容为空，则再次请求数据
if (searchData.bannerTitle === "") {
// 获取数据
getAllBanner()
}
}
);
详细解释：
newListData用于存放筛选过后符合条件的数据筛选首先要对搜索框内容进行校验，搜索内容存在且不能是空字符串按照具体需求过滤数组元素，使用indexOf进行数据的二重筛查，最终返回符合要求的数据watch进行数据监听，如果输入的数据为空，那么我们将重新调用获取数据的接口，刷新表格数据
实现效果： 以上针对最简单的数据结构实现的模糊查询，下面我们继续介绍查询对象为多层的数组元素。
2.查询对象为多层的数组元素（两层为例）
这种多层的数组元素显然要比单层的简单数组元素要复杂一些，多层数组元素是指我们需要查询的元素被多层数组包裹。但是利用filter和indexOf的嵌套，还是很容易的。
首先，我们还是先看看后端返回的数据结构 不难发现，我们需要查询的元素被两层数组嵌套，因此模糊查询也需要深入一层。
源代码：（含详细注释）
// 搜索证书
const onSearch = () => {
let newListData:any = []
if (searchData.certificateName && searchData.certificateName !== '') {
tableData.value.filter(item => {
// 将表格数据做第一次筛选 得到表格数据的每一项元素 记为item
if (item.memberName.filter((item1:string) =>{
// 根据我们需要查询的元素进行第二层筛选
// 我们需要查询的是memberName 这是一个数组元素
// 因此进行第二次筛选 得到memberName里面的每一项元素 记为item1
if(item1.indexOf((searchData.certificateName)) !== -1){
// 利用indexOf进行模糊查询 判断item1中是否含有输入的字符串
newListData.push(item);
}
}))
tableData.value = newListData
})
} else {
// 获取数据
getAllCertificate()
}
}
// 数据监听
watch(
[() => searchData.certificateName],
() => {
// 如果输入框中的内容为空，则再次请求数据
if (searchData.certificateName === "") {
// 获取数据
getAllCertificate()
}
}
);
实现效果： 以上针对多层的数组元素实现了模糊查询，下面进一步介绍更复杂的数组元素如何进行模糊查询。
3.查询对象为复杂的数组元素
复杂的数组元素一般是指，后端返回的数据像洋葱一样，一层包一层，并且具有很多种数据类型，比如常见的json格式，数组格式和基础的字符串格式的混合体。所以对于复杂的数组元素，实现模糊查询的关键是要剖析数据结构，调整原先的代码。
首先，我们还是来看看后端返回的数据 可以看到，数据类型还是比较复杂的，我们需要查询的memberName就被包了好几层，更重要的是，在整个表单数据的数组里，每一项元素都有三个子元素，而每一种子元素的类型又会有不一样。
直接上代码（含详细注释）
// 搜索档案
const onSearch = () => {
let newListData:any = []
if (searchData.files_name && searchData.files_name !== '') {
tableData.value.filter(item => {
// 拿到表格的每一项数据
// 每一项数据中的第一条的memberName即为我们需要查询的数据
if (item[0].memberName.indexOf(searchData.files_name) !== -1) {
newListData.push(item);
}
})
tableData.value = newListData
} else {
tableData.value = []
// 获取数据
getAllFileData()
}
}
// 数据监听
watch(
[() => searchData.files_name],
() => {
// 如果输入框中的内容为空，则再次请求数据
if (searchData.files_name === "") {
tableData.value = []
// 获取数据
getAllFileData()
}
}
);
实现效果：
以上便是本期博客的全部内容，分别通过三种复杂程度的数据类型实现模糊查询，从中我们可以发现，不管是什么样的数据，关键都在于数据的处理与分析。模糊查询的代码是能够封装且能够复用，当然也有不足之处，比如搜索的数据可以缓存，避免数据丢失（这个后期会专门介绍）。
下期文章将介绍vue antd checkbox多选框限制选择个数
感兴趣的小伙伴可以订阅本专栏，方便后续了解学习~
觉得这篇文章有用的小伙伴们可以点赞➕收藏➕关注哦~
推荐链接
您阅读本篇文章共花了：
发表评论