如果后端没有分页api,前端如何做分页
一、使用computed
这个变量应该是计算之后的值,是一个状态管理变量,跟onMounted类似
import {computed} from 'vue'
const roleList = ref([])
let pageIndex = ref(1)
let showRoles = computed(() => {return roles.value.slice((pageIndex.value-1) * 10, pageIndex)
})
将showRoles替换绑定表格数据,我这里是组件,是父传子定义的一个变量tableData,如果你这里插入的是一个表格,那么应该是:Data="showRoles"
<PublicTables :tableData="showRoles" @multipleSelection="handleSelection"><template #tableColumn><el-table-column property="roleId" label="角色ID" /><el-table-column property="roleName" label="角色名" /></template><template #operation><el-table-column label="操作"><template #default="scope"><el-button size="small" @click="handleEdit(scope.row)">编辑</el-button><el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button></template></el-table-column></template></PublicTables>
二、添加分页器
template中添加分页器
<el-pagination size="small" background layout=" prev, pager, next, total" :total="roleList.length" :current-page="pageIndex" />
这里current-page绑定绑定的页码会保持同步,分页器总页数就是roleList的长度。
到这里应该已经实现了前端分页功能