vue实现分页的两种方式
vue实现分页的两种方式(1)方法一:使用slice方法一次调用后端接口返回所有数据tableData,然后使用tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)使得数据根据页码改变<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage
·
vue实现分页的两种方式
(1)方法一:使用slice方法
一次调用后端接口返回所有数据tableData
,然后使用tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)
使得数据根据页码改变
<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" stripe style="width: 100%">
<el-table-column prop="project_name" label="项目名称" width="150"></el-table-column>
<el-table-column prop="project_id" label="项目代码" width="150"></el-table-column>
</el-table>
<el-pagination
:current-page.sync="currentPage"
@current-change="handlePageChange"
:page-size="pageSize"
:page-sizes = "[2, 10, 50, 500]"
layout="total, prev, pager, next"
:total="dataCount">
</el-pagination>
(2)方法二:
每次换页都调用接口,后端每次返回该页的数据
html部分:
<el-table :data="tableData" stripe style="width: 100%">
<el-table-column prop="project_name" label="项目名称" width="150"></el-table-column>
<el-table-column prop="project_id" label="项目代码" width="150"></el-table-column>
</el-table>
<el-pagination
:current-page.sync="currentPage"
@current-change="handlePageChange"
:page-size="pageSize"
:page-sizes = "[2, 10, 50, 500]"
layout="total, prev, pager, next"
:total="dataCount">
</el-pagination>
js部分:
handlePageChange(pageNum) {
this.searchItem.limit = this.pageSize;
this.searchItem.page = pageNum;
this.currentPageNum = this.searchItem.page;
this.search(this.searchItem);
},
search(argumentObj) {
let self = this;
const BaseUrl = this.$util.getAjaxUrl('type_8')
const url = BaseUrl + '/api/tProjectManagement/getTProjectManagementList'
axios.get(url,argumentObj).then(function(response) {
if (response.data.status === -1) {
self.$message.error({
content: response.data.msg
})
} else {
self.tableData = response.data.data.list;
self.dataCount = response.data.data.total;
self.loadingList = false
}
}).catch(function(error) {
console.log(error);
});
},
更多推荐
已为社区贡献3条内容
所有评论(0)