Element-ui（el-table、el-pagination）实现表格分页

最新推荐文章于 2023-09-26 20:44:33 发布

一去不复返go

最新推荐文章于 2023-09-26 20:44:33 发布

阅读量577

点赞数 1

分类专栏： vue 文章标签： ui elementui vue.js

本文链接：https://blog.csdn.net/liyongchunscr/article/details/122327328

版权

vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<div class="pagination">
	<el-pagination background 
		layout="total, sizes, prev, pager, next"
		:current-page="query.pageIndex"
		:page-size="query.pageSize" 
		:page-sizes="pageSizes"
		:total="query.pageTotal"
		@size-change="handleSizeChange"
		@current-change="handlePageChange"
		>
	</el-pagination>
</div>

total, sizes, prev, pager, next, jumper依次是下面的组件样式

const query = reactive({
	pageIndex: 1,
	pageSize: 10,
	pageTotal:0
});
const pageSizes = reactive([10, 20, 30])
const tableData = ref([]);

tableData.value =  请求的数据.slice((query.pageIndex-1)*query.pageSize,query.pageIndex*query.pageSize);



// 分页导航
const handlePageChange = (val) => {
		query.pageIndex = val;
        //异步调用接口
	};
const handleSizeChange = (pageSize) => {
	    query.pageSize = pageSize;
        //异步调用接口
	};