vue3多条件搜索功能

搜索功能在后台管理页面中非常常见,本篇就着重讲一下vue3-admin-element框架中如何实现一个顶部多条件搜索功能

一、首先需要在vue页面的<template></template>中写入对应的结构

html 复制代码
        <!-- 搜索 -->
        <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是我定义的需要搜索的字段

javascript 复制代码
//   搜索字段
const searchParam = reactive({
    goods_name: '',
    shoptitle: ''
})

三、搜索按钮绑定的函数

javascript 复制代码
//搜索
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是从接口获取的列表数据源。

相关推荐
神仙别闹1 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器7 分钟前
指定阿里镜像原理
前端
枷锁—sha12 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha14 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜29 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
DanB2442 分钟前
html复习
javascript·microsoft·html
汉得数字平台1 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹1 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_6 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20156 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss