之前一直在后端进行分页，使用的java中的pageHelper分页插件，但是用起来不是感觉很好。
原因是：搜索和加载全部数据时，要区别是是搜索还是加载数据列表的状态。
如果使用前端分页，则没有这个问题。不闲聊，直接上代码---->export default {
data() {
return {
form: {
searchContent: null
},
tableData: [], // table数据列表
totalPageData: [], // 分页数据(全部数据已经分好页)
pageNum: 1, // 共几页
pageSize: 10, // 每页显示数量
currentPage: 1, // 当前显示页码
total: 1, // 总共多少条数据
dataShow: [], // 当前页要显示的数据
};
},
created() {
// this.fetchData();
this.getTableData();
},
methods: {
tableRowClassName({row, rowIndex}) {
if (rowIndex % 2 == 1) {
return "success-row";
}
return "";
},
// 获取table列表的信息
getTableData() {
this.$axios({
url: "/api/kpi/intellectual/list",
// url: "/kpi/intellectual/list",
method: "get",
}).then(response => {
const resp = response.data.data;
this.tableData = resp;
this.total = resp.length;
this.calcPageData();
}).catch(error => {
this.$message.error("数据加载失败!")
})
},
search() {
// 搜索时初始化参数
this.pageSize = 10;
this.currentPage = 1;
const data = {
"content": this.form.searchContent
}
if (data.content == null || data.content == '') {
this.$message({
type: "warning",
message: "搜索内容不能为空!"
})
return ;
}
this.$axios({
url: "/api/kpi/intellectual/search",
// url: "/kpi/intellectual/search",
method: "post",
data: data
}).then(response => {
const resp = response.data;
// console.log("resp: " + JSON.stringify(resp))
this.tableData = resp.data;
this.total = resp.data.length;
this.calcPageData();
}).catch(error => {
this.$message.error("搜索的内容不存在!")
})
},
// 计算页数的方法
calcPageData() {
// 计算页数，根据后台数据的条数和每页要显示的数量算出一共多少页，得0时设为1
if(this.tableData.length > 1) {
this.pageNum = Math.ceil(this.tableData.length / this.pageSize) || 1;
// console.log("总页数：" + this.pageNum);
}
//数据分组
for (let i = 0; i < this.pageNum; i++) {
// 每页相当于一个数据，例如：[[],[],[]]
// 根据每页显示数量，将后台的数据分割到每一页，假设pageSize为5，则第一也为1-5条slice(0,5),slice(5,10)...
this.totalPageData[i] = this.tableData.slice(this.pageSize * i, this.pageSize * (i+1));
}
// 获取到数据后显示第一页内容，数组下标是从0开始的，这里一定 要减去1，不然会丢失一组数据
this.dataShow = this.totalPageData[this.currentPage - 1];
},
handleSizeChange(val) {
this.pageSize = val;
// console.log("一页显示多少条：" + val);
// 重新计算页数并分组
this.calcPageData();
},
handleCurrentChange(val) {
this.currentPage = val;
// 注意数组是从0开始，页码别忘了减去1
this.dataShow = this.totalPageData[val - 1];
// console.log("第几页： " + val)
},
//页面显示条数改变是触发
handleSizeChange1(val) {
this.pageSize = val;
//重新加载数据
this.fetchData();
},
//点击分页的页码时触发
handleCurrentChange1(val) {
this.currentPage = val;
//重新加载数据
this.fetchData();
},
// 重置时重新加载数据,每页条数，以及当前页需要初始化
reset() {
this.getTableData();
this.pageSize = 10;
this.currentPage = 1;
this.form.searchContent = null;
}
},
filters: {
//文件提交的状态
stateFilter(type) {
const sF = state.find(obj => obj.type === type);
return sF ? sF.name : null;
},
}
};前端代码部分：
<saice-row>
<saice-table
:data="dataShow"
style="width: 100%;"
border
:row-class-name="tableRowClassName"
:header-cell-style="{background:'#eef1f6', color: '#606266'}">
<saice-table-column type="index" label="序号" width="60"></saice-table-column>
<!-- <saice-table-column prop="businessId" label="业务标识" width=""></saice-table-column> -->
<saice-table-column prop="typeName" label="知识产权类型" sortable>
</saice-table-column>
<saice-table-column prop="fileName" label="文件名称" sortable>
<template slot-scope="scope">
<a :href="'/api/kpi/intellectual/download?id='+scope.row.fileId">{{scope.row.fileName}}</a>
</template>
</saice-table-column>
<saice-table-column prop="name" label="申请人" sortable></saice-table-column>
<saice-table-column prop="participateUser" label="参与人" sortable></saice-table-column>
<saice-table-column prop="applyDate" label="申请时间" sortable></saice-table-column>
<!-- <saice-table-column prop="assessName" label="审核人" sortable></saice-table-column> -->
<!-- <saice-table-column prop="assessDate" label="审核时间" sortable></saice-table-column> -->
<saice-table-column prop="state" label="状态" width="100">
<template slot-scope="scope">
<saice-tag type="primary">
<span>{{ scope.row.state | stateFilter }}</span>
</saice-tag>
</template>
</saice-table-column>
</saice-table>
</saice-row>
<!-- 分页 -->
<saice-row style="margin-top: 8px; margin-bottom: 10px; height: 30px;">
<saice-col :span="12" :offset="0">
<!-- pageSize(每页条数),改变时会触发
currentPage(当前页)改变时会触发
-->
<saice-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 50]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</saice-pagination>
</saice-col>
</saice-row>需要注意的是：
table表显示的数据是dataShow，指的是当前的数据，所以你在给表赋值的时候别弄错了，–>:data="dataShow"
上面代码比较长，不必关注其余的代码，只需要将前端分页的函数学会即可。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
