案例場景:

成都創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都做網(wǎng)站、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的神木網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

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

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

其一、我們開始可能會想到對每個功能綁定一個處理事件，但是這樣做我們對數(shù)據(jù)的維護工作將大大加大，而且用這樣方案做數(shù)據(jù)的疊加篩選不是很好。

方案二、我們將所有提交的數(shù)據(jù)放到一起維護然后再進行深度監(jiān)聽，當(dāng)某一個值、或多個值的改變時，在去進行數(shù)據(jù)的查詢，此時問題也變得更易于理解與維護，具體實現(xiàn)如下:

分頁代碼如下:

下拉選擇框、搜索框代碼如下: 

數(shù)據(jù)維護、與方法(事件處理)

export default{
 data(){
  return{
   ... //其它的數(shù)據(jù)省略
 
   params:{ //存儲分頁、搜索數(shù)據(jù)
   page:0,
   pageSize:3,
   categoryId:undefined,
   keywords:undefined
   }
  }
 },
 watch:{
 params:{
  handler(val){
   this.findArticle(); //查找文章
  },
  deep:true //深度監(jiān)聽
 },
 methods:{
  //處理分頁
  handlePaginationChange(page){
   this.params.page=page-1;
  }, 
  //查詢文章
  findArticle(){
   axios.get('',{params:this.params})
   .then(()=>{})
   .catch(()=>{})
  }
 }
 
}

小結(jié)：通過上面的雙向數(shù)據(jù)綁定、我們將所有數(shù)據(jù)放到 params中集中管理(進行數(shù)據(jù)的監(jiān)聽)、當(dāng)數(shù)據(jù)發(fā)生改變時我們?nèi)フ埱髷?shù)據(jù)，來局部更新表格中的數(shù)據(jù)。

存在問題與解決：

1.這種實現(xiàn)方法的實現(xiàn)是基于所有數(shù)據(jù)的和查詢、如果我們的需求是，當(dāng)每次選擇欄目時，都要顯示第一頁欄目的文章;

解決方案：

一、此時我們可以給選擇的欄目加change事件、然后將page重置為第一頁(本項目是從第0頁開始),具體代碼如下:

1.1 將分頁中動態(tài)綁定page  即:  :current-page="(params.page+1)"

1.2  給select添加change事件

 
export default{
 //重置page為0
 selectChange(){
  this.params.page=0;
 },
}

***：此時我們存在的問題是如果我們先點擊某一頁后然后再點擊欄目，那么會基于本頁去查詢選擇欄目的信息。

二、關(guān)于搜索時我的理想是對當(dāng)前頁信息進行篩選、如果有人想要做出對所有數(shù)據(jù)的篩選、那么此時我們應(yīng)該將keywords單獨拿出來進行，搜索這樣解決起來比加條件簡單許多。

只是我目前對多個信息篩選做出的一個解決方案、如果有更加友好的處理方法、希望能留言。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。