案例場景:
現在有個文章管理模塊，在該模塊中有欄目選擇、文章搜索、分頁功能。這些功能改變其中一個都會對查詢的文章有所改變。案例圖如下:
實現方案有兩種：
其一、我們開始可能會想到對每個功能綁定一個處理事件，但是這樣做我們對數據的維護工作將大大加大，而且用這樣方案做數據的疊加篩選不是很好。
方案二、我們將所有提交的數據放到一起維護然后再進行深度監聽，當某一個值、或多個值的改變時，在去進行數據的查詢，此時問題也變得更易于理解與維護，具體實現如下:
分頁代碼如下:
<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單獨拿出來進行，搜索這樣解決起來比加條件簡單許多。
只是我目前對多個信息篩選做出的一個解決方案、如果有更加友好的處理方法、希望能留言。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
