Bagaimana untuk menggunakan Vue untuk melaksanakan paging dan menyusun jadual?

Vue.js ialah rangka kerja JavaScript progresif yang membantu pembangun membina aplikasi satu halaman berkualiti tinggi. Memandangkan pembangunan bahagian hadapan secara beransur-ansur menjadi teknologi arus perdana, jadual merupakan salah satu komponen yang sering perlu digunakan oleh pembangun dalam bidang ini. Jumlah data dalam jadual boleh menjadi sangat besar, jadi kita perlu menggunakan halaman dan pengisihan untuk melihat, mengurus dan memproses data dengan mudah dan cepat. Artikel ini akan memperkenalkan secara terperinci cara menggunakan Vue untuk melaksanakan halaman halaman dan pengisihan jadual.

1. Tambahkan penomboran pada jadual

Untuk menambah penomboran pada jadual, kita perlu menggunakan Vue.js dan beberapa perpustakaan lain.

Pertama, anda perlu memastikan bahawa Vue.js telah dipasang, yang boleh dipasang menggunakan arahan berikut:

npm install vue

Kemudian, kami akan menggunakan perpustakaan yang dipanggil vuejs-paginate. Pustaka ini ialah komponen Vue.js ringan yang membantu pembangun menambah kawalan penomboran dengan cepat.

Begitu juga, kita juga perlu memasang perpustakaan menggunakan arahan berikut:

npm install vuejs-paginate

Selepas memasang perpustakaan di atas, kita perlu melakukan operasi import dalam kod:

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

Kini, kita boleh menambah contoh penggunaan Paginator dalam Vue komponen:

<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>

Kod ini mentakrifkan teg jadual dan menambah teg penomboran di bawahnya. Teg penomboran mengandungi butang untuk halaman sebelumnya dan halaman seterusnya. Kami juga mentakrifkan beberapa sifat, seperti menetapkan nama Halaman semasa kepada Halaman semasa, menggunakan fungsi pageClick untuk mengendalikan peristiwa klik halaman dan menentukan jumlah bilangan halaman melalui sifat pageCount.

2. Tambahkan pengisihan pada jadual

Sebelum menambah pengisihan jadual, kita perlu memastikan bahawa item data dalam jadual adalah objek yang terkandung dalam tatasusunan, seperti:

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

Pengisihan diperlukan dalam banyak senario, seperti dalam Dalam aplikasi bahagian belakang pentadbir, pentadbir perlu boleh mengisih pengguna mengikut atribut item data yang berbeza untuk mencari data yang diperlukan dengan cepat.

Untuk menambah pengisihan pada jadual, kita boleh menggunakan Vue.js dan perpustakaan JavaScript yang dipanggil lodash. Di bawah Linux atau macOS, anda boleh memasang lodash menggunakan arahan berikut:

npm install lodash

Jika anda mendapat ralat dalam persekitaran pembangunan, cuba pasang menggunakan arahan berikut:

npm install --save-dev lodash

Pustaka Lodash menyediakan banyak fungsi berguna dan sangat sesuai untuk Digunakan dalam aplikasi Vue.js. Dalam contoh ini, kita perlu menggunakan fungsi orderBy lodash. Dalam komponen Vue, fungsi boleh diimport dan dipanggil menggunakan kod berikut:

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)
  }
}

Dalam contoh ini, kami mempunyai tableData yang mengandungi data jadual dan tatasusunan lajur yang mengandungi semua nama lajur. Kami juga mempunyai objek sortOrder yang mengandungi susunan semasa yang digunakan pada data jadual. Fungsi selectTableSort ialah pengendali isihan kami yang mengisih mengikut pengepala lajur tertentu apabila pengguna mengklik pada lajur tersebut.

Kami menggunakan fungsi orderBy lodash untuk mengisih tatasusunan tableData. Parameter pertama fungsi ialah tatasusunan dalam kepingan yang hendak diisih, parameter kedua ialah nama medan yang akan digunakan untuk mengisih, dan parameter ketiga menentukan susunan isihan (menaik atau menurun).

Akhir sekali, kami menggunakan this.sortTableData('id') untuk memanggil kaedah sortTableData dalam kaedah untuk mengisih data jadual pada mulanya mengikut lajur ID.

Ringkasan

Dalam artikel ini, kami memperkenalkan secara terperinci cara menggunakan Vue.js untuk melaksanakan kelui jadual dan pengisihan. Dengan menggunakan perpustakaan vuejs-paginate, kami boleh menambah fungsi penomboran dengan mudah. Pada masa yang sama, menggunakan fungsi orderBy pustaka lodash, kita boleh dengan cepat menambah fungsi pengisihan pada jadual.

Jadual ialah komponen biasa dalam pembangunan Vue.js. Sama ada anda bekerja sebagai pembangun bahagian hadapan atau pembangun tindanan penuh, menguasai kemahiran ini akan memudahkan anda memproses dan mengurus data serta membina aplikasi berkualiti tinggi dengan cepat.

Atas ialah kandungan terperinci Bagaimana untuk menggunakan Vue untuk melaksanakan paging dan menyusun jadual?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!