大家好 我是前端程序员歌谣 已经有很长一段时间没有更新技术文章了 十分
想念大家 想加入前端技术群的小伙伴速度加入案例
在我们的日常需求中 我们需要进行手动进行页面的分页 针对市面上的Vue3 element plus为例子 今天来说说如何实现
路由部分
代码语言：javascript复制 children: [
{
path: '/index/user',
component: () => import('../views/User/index.vue'),
name: 'User',
meta: {
hidden: true,
},
}
]实现效果
代码逐步讲解
页面渲染部分
代码语言：javascript复制<template>
<!-- element plus card -->
<ElCard>
<!-- element plus table -->
<ElTable :data="tableList" style="width: 100%">
<ElTableColumn :width="500" prop="username" label="Name" width="180" />
<ElTableColumn :width="500" prop="password" label="Password" />
</ElTable>
<!-- element plus 分页 -->
<ElPagination
v-model:current-page="currentPage"
:size="pageSize"
:page-size="10"
layout="total, prev, pager, next"
:total="total"
@size-change="onSizeChangeFn"
@current-change="onPageChangeFn"
/>
</ElCard>
逻辑处理部分
代码语言：javascript复制import { ref } from "vue"
import { getDataList } from "./api/index.ts"
import { ElTable, ElTableColumn, ElCard,ElPagination} from "element-plus"
const tableList = ref([])
const currentPage= ref(1)
const pageSize= ref(10)
const allPageData= ref([])
const total= ref()
// 查询数据
const getList = async () => {
let params = {
pageIndex: currentPage.value,
pageSize: pageSize.value,
}
let res = await getDataList(params)
total.value=res.data.data.total
tableList.value = res.data.data.list
}
// size改变
const onSizeChangeFn = (val) => {
currentPage.value = 1
pageSize.value = val
getList()
}
// 分页改变
const onPageChangeFn = (val) => {
currentPage.value = val
getList()
}
getList()数据格式
代码语言：javascript复制const List: {
username: string
password: string
}[] = [
{
username: 'admin',
password: 'admin',
},
{
username: 'test',
password: 'test',
},
{
username: 'geyao',
password: 'geyao',
},
{
username: 'lanlan',
password: 'lanlan',
},
{
username: 'junjun',
password: 'junjun',
},
{
username: 'taotao',
password: 'taotao',
},
{
username: 'huahua',
password: 'huahua',
},
{
username: 'gege',
password: 'gege',
},
{
username: 'meimei',
password: 'meimei',
},
{
username: 'haha',
password: 'haha',
},
{
username: 'dada',
password: 'dada',
},
{
username: 'xiexie',
password: 'xiexie',
},
{
username: 'gugu',
password: 'gugu',
}
]总代码
代码语言：javascript复制import { SUCCESS_CODE } from '../../src/constants'
const timeout = 1000
const List: {
username: string
password: string
}[] = [
{
username: 'admin',
password: 'admin',
},
{
username: 'test',
password: 'test',
},
{
username: 'geyao',
password: 'geyao',
},
{
username: 'lanlan',
password: 'lanlan',
},
{
username: 'junjun',
password: 'junjun',
},
{
username: 'taotao',
password: 'taotao',
},
{
username: 'huahua',
password: 'huahua',
},
{
username: 'gege',
password: 'gege',
},
{
username: 'meimei',
password: 'meimei',
},
{
username: 'haha',
password: 'haha',
},
{
username: 'dada',
password: 'dada',
},
{
username: 'xiexie',
password: 'xiexie',
},
{
username: 'gugu',
password: 'gugu',
}
]
export default [
// 列表接口
{
url: '/mock/user/list',
method: 'get',
response: ({ query }) => {
const { username, pageIndex, pageSize } = query
const mockList = List.filter((item) => {
if (username && item.username.indexOf(username) < 0) return false
return true
})
const pageList = mockList.filter(
(_, index) => index < pageSize * pageIndex && index >= pageSize * (pageIndex - 1)
)
return {
code: SUCCESS_CODE,
data: {
total: mockList.length,
list: pageList
}
}
}
},
// 登录接口
{
url: '/mock/user/login',
method: 'post',
timeout,
response: ({ body }) => {
const data = body
let hasUser = false
for (const user of List) {
if (user.username === data.username && user.password === data.password) {
hasUser = true
return {
code: SUCCESS_CODE,
data: user
}
}
}
if (!hasUser) {
return {
code: 500,
message: '账号或密码错误'
}
}
}
},
// 退出接口
{
url: '/mock/user/loginOut',
method: 'get',
timeout,
response: () => {
return {
code: SUCCESS_CODE,
data: null
}
}
}
]
仓库地址
代码语言：javascript复制https://github.com/geyaoisnice/geyao_vuets_eleplus总结
代码语言：javascript复制我是歌谣 以上就是关于Vue3 element plus实现手动分页的逻辑 可以将整个
数组对象进行手动分
