vue3實現(xiàn)多條件搜索功能的示例代碼

更新時間：2023年08月11日 08:58:45 作者：smallmww

搜索功能在后臺管理頁面中非常常見，這篇文章就著重講一下vue3-admin-element框架中如何實現(xiàn)一個頂部多條件搜索功能，感興趣的小伙伴可以了解一下

搜索功能在后臺管理頁面中非常常見，本篇就著重講一下vue3-admin-element框架中如何實現(xiàn)一個頂部多條件搜索功能

一、首先需要在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: ''
})

三、搜索按鈕綁定的函數(shù)

//搜索
const refreshList = () => {
    console.log(searchParam);//搜索數(shù)據(jù)的對象
    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 過濾條件
    // @param data 需要過濾的數(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: `沒有相關信息`,
        });
        data = [];
        arr.value = data;
    }
}

其中obj是要搜索的字段對應的對象，arr是從接口獲取的列表數(shù)據(jù)源。

到此這篇關于vue3實現(xiàn)多條件搜索功能的示例代碼的文章就介紹到這了,更多相關vue多條件搜索內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: