前端:每天一个前端工作常见技巧前端如何根据数据进行手动分页(Vue3 + elementplus)...

前言

大家好 我是前端程序员歌谣 已经有很长一段时间没有更新技术文章了 十分
想念大家 想加入前端技术群的小伙伴速度加入

案例

 在我们的日常需求中 我们需要进行手动进行页面的分页 针对市面上的Vue3 +element plus为例子 今天来说说如何实现

路由部分

children: [
      {
        path: '/index/user',
        component: () => import('../views/User/index.vue'),
        name: 'User',
        meta: {
          hidden: true,
        },
      }
    ]

 实现效果

代码逐步讲解

页面渲染部分 

<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>

逻辑处理部分

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()

数据格式

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',
  }
]

总代码

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
      }
    }
  }
]

仓库地址

https://github.com/geyaoisnice/geyao_vuets_eleplus

总结

我是歌谣 以上就是关于Vue3 +element plus实现手动分页的逻辑 可以将整个
数组对象进行手动分页 想加入前端不闲聊交流群可私信我获取联系方式 氛围好