<el-table:data="tableData">...其他el-table-column<template #default="scope">// 自定义组件<my-button name="编辑" :id="scope.row.id"/ ></template></el-table><el-pagination:page-size="10"layout="prev, pager, next"@current-change="currentChange":total="21"></el-pagination> 在没有...
3, 4, 5]"8:disabled="disabled"9:background="background"10layout="total, sizes, prev, pager, next, jumper"11:total="total1"12@size-change="handleSizeChange"13@current-change="handleCurrentChange"
current.value = 1; // total.value = 0; refresh(); }; // 页数变化 const handleCurrentChange = (page: number) => { current.value = page; // total.value = 0; refresh(); }; const refresh = async () => { const result = await getTableDataApi({ page: current.value, limit: size...
三、 然后就使用到Pagination 分页来控制上一页和下一页 四、然后在 current-change事件去调用哪个函数就可以了 current-changecurrent-page改变时触发 在这个地方要注意一点就是每次调用前要给数据清空一下,不然会前一条数据还在后一条数在它下面。 // 分页const value = ref('');const handleCurrentChange = (...
@current-change="handleCurrentChange" /> </el-card> </template> .el-input { margin-right: 5px; width: 300px; } .query-input{ display: flex; justify-content:center } .el-card{ margin-bottom: 10px; } .demo-pagination-block{...
<el-pagination small background layout="prev, pager, next, jumper, total" :total="total" :current-page="pageNo" v-model:current-page="pageNo" v-model:page-size="pageSize" class="mt-4 pagination-fixed-bottom" @current-change="handleCurrentChange" ></el-pagination> 2. 下拉列表的使用 ...
total="50" /> layout="jumper": 跳转 <el-pagination layout="prev, pager, next, jumper, total" :page-size="5" :total="50" /> 事件绑定 <el-pagination layout="prev, pager, next" :page-size="5" :total="50" @current-change="currentPage" /> </template> —— 欢迎讨论,如对你有...
@current-change="handleCurrentChange" /> </el-card> </template> .el-input { margin-right: 5px; width: 300px; } .query-input{ display: flex; justify-content:center } .el-card{ margin-bottom: 10px; } .demo-pagination-block{...
handleCurrentChange(pageNum){ //改变当前页码触发 this.currentPage = pageNum this.load() } } } 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. ...
return this.currentPage; }, set(val) { this.handleCurrentChange(val); }, }, mounted() { this.fetchData(); //在挂载调用一次分页接口 }, methods: { addNewomponent(componentType) { this.currentComponent = componentType; this.addDialogCom = !this.addDialogCom; ...