vue前端实现分页效果

1.引入的element-plus里面的分页样式

 <!-- 
 total总页数  page-size每页条数  currentPage当前页  handleCurrentChange触发函数   :hide-on-single-page="true"只有一条数据时不显示分页
 -->
  <el-pagination

    background
    layout="prev, pager, next"
    :total="total"
    :page-size="pageSize"
    v-model:currentPage="currentPage"
    @current-change="handleCurrentChange"
    :hide-on-single-page="true"
  />

2.定义变量

//分页 total总数  currentPage当前第几页  pageSize每页条数  tableData 表格数据
const total = ref(0);
const pageSize = ref(10);
const currentPage = ref(1);
const tableData = ref([]);

3.编写分页触发函数

const callApi=()=>{
   http
    .post("/api/ordermaster", {
      pageIndex: currentPage.value,
      pageSize: pageSize.value,
    })
    .then((res: any) => {
      tableData.value = res.items;
      total.value = res.total;
      console.log(res.items);
    })
    .catch((err: any) => {});
}
// 分页下标导航
const handleCurrentChange=(val:number)=>{
  callApi();
}

前端完整代码

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="id" label="#ID" width="180" />
    <el-table-column prop="receiver" label="收货人" width="180" />
    <el-table-column prop="address1" label="地址" />
  </el-table>
 <!-- 分页 样式映入的element-plus里面的分页样式
 total总页数  page-size每页条数  currentPage当前页  handleCurrentChange触发函数   :hide-on-single-page="true"只有一条数据时不显示分页
 -->
  <el-pagination

    background
    layout="prev, pager, next"
    :total="total"
    :page-size="pageSize"
    v-model:currentPage="currentPage"
    @current-change="handleCurrentChange"
    :hide-on-single-page="true"
  />
</template>


<script lang="ts" setup>
import { ref, onMounted } from "vue";
import http from "@/http/index";
//定义变量    分页 total总数  currentPage当前第几页  pageSize每页条数
const total = ref(0);
const pageSize = ref(10);
const currentPage = ref(1);
const tableData = ref([]);
// 查询
const callApi=()=>{
   http
    .post("/api/ordermaster", {
      pageIndex: currentPage.value,
      pageSize: pageSize.value,
    })
    .then((res: any) => {
      tableData.value = res.items;
      total.value = res.total;
      console.log(res.items);
    })
    .catch((err: any) => {});
}
onMounted(() => {
 callApi();
});
// 分页下标导航
const handleCurrentChange=(val:number)=>{
  callApi();
}
</script>

结果展示:
在这里插入图片描述

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
好的,下面是一个简单的使用Vue实现前端分页的示例: ```html <template> <div> <table> <thead> <tr> <th>序号</th> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody> <tr v-for="(item, index) in displayData" :key="index"> <td>{{ startIndex + index }}</td> <td>{{ item.name }}</td> <td>{{ item.age }}</td> <td>{{ item.gender }}</td> </tr> </tbody> </table> <div class="pagination"> <button @click="prevPage" :disabled="currentPage === 1">上一页</button> <button v-for="page in pages" :key="page" @click="changePage(page)" :class="{ active: currentPage === page }">{{ page }}</button> <button @click="nextPage" :disabled="currentPage === pageCount">下一页</button> </div> </div> </template> <script> export default { data() { return { dataList: [ { name: '张三', age: 20, gender: '男' }, { name: '李四', age: 22, gender: '女' }, { name: '王五', age: 25, gender: '男' }, { name: '赵六', age: 21, gender: '女' }, { name: '孙七', age: 24, gender: '男' }, { name: '周八', age: 26, gender: '女' }, { name: '吴九', age: 23, gender: '男' }, { name: '郑十', age: 28, gender: '女' } ], pageSize: 3, // 每页显示数量 currentPage: 1, // 当前页码 startIndex: 0, // 当前页数据的起始下标 pageCount: 0 // 总页数 } }, computed: { // 计算当前显示的数据 displayData() { return this.dataList.slice(this.startIndex, this.startIndex + this.pageSize) }, // 计算页码数组 pages() { const pageArr = [] for (let i = 1; i <= this.pageCount; i++) { pageArr.push(i) } return pageArr } }, mounted() { // 计算总页数 this.pageCount = Math.ceil(this.dataList.length / this.pageSize) }, methods: { // 上一页 prevPage() { this.currentPage-- this.startIndex = (this.currentPage - 1) * this.pageSize }, // 下一页 nextPage() { this.currentPage++ this.startIndex = (this.currentPage - 1) * this.pageSize }, // 点击页码 changePage(page) { this.currentPage = page this.startIndex = (this.currentPage - 1) * this.pageSize } } } </script> ``` 上面的代码中,我们首先定义了一个数据数组 dataList,里面存放了我们要展示的数据。然后定义了 pageSize、currentPage、startIndex、pageCount 等数据,用来记录每页显示数量、当前页码、当前页数据的起始下标和总页数等信息。 接着,在计算属性 displayData 中,我们根据 startIndex 和 pageSize 计算出当前页显示的数据。 在计算属性 pages 中,我们使用循环来生成页码数组。 在 mounted 钩子函数中,我们计算了总页数 pageCount。 最后,在 methods 中,我们定义了 prevPage、nextPage 和 changePage 三个方法,用来处理上一页、下一页和页码点击事件。在这些方法中,我们更新了 currentPage 和 startIndex,从而实现前端分页效果。 总的来说,使用Vue实现前端分页并不困难,只需要合理利用Vue的计算属性和方法即可。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

great-sun

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值