由于接口返回数据过慢,故而采用前端对数据进行处理分页的方法实现表格分页及条件查询。
一、表格
表格采用elementUI的el-table,只需要对数据data进行处理赋值即可。
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="page"
:page-size="pageSize"
layout="total, prev, pager, next, jumper"
:total="totalCount">
</el-pagination>
二、对数据的处理
假设后端接口返回的数据为data,且有两个筛选条件:name和id,在此要对数据先进行筛选,再实现分页。
dataFilter(){
// name过滤
let list = this.data.filter((item, index) => {
item.name.includes(this.searchData.name)
}
// id过滤
let idList = list.filter((item, index) => {
item.id.includes(this.searchData.id)
}
// 实现分页
this.tableData = idList .filter((item, index) =>
index < this.page * this.pageSize && index >= this.pageSize* (this.page - 1)
}
// 总数量赋值
this.totalData = idList.length
}
三、跳页,搜索等功能
在跳页、搜索等按钮点击的时候,将页数修改为对应数据,再调用dataFilter()方法即可。