在Vue中轻松实现分页功能_通常使用_指锁升探

在Vue中轻松实现分页功能

一、使用第三方分页组件

在项目中安装Element UI，通常使用npm或yarn。

在项目中引入Element UI，通常在main.js文件中。

import ElementUI from 'element-ui';


import 'element-ui/lib/theme-chalk/index.css';


Vue.use(ElementUI);

在Vue组件的模板中使用分页组件。

<el-pagination


  @size-change="handleSizeChange"


  @current-change="handleCurrentChange"


  :current-page="currentPage"


  :page-sizes="[10, 20, 30, 40]"


  :page-size="pageSize"


  layout="total, sizes, prev, pager, next, jumper"


  :total="100">


</el-pagination>

二、手动实现分页逻辑

在组件的数据中定义当前页、每页显示的条数等。

data() {


  return {


    currentPage: 1,


    pageSize: 10,


    totalItems: 0,


    items: []


  };


}

根据当前页和每页显示的条数计算应该显示的数据。

computed: {


  paginatedItems() {


    const start = (this.currentPage - 1) * this.pageSize;


    const end = start + this.pageSize;


    return this.items.slice(start, end);


  }


}

在模板中渲染分页数据和分页控件。

<ul>


  <li v-for="item in paginatedItems" :key="item.id">{{ item.name }}


</ul>


<button @click="currentPage--" :disabled="currentPage <= 1">上一页


<button @click="currentPage++" :disabled="currentPage >= Math.ceil(totalItems / pageSize)">下一页


</code>

methods: {


  fetchData() {


    axios.get(`api/data?page=${this.currentPage}&size=${this.pageSize}`)


      .then(response => {


        this.items = response.data.items;


        this.totalItems = response.data.totalItems;


      })


      .catch(error => {


        console.error('Error fetching data: ', error);


      });


  }


}

created() {


  this.fetchData();


}