vue3+vant组件库实现数据分页

目录机构

1.先下载

npm i vant@next -S

2.vant组件引入

main.js文件

import { createApp } from 'vue'

import Vant from 'vant';

import 'vant/lib/index.css';

import App from './App.vue'

createApp(App).use(Vant).mount('#app')

3.vant组件使用

直接使用

User.vue

<div>

      <van-pagination

        v-model="currentPage"

        :total-items="this.list.length"

        :items-per-page="pagecount"

        @change="changefun"

      />

    </div>

4.分页功能实现代码块

变量定义

 let pagecount = ref(5); //每页条数

 var page = ref(1); // 页码

// 分页按钮点击事件处理函数

    changefun: function (num) {

      this.page = num;

      console.log(num);

    },

  // 计算属性

  computed: {

    // 计算分页数据

    renderdata() {

      // 第1页: [1,10]  第2页: [11,20]  第3页: [21,30]  第4页: [31,40]  第5页: [41,50]

      return this.list.slice(

        (this.page - 1) * this.pagecount,

        this.page * this.pagecount

      );

    },

  },