前端分页并多条件筛选

项目用的是View Design插件，需求是前端自行分页并且列表中有多个筛选条件

本想使用插件原有的筛选方法，但发现其只对当前页进行筛选，所以想到用计算属性来进行筛选

<Table

border

:columns="columns"

:data="pageList"

:loading="loading"

ref="filterTable"

></Table>

<Page

class="bh-mt-16"

style="float: right"

:page-size="pager.pageSize"

:current="pager.pageNum"

:total="pager.total"

show-total

show-elevator

size="small"

placement="top"

:show-sizer="showSizer"

:page-size-opts="pageSizeOpts"

@on-change="pageChange"

@on-page-size-change="pageSizeChange"

/>

computed: {

filterData() {

const list = this.allData.filter(item => {

return (

(this.handleFilter(this.searchContentFilter, item.name) ||

this.handleFilter(this.searchContentFilter, item.code)) &&

this.handleFilter(this.typeFilter, item.type) &&

this.handleFilter(this.campusAccountMemberFilter, item.campusAccountMember) &&

this.handleFilter(this.gradeFilter, item.grade) &&

this.handleFilter(this.departmentFilter, item.department)

);

});

return list;

},

pageList() {

return this.filterData.slice(

(this.pager.pageNum - 1) * this.pager.pageSize,

this.pager.pageNum * this.pager.pageSize,

);

},

}

methods:{

handleFilter(data, type) {

if (data === this.campusAccountMemberFilter) {

return data ? type.toString().includes(data) : true;

} else {

return data ? type.includes(data) : true;

}

},

goFirstPage() {

this.pager.pageNum = 1;

},

pageChange(num) {

this.pager.pageNum = num;

},

pageSizeChange(size) {

this.pager.pageSize = size;

this.goFirstPage();

},

}