vue3 + elementplus 实现分页

 

<template>

    <div class="box">

        <div class="dat">

          <el-card style="width: 98%; margin-top: 10px; margin-left: 10px; border-radius: 40px;">

            <div  v-for="(i,p) in tableData" :key="p" style="width: 98%;">

            <el-card

               style="width: 80%;

               border-bottom:2px transparent solid ;

               margin-top: 10px;

               margin-left: 10%;

               border-radius:20px 20px 0 0 ;"  >

                <span style="font-weight: bold;font-family: '楷体';font-size: 20px; ">订单编号：</span>

                <span>{{ i.model_list_id }}</span>

                <span style="font-weight: bold;font-family: '楷体';font-size: 20px; ">下单日期：</span>  

                <span>{{ i.update_date }}</span>

            </el-card>

            <el-card

               style="width: 80%;

               border-top:1px transparent solid ;

               margin-top: 0px;

               margin-bottom: 10px;

               margin-left: 10%;

               border-radius: 0 0 20px 20px ;">

            <table  style=" border-collapse: separate; border-spacing: 20px 0px;">

            <thead>

              <tr  style="font-weight: bold;font-family: '楷体';font-size: 20px; padding: 10px; ">

                <th>文件名:</th>

                <th >数量：</th>

                <th>单价：</th>

                <th>总价：</th>

                <th>体积：</th>

              </tr>

            </thead>

            <tbody>

              <tr>

                <td>{{ i.list_name }}</td>

                <td style="margin-left: 2px;">{{ i.list_number }}</td>

                <td>{{ i.model_price }}</td>

                <td>{{ i.list_price }}</td>

                <td>{{ i.model_volumn }}</td>

              </tr>

            </tbody>

          </table>

        </el-card>

        </div>

          <div style="display:flex ; justify-content: center ; align-items: center;">

            <el-pagination

                v-model:current-page="currentPage"

                v-model:page-size="pageSize"

                layout="prev, pager, next, jumper"

                :total="total"

                :page-sizes="[3]"

                @size-change="handleSizeChange"

                @current-change="handleCurrentChange"

            />

          </div>

          </el-card>

        </div>

    </div>

</template>

<script setup>

import {reactive,onMounted,computed} from 'vue'

import axios from 'axios'

import { useStore } from 'vuex'

import { storage } from '../storage';

const store = useStore()

let previe = reactive([])

const tableData =reactive( [])

import { ref } from 'vue'

  let currentPage = ref(1) //当前页数

  let pageSize = ref(3)  //每页显示条目个数

  let total = ref(10)  //总条目数

//page-count 总页数

  const handleSizeChange = (val) => {

    pageSize = val

    getpage()

    console.log(`${val} items per page`)

  }

  const handleCurrentChange = (val) => {

    currentPage = val

    getpage()

    console.log(`currentpage: ${val}`)

  }

onMounted(()=>{

    getd()

})

//第一次 渲染页面 请求放在mounted 中 

function getd(){

  let tk = storage.get('3dtk') //获取token

  setTimeout(() => {

        axios.post('接口 /页数/条数',{},{

          headers: {

            'Authorization': tk.token,

          },

        }).then((res)=>{

         let a = res.data.data.orders.list

         tableData.push(...a) 结构赋值  或者 forEach 将数组push进入 

//.forEach((obj) => {

      //       for (let i = 0; i < obj.length; i++) {

      //           const element = obj[i];

      //           tableData.push(  )}});

      });

    }, 1000);

}

//第二次随着页面的页数currentPage发生改变 来请求数据  数据条数不变 还是3条

function getpage(){

  let tk = storage.get('3dtk')

  setTimeout(() => {

        axios.post('接口'+currentPage+'/'+'3',{},{

          headers: {

            'Authorization': tk.token,

          },

        }).then((res)=>{

        total = res.data.data.orders.total 总的数据条数 

        pageSize = res.data.data.orders.pageSize  

        currentPage =res.data.data.orders.pageNum 当前页数

        tableData.length = 0

        let a = res.data.data.orders.list

         tableData.push(...a)

       });

    }, 1000);

}

</script>

<style scoped>

.box{

    .dat{

        span{

            margin: 0 20px;

        }

      ol{

        list-style: none;

        display: flex;

        flex-direction: row;

        li{

            margin: 0 45px;

        }

    }

}}

.demo-pagination-block + .demo-pagination-block {

    margin-top: 10px;

  }

  .demo-pagination-block .demonstration {

    margin-bottom: 16px;

  }

</style>

请求返回数据格式