vue3分页的实现

1、

router.get("/user", async (req, res) => {
  let { pageSize, currentPage } = req.query;

  let list = await userModel.find()
  let total = list.length;
  list = list.slice((currentPage - 1) * pageSize, currentPage * pageSize)
  res.send({
    code: 200,
    msg: "渲染成功",
    list,
    total
  })
})

2、

  <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page=datas.currentPage
              :page-sizes="[2, 5, 10, 20]" :page-size=datas.pageSize layout="total, sizes, prev, pager, next, jumper"
              :total=total>
            </el-pagination>

3、

<script setup lang="ts">
import axios from "axios";
import { ref, onMounted } from "vue";
const list = ref([])
const total=ref('')
const datas = ref({
  pageSize:3,
  currentPage:1
})
onMounted(()=>{
handlist()
})
const handlist=async()=>{
  const {data}=await axios('http://127.0.0.1:3000/user',{params:{
    pageSize:datas.value.pageSize,
    currentPage:datas.value.currentPage
  }})
  total.value=data.total
  console.log(data);
  list.value=data.list
}

const  handleSizeChange=(val)=> {
      datas.value.pageSize = val
      handlist()

    }
const  handleCurrentChange=(val) =>{
      datas.value.currentPage = val
      handlist()

    }
</script>