vue實(shí)現(xiàn)條件疊加搜索的解決方法

更新時(shí)間：2019年05月28日 10:34:15 作者：平常心_c

這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)條件疊加搜索的解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

案例場(chǎng)景:

現(xiàn)在有個(gè)文章管理模塊，在該模塊中有欄目選擇、文章搜索、分頁(yè)功能。這些功能改變其中一個(gè)都會(huì)對(duì)查詢的文章有所改變。案例圖如下:

實(shí)現(xiàn)方案有兩種：

其一、我們開始可能會(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è)開始),具體代碼如下:

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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: