vue3實(shí)現(xiàn)多條件搜索功能的示例代碼
搜索功能在后臺(tái)管理頁(yè)面中非常常見(jiàn),本篇就著重講一下vue3-admin-element框架中如何實(shí)現(xiàn)一個(gè)頂部多條件搜索功能
一、首先需要在vue頁(yè)面的<template></template>中寫(xiě)入對(duì)應(yīng)的結(jié)構(gòu)
<!-- 搜索 --> <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="商品名稱(chēng):" prop="goods_name"> <el-input v-model="searchParam.goods_name" placeholder="請(qǐng)輸入商品名稱(chēng)" /> </el-form-item> <el-form-item label="隸屬店鋪:" prop="shoptitle"> <el-input v-model="searchParam.shoptitle" placeholder="請(qǐng)輸入隸屬店鋪" /> </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: '' })
三、搜索按鈕綁定的函數(shù)
//搜索 const refreshList = () => { console.log(searchParam);//搜索數(shù)據(jù)的對(duì)象 console.log(arr.value);//表里的數(shù)據(jù) 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 過(guò)濾條件 // @param data 需要過(guò)濾的數(shù)據(jù) 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: `沒(méi)有相關(guān)信息`, }); data = []; arr.value = data; } }
其中obj是要搜索的字段對(duì)應(yīng)的對(duì)象,arr是從接口獲取的列表數(shù)據(jù)源。
到此這篇關(guān)于vue3實(shí)現(xiàn)多條件搜索功能的示例代碼的文章就介紹到這了,更多相關(guān)vue多條件搜索內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
在Vue.js應(yīng)用中實(shí)現(xiàn)分布式搜索和全文搜索
分布式搜索和全文搜索在現(xiàn)代應(yīng)用程序中變得越來(lái)越重要,因?yàn)樗鼈兛梢詭椭脩?hù)快速查找和檢索大量數(shù)據(jù),Elasticsearch是一種強(qiáng)大的分布式搜索引擎,本文將介紹如何在Vue.js應(yīng)用程序中實(shí)現(xiàn)分布式搜索和全文搜索,以及如何與Elasticsearch集成,需要的朋友可以參考下2023-11-11前端配合后端實(shí)現(xiàn)Vue路由權(quán)限的方法實(shí)例
一開(kāi)始我還以為vue的路由只能用在工程化的項(xiàng)目里面,其實(shí)不然,下面這篇文章主要給大家介紹了關(guān)于前端配合后端實(shí)現(xiàn)Vue路由權(quán)限的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05Vue如何通過(guò)Vue.prototype定義原型屬性實(shí)現(xiàn)全局變量
在Vue.js開(kāi)發(fā)中,通過(guò)原型屬性為Vue實(shí)例添加全局變量是一種常見(jiàn)做法,使用$前綴命名,可以避免與組件內(nèi)部的數(shù)據(jù)、方法或計(jì)算屬性產(chǎn)生命名沖突,這種方式簡(jiǎn)單有效,確保了變量在所有Vue實(shí)例中的可用性,同時(shí)保持全局作用域的整潔2024-10-10