案例場(chǎng)景:
成都創(chuàng)新互聯(lián)堅(jiān)持“要么做到,要么別承諾”的工作理念,服務(wù)領(lǐng)域包括:成都做網(wǎng)站、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù),滿足客戶于互聯(lián)網(wǎng)時(shí)代的神木網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求,幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴!
現(xiàn)在有個(gè)文章管理模塊,在該模塊中有欄目選擇、文章搜索、分頁(yè)功能。這些功能改變其中一個(gè)都會(huì)對(duì)查詢的文章有所改變。案例圖如下:
實(shí)現(xiàn)方案有兩種:
其一、我們開(kāi)始可能會(huì)想到對(duì)每個(gè)功能綁定一個(gè)處理事件,但是這樣做我們對(duì)數(shù)據(jù)的維護(hù)工作將大大加大,而且用這樣方案做數(shù)據(jù)的疊加篩選不是很好。
方案二、我們將所有提交的數(shù)據(jù)放到一起維護(hù)然后再進(jìn)行深度監(jiān)聽(tīng),當(dāng)某一個(gè)值、或多個(gè)值的改變時(shí),在去進(jìn)行數(shù)據(jù)的查詢,此時(shí)問(wèn)題也變得更易于理解與維護(hù),具體實(shí)現(xiàn)如下:
分頁(yè)代碼如下:
<template> <el-pagination background :page-size="params.pageSize" @current-change="handlePaginationChange" layout="prev, pager, next" :total="total"> </el-pagination> </template>
下拉選擇框、搜索框代碼如下:
<template> //下拉選擇框 <el-select v-model="params.categoryId" placeholder="請(qǐng)選擇欄目" size='mini' v-loading="loadingCategory"> <el-option :key='c.id' v-for='c in categories' :label="c.name" :value="c.id"></el-option> </el-select> //搜索框 <el-input placeholder="請(qǐng)輸入關(guān)鍵字" prefix-icon="el-icon-search" v-model="params.keywords" clearable> </el-input> </template>
數(shù)據(jù)維護(hù)、與方法(事件處理)
export default{ data(){ return{ ... //其它的數(shù)據(jù)省略 params:{ //存儲(chǔ)分頁(yè)、搜索數(shù)據(jù) page:0, pageSize:3, categoryId:undefined, keywords:undefined } } }, watch:{ params:{ handler(val){ this.findArticle(); //查找文章 }, deep:true //深度監(jiān)聽(tīng) }, methods:{ //處理分頁(yè) handlePaginationChange(page){ this.params.page=page-1; }, //查詢文章 findArticle(){ axios.get('',{params:this.params}) .then(()=>{}) .catch(()=>{}) } } }
小結(jié):通過(guò)上面的雙向數(shù)據(jù)綁定、我們將所有數(shù)據(jù)放到 params中集中管理(進(jìn)行數(shù)據(jù)的監(jiān)聽(tīng))、當(dāng)數(shù)據(jù)發(fā)生改變時(shí)我們?nèi)フ?qǐng)求數(shù)據(jù),來(lái)局部更新表格中的數(shù)據(jù)。
存在問(wèn)題與解決:
1.這種實(shí)現(xiàn)方法的實(shí)現(xiàn)是基于所有數(shù)據(jù)的和查詢、如果我們的需求是,當(dāng)每次選擇欄目時(shí),都要顯示第一頁(yè)欄目的文章;
解決方案:
一、此時(shí)我們可以給選擇的欄目加change事件、然后將page重置為第一頁(yè)(本項(xiàng)目是從第0頁(yè)開(kāi)始),具體代碼如下:
1.1 將分頁(yè)中動(dòng)態(tài)綁定page 即: :current-page="(params.page+1)"
<template> <el-pagination background :page-size="params.pageSize" :total="total" layout="prev, pager, next" :current-page="(params.page+1)" //將頁(yè)數(shù)進(jìn)行動(dòng)態(tài)綁定這樣利于我們操作頁(yè)數(shù)的改變 @current-change="handlePaginationChange" > </el-pagination> </template>
1.2 給select添加change事件
<template> //下拉選擇框 <el-select v-model="params.categoryId" placeholder="請(qǐng)選擇欄目" size='mini' @change="selectChange" > <el-option :key='c.id' v-for='c in categories' :label="c.name" :value="c.id"> </el-option> </el-select> </template> export default{ //重置page為0 selectChange(){ this.params.page=0; }, }
***:此時(shí)我們存在的問(wèn)題是如果我們先點(diǎn)擊某一頁(yè)后然后再點(diǎn)擊欄目,那么會(huì)基于本頁(yè)去查詢選擇欄目的信息。
二、關(guān)于搜索時(shí)我的理想是對(duì)當(dāng)前頁(yè)信息進(jìn)行篩選、如果有人想要做出對(duì)所有數(shù)據(jù)的篩選、那么此時(shí)我們應(yīng)該將keywords單獨(dú)拿出來(lái)進(jìn)行,搜索這樣解決起來(lái)比加條件簡(jiǎn)單許多。
只是我目前對(duì)多個(gè)信息篩選做出的一個(gè)解決方案、如果有更加友好的處理方法、希望能留言。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
本文標(biāo)題:vue實(shí)現(xiàn)條件疊加搜索的解決方法
網(wǎng)站地址:http://www.chinadenli.net/article18/gooigp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供、定制開(kāi)發(fā)、網(wǎng)站收錄、網(wǎng)站維護(hù)、Google、靜態(tài)網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)