vue-easytable 后端一次性将数据返回来，前端实现分页。当然后端分页做起来容易，同事客户体验更加佳。前端分页一次性拿到所有数据，要根据 pageIndex和 pageSize以及 total通过前端计算来决定每一页展示哪些数据
<div class="mt20 mb20 bold" style="margin-top:10px;"> <v-pagination @page-change="pageChange" @page-size-change="pageSizeChange" :total="total" size='small' :page-size="pageSize" :layout="['prev', 'pager', 'next']"></v-pagination> </div> export default{
data(){
return{
list: null, //table当前展示的数据 total:0, //总条数 pageIndex: 1, //当前页数 pageSize: 10, //一页展示10条 tableData: [], //一次性请求的所有数据 } }, methods: {
pageChange:(pageIndex) {
var _this = this; if (_this.tableData) {
if (pageIndex) {
_this.pageIndex = pageIndex; } _this.list = _this.tableData.slice( (_this.pageIndex - 1) * _this.pageSize, _this.pageIndex * _this.pageSize ); console.log(_this.list); } else {
} }, getTableData(){
_this.$http.post('/api/task/GetOfficialTaskListByCondition',params) .then(res =>{
// 请求接口成功之后,获取列表所有数据 _this.tableData = res.data.result; _this.total = res.data.result.length; _this.list = _this.tableData.slice( (_this.pageIndex - 1) * _this.pageSize, _this.pageIndex * _this.pageSize ); }) .catch(error =>{
}) } } } 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/229141.html原文链接：https://javaforall.net
