专题网站可以做什么,怎么做网站滑动图片部分h5,WordPress图片及插件,建设集团公司简介vue antd table表格的增删改查#xff08;三#xff09;input输入框根据关键字查询【后台管理系统filter与indexOf嵌套】知识回调场景复现利用filter和indexOf方法实现模糊查询1.查询对象为单层的数组元素2.查询对象为多层的数组元素#xff08;两层为例#xff09;3.查询对…
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?spm1001.2014.3001.5501vue3 antd table表格的增删改查二input输入框根据关键字搜索【后台管理系统 请求后端接口 前后端交互】https://blog.csdn.net/XSL_HR/article/details/128089801?spm1001.2014.3001.5501【JavaScript基础语法】web前端判断数组对象是否含有某个值的方法6种https://blog.csdn.net/XSL_HR/article/details/129787319?spm1001.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 { // 将表格数据做第一次筛选 得到表格数据的每一项元素 记为itemif (item.memberName.filter((item1:string) { // 根据我们需要查询的元素进行第二层筛选 // 我们需要查询的是memberName 这是一个数组元素 // 因此进行第二次筛选 得到memberName里面的每一项元素 记为item1if(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多选框限制选择个数感兴趣的小伙伴可以订阅本专栏方便后续了解学习~觉得这篇文章有用的小伙伴们可以点赞➕收藏➕关注哦~
