vue3实现多条件搜索功能的示例代码
作者：smallmww
搜索功能在后台管理页面中非常常见，这篇文章就着重讲一下vue3-admin-element框架中如何实现一个顶部多条件搜索功能，感兴趣的小伙伴可以了解一下
搜索功能在后台管理页面中非常常见，本篇就着重讲一下vue3-admin-element框架中如何实现一个顶部多条件搜索功能
一、首先需要在vue页面的<template></template>中写入对应的结构
<!-- 搜索 -->
<div style="display: flex; justify-content: space-between; width: 85%;padding-top: 20px;">
<div style="display: flex; justify-content: space-between; width: 86%;margin-left: 7%;">
<el-form-item label="商品名称：" prop="goods_name">
<el-input v-model="searchParam.goods_name" placeholder="请输入商品名称" />
</el-form-item>
<el-form-item label="隶属店铺：" prop="shoptitle">
<el-input v-model="searchParam.shoptitle" placeholder="请输入隶属店铺" />
</el-form-item>
</div>
</div>
<div @click="refreshList">
<div style="display: flex;justify-content: flex-end; width: 80%; margin-left: 10%;margin-top: 10px;">
<el-button type="primary" :icon="Search" style=" padding-left: 10px; padding-right:10px;">搜索</el-button>
</div>
</div>二、其中searchParam是我定义的需要搜索的字段
// 搜索字段
const searchParam = reactive({
goods_name: '',
shoptitle: ''
})三、搜索按钮绑定的函数
//搜索
const refreshList = () => {
console.log(searchParam);//搜索数据的对象
console.log(arr.value);//表里的数据
let obj = {}
obj = {
goods_name: searchParam.goods_name,
shoptitle: searchParam.shoptitle
}
// 排除空
for (let key in obj) {
if (obj[key] == '' || obj[key] == null) {
delete obj[key]
}
}
// @param condition 过滤条件
// @param data 需要过滤的数据
let filter = (condition, data) => {
return data.filter(item => {
return Object.keys(condition).every(key => {
return String(item[key]).toLowerCase().includes(
String(condition[key]).trim().toLowerCase())
})
})
}
let data = filter(obj, arr.value);
console.log(data);
if (data != '') {
arr.value = data
} else {
ElMessage({
type: 'error',
message: `没有相关信息`,
});
data = [];
arr.value = data;
}
}其中obj是要搜索的字段对应的对象，arr是从接口获取的列表数据源。
到此这篇关于vue3实现多条件搜索功能的示例代码的文章就介绍到这了,更多相关vue多条件搜索内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！