前端实现列表多条件查询/搜索功能两种实现方法
作者：小金子J
我们在开发过程中,特别是数据库系统的开发中经常会遇到多条件的查询状况这篇文章主要给大家介绍了关于前端实现列表多条件查询/搜索功能的两种实现方法,需要的朋友可以参考下
前言
在前端开发中，实现一个多条件查询功能是常见的需求，尤其是在处理表格数据时。下面我将通过一个简单的Vue组件示例，来展示如何实现一个多条件查询功能。
组件数据结构
首先，定义组件的数据结构，包括查询条件和过滤后的表格数据：
data() {
return {
// 列表搜索条件
cseAttributeData: {
parcelCode: "",
landType: "",
isIndexesCover: "",
toSellTaskState: "",
manageState: "",
signDownState: "",
withdrawalWay: ""
},
filterTableData: [], // 原始数据
tableData: [] // 过滤后的数据
};
}方法一：逐个条件过滤
此方法是通过遍历所有查询条件，然后对每个条件应用过滤函数。这种方法的好处是逻辑清晰，易于理解。
methods: {
// 图层属性列表查询按钮
cseAttributeDataSubmit() {
let arr = this.filterTableData;
// 通过遍历key值来循环处理
Object.keys(this.cseAttributeData).forEach(key => {
// 调用筛选方法
arr = this.filterFunc(this.cseAttributeData[key], key, arr);
});
// 为表格赋值
this.tableData = arr;
},
// 筛选方法
filterFunc(val, target, filterArr) {
// 参数不存在或为空时，返回全部数据
if (!val) return filterArr;
// 应用过滤条件
return filterArr.filter(item => item[target] && item[target].indexOf(val) > -1);
}
}方法二：一次性过滤所有条件
此方法是一次性过滤所有条件，这种方法可以减少遍历次数，提高效率。
methods: {
// 图层属性列表查询按钮
cseAttributeDataSubmit() {
this.tableData = this.filterTableData.filter(item => {
// 遍历所有查询条件
for (const [k, v] of Object.entries(this.cseAttributeData)) {
if (v) { // 如果条件不为空
if (!item[k] || !item[k].includes(v)) {
return false; // 如果当前项不包含查询条件，则过滤掉
}
}
}
return true; // 如果所有条件都满足，则保留
});
}
}总结
两种方法各有优缺点：
- 方法一逻辑清晰，易于理解，但可能效率略低。
- 方法二效率更高，但逻辑稍微复杂一些。
在选择实现方法时，可以根据实际项目需求和数据量大小来决定使用哪种方法。如果数据量不大，推荐使用方法一，因为它更易于维护和理解。如果数据量较大，或者需要更高效的查询，可以考虑使用方法二。
注意事项
- 确保查询条件不为空时才进行过滤。
- 根据实际数据类型，可能需要对查询条件和数据进行类型转换，比如
toLowerCase()。 - 考虑使用Vue的计算属性（computed）来自动更新表格数据，以提高性能。
到此这篇关于前端实现列表多条件查询/搜索功能两种实现方法的文章就介绍到这了,更多相关前端列表多条件查询/搜索功能内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！