项目用的是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();
},
}