目錄

案例場景

存在問題與解決

解決方案

案例場景:

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

實現方案有兩種:

其一、我們開始可能會想到對每個功能繫結一個處理事件，但是這樣做我們對資料的維護工作將大大加大，而且用這樣方案做資料的疊加篩選不是很好。

方案二、我們將所有提交的資料放到一起維護然後再進行深度監聽，當某一個值、或多個值的改變時，在去進行資料的查詢，此時問題也變得更易於理解與維護，具體實現如下:

分頁程式碼如下:

<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="請選擇欄目"  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="請輸入關鍵字"
    prefix-icon="el-icon-search"
    v-model="params.keywords"
     clearable>
</el-input>
</template>

 

 資料維護、與方法(事件處理)

export default{
    data(){
        return{
           ...  //其它的資料省略

          params:{   //儲存分頁、搜尋資料
            page:0,
            pageSize:3,
            categoryId:undefined,
            keywords:undefined
          }
       }
    },
    watch:{
    params:{
        handler(val){
            this.findArticle(); //查詢文章
        },
        deep:true  //深度監聽
    },
    methods:{
        //處理分頁
        handlePaginationChange(page){
            this.params.page=page-1;
        }, 
        //查詢文章
        findArticle(){
            axios.get('',{params:this.params})
            .then(()=>{})
            .catch(()=>{})
        }
    }

}
 

小結:通過上面的雙向資料繫結、我們將所有資料放到 params中集中管理(進行資料的監聽)、當資料發生改變時我們去請求資料，來區域性更新表格中的資料。

存在問題與解決:

1.這種實現方法的實現是基於所有資料的和查詢、如果我們的需求是，當每次選擇欄目時，都要顯示第一頁欄目的文章;

解決方案:

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

1.1 將分頁中動態繫結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)"  //將頁數進行動態繫結這樣利於我們操作頁數的改變
        @current-change="handlePaginationChange"
       >
    </el-pagination>
   
</template>

1.2  給select新增change事件

<template> 
    //下拉選擇框
    <el-select v-model="params.categoryId"  placeholder="請選擇欄目"  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;
    },
}

***：此時我們存在的問題是如果我們先點選某一頁後然後再點選欄目，那麼會基於本頁去查詢選擇欄目的資訊。

二、關於搜尋時我的理想是對當前頁資訊進行篩選、如果有人想要做出對所有資料的篩選、那麼此時我們應該將keywords單獨拿出來進行，搜尋這樣解決起來比加條件簡單許多。

只是我目前對多個資訊篩選做出的一個解決方案、如果有更加友好的處理方法、希望能給博主留言...