How Vue implements paging function

Vue is a popular front-end framework that provides rich APIs and components to help developers quickly build modern web applications. In web applications, the pagination function is a very common requirement, which can help users quickly browse and find a large amount of data. This article will introduce how Vue implements the paging function, including data acquisition, pager implementation, and page rendering.

data collection

Before implementing the paging function, you need to obtain the paging data first. Usually, the paged data is obtained from the backend server through the API interface. In Vue, you can use the axios library to send HTTP requests to get data. axios is a Promise-based HTTP library that can be used in the browser and Node.js. Here is an example of using axios to fetch data:

import axios from 'axios';

export default {
  data() {
    return {
      items: [],
      currentPage: 1,
      pageSize: 10,
      pageCount: 0,
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      const response = await axios.get('/api/items', {
        params: {
          page: this.currentPage,
          size: this.pageSize,
        },
      });
      this.items = response.data.items;
      this.pageCount = response.data.pageCount;
    },
  },
};

In the above code, the axios library is used to send HTTP requests to obtain data. When sending a request, you need to specify the current page number and the amount of data per page, and then get the paged data and the total number of pages in the response. After the data is obtained, it can be stored in the data attribute of the Vue component for subsequent use.

Pager implementation

After obtaining the paged data, a pager needs to be implemented. A pager is a UI component used to display paged data and provide paging operations. In Vue, you can use the element-ui library to implement a pager. element-ui is a Vue-based UI component library that provides rich components and styles to help developers quickly build modern web applications. Here is an example of using element-ui to implement a pager:

<template>
  <div>
    <el-pagination
      :current-page="currentPage"
      :page-size="pageSize"
      :total="pageCount * pageSize"
      @current-change="handlePageChange"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  props: {
    currentPage: {
      type: Number,
      required: true,
    },
    pageSize: {
      type: Number,
      required: true,
    },
    pageCount: {
      type: Number,
      required: true,
    },
  },
  methods: {
    handlePageChange(page) {
      this.$emit('page-change', page);
    },
  },
};
</script>

In the above code, the pager is implemented using the element-ui library. The pager displays the current page number, the amount of data per page and the total number of pages, and provides page turning operations. When the user clicks the page turning button, the current-change event is triggered, and then the current page number is passed to the parent component through the $emit method.

page rendering

After getting the paged data and implementing the pager, the data needs to be rendered on the page. In Vue, you can use the v-for directive and components to achieve data rendering. Here's an example of rendering paged data using the v-for directive and components:

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in items" :key="item.id">
          <td>{
   
   { item.id }}</td>
          <td>{
   
   { item.name }}</td>
          <td>{
   
   { item.price }}</td>
        </tr>
      </tbody>
    </table>
    <pagination
      :current-page="currentPage"
      :page-size="pageSize"
      :page-count="pageCount"
      @page-change="handlePageChange"
    ></pagination>
  </div>
</template>

<script>
import Pagination from './Pagination.vue';

export default {
  components: {
    Pagination,
  },
  data() {
    return {
      items: [],
      currentPage: 1,
      pageSize: 10,
      pageCount: 0,
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      const response = await axios.get('/api/items', {
        params: {
          page: this.currentPage,
          size: this.pageSize,
        },
      });
      this.items = response.data.items;
      this.pageCount = response.data.pageCount;
    },
    handlePageChange(page) {
      this.currentPage = page;
      this.getData();
    },
  },
};
</script>

In the above code, use the v-for instruction to render the paged data to the page, and use the component to implement the pager. When the user clicks the pager, the page-change event will be triggered, and then the handlePageChange method will be called to retrieve the data and update the current page number.

Summarize

This article introduces how Vue implements the paging function, including data acquisition, pager implementation and page rendering. Vue provides a wealth of APIs and components that can help developers quickly build modern web applications. Using the axios library can easily send HTTP requests to obtain data, and using the element-ui library can easily implement a pager. When rendering a page, use v-for directives and components to conveniently render paged data to the page.