How to use Vue to implement paging and sorting of tables?

Vue.js is a progressive JavaScript framework that helps developers build high-quality single-page applications. As front-end development gradually becomes a mainstream technology, tables are one of the components that developers often need to use in this field. The amount of data in a table can be very large, so we need to use paging and sorting to view, manage and process the data easily and quickly. This article will introduce in detail how to use Vue to implement table paging and sorting.

1. Add pagination to the table

In order to add pagination to the table, we need to use Vue.js and some other libraries.

First, you need to make sure that Vue.js is installed, which can be installed using the following command:

npm install vue

Then, we will use a library called vuejs-paginate. This library is a lightweight Vue.js component that helps developers quickly add pagination controls.

Similarly, we also need to use the following command to install the library:

npm install vuejs-paginate

After installing the above library, we need to perform the import operation in the code:

import Vue from 'vue';
import Paginate from 'vuejs-paginate';

Now, We can add a Paginator usage example in the Vue component:

<template>
  <div>
    <table>
      <!-- 这里是表格头 -->
    </table>
    <paginate
      v-model="currentPage"
      :page-count="pageCount"
      :click-handler="pageClick"
      prev-text="上一页"
      next-text="下一页"
      :container-class="'pagination'"
      :page-class="'page-item'"
      :prev-class="'page-item'"
      :next-class="'page-item'"
      :page-link-class="'page-link'"
      :prev-link-class="'page-link'"
      :next-link-class="'page-link'"
      :disable-next="currentPage === pageCount"
      :disable-prev="currentPage === 1"
      :always-show-prev-next="true"
    />
  </div>
</template>

This code defines a table tag and adds a paginate tag below it. The paginate tag contains buttons for the previous page and the next page. We also defined some properties such as setting the currentPage name to currentPage, using the pageClick function to handle page click events, and specifying the total number of pages via the pageCount property.

2. Add sorting to the table

Before adding table sorting, we need to ensure that the data items in the table are objects contained in an array, such as:

[
  {
    id: 1,
    name: '第1项'
  },
  {
    id: 2,
    name: '第2项'
  },
  {
    id: 3,
    name: '第3项'
  }
]

Sorting is necessary in many scenarios, such as in an administrator backend application where the administrator needs to be able to sort users based on different attributes of data items in order to quickly find the required data.

To add sorting to the table, we can use Vue.js and a JavaScript library called lodash. Under Linux or macOS, you can install lodash using the following command:

npm install lodash

If you get an error in the development environment, try installing using the following command:

npm install --save-dev lodash

The Lodash library provides a lot of Useful functionality and perfect for use in Vue.js applications. In this example, we need to use lodash’s orderBy function. In a Vue component, the function can be imported and called using the following code:

import Vue from 'vue'
import _ from 'lodash'

export default {
  name: 'table-component',

  data () {
    return {
      tableData: [
        { id: 1, name: "John Doe", age: 32, email: "john.doe@example.com" },
        { id: 2, name: "Jane Doe", age: 30, email: "jane.doe@example.com" },
        { id: 3, name: "Mark Johnson", age: 25, email: "mark.johnson@example.com" },
        { id: 4, name: "Larry Smith", age: 45, email: "larry.smith@example.com" },
        { id: 5, name: "Robert Williams", age: 38, email: "robert.williams@example.com" },
        { id: 6, name: "David Brown", age: 26, email: "david.brown@example.com" },
        { id: 7, name: "Sarah Davis", age: 27, email: "sarah.davis@example.com" },
        { id: 8, name: "Julie Robinson", age: 35, email: "julie.robinson@example.com" }
      ],
      columns: ['id', 'name', 'age', 'email'],
      sortOrder: {
        column: 'id',
        order: 'asc'
      }
    }
  },

  methods: {
    sortTableData (column) {
      if (this.sortOrder.column === column) {
        this.sortOrder.order = this.sortOrder.order === 'asc' ? 'desc' : 'asc'
      } else {
        this.sortOrder.column = column
        this.sortOrder.order = 'asc'
      }

      this.tableData = _.orderBy(this.tableData, this.sortOrder.column, this.sortOrder.order)
    }
  },

  mounted () {
    this.tableData = _.orderBy(this.tableData, this.sortOrder.column, this.sortOrder.order)
  }
}

In this example, we have tableData containing the table data, and the columns array containing all the column names. We also have a sortOrder object that contains the current sort order applied to the table data. The selectTableSort function is our sort handler that sorts by a specific column header when the user clicks on that column.

We use lodash's orderBy function to sort the tableData array. The first parameter of the function is the array in the slice to be sorted, the second parameter is the name of the field to be used for sorting, and the third parameter specifies the sort order (ascending or descending).

Finally, we use this.sortTableData('id') to call the sortTableData method in the method to initially sort the table data by the ID column.

Summary

In this article, we introduced in detail how to use Vue.js to implement paging and sorting of tables. By using the vuejs-paginate library we can easily add pagination functionality. At the same time, using the orderBy function of the lodash library, we can quickly add sorting functionality to the table.

Table is a common component in Vue.js development. Whether you work as a front-end developer or a full-stack developer, mastering these skills will make it easier for you to process and manage data and build high-quality applications quickly.

The above is the detailed content of How to use Vue to implement paging and sorting of tables?. For more information, please follow other related articles on the PHP Chinese website!