Bagaimana untuk melaksanakan fungsi pengisihan jadual dan halaman dalam dokumen Vue

Vue ialah rangka kerja JavaScript popular yang sering digunakan untuk membangunkan aplikasi halaman tunggal (SPA). Apabila kami perlu memaparkan sejumlah besar data dalam aplikasi Vue, kami biasanya menggunakan jadual untuk membentangkan data. Pengisihan dan penomboran jadual adalah sangat penting untuk memudahkan pengguna menyemak imbas data. Artikel ini akan memperkenalkan cara menggunakan fungsi pengisihan jadual dan halaman dalam aplikasi Vue.

1. Laksanakan pengisihan jadual

Pertama, kita perlu memperkenalkan perpustakaan JavaScript yang dipanggil "lodash" ke dalam aplikasi Vue. Lodash ialah pustaka alat yang sangat berguna yang menyediakan banyak fungsi praktikal yang boleh memudahkan kerja pembangunan kami.

Seterusnya, dalam pilihan "data" komponen Vue, tentukan tatasusunan untuk menyimpan data yang ingin kami persembahkan. Kita juga perlu mentakrifkan harta untuk mengisih, seperti "sortKey" dan "reverse", dan menetapkan nilai lalainya masing-masing kepada "name" dan "false".

data() {
  return {
    items: [
      { name: 'John', age: 20 },
      { name: 'Bob', age: 25 },
      { name: 'Alice', age: 30 },
      { name: 'Peter', age: 35 }
    ],
    sortKey: 'name',
    reverse: false
  }
},

Seterusnya, kita perlu mentakrifkan acara klik untuk setiap lajur dalam pengepala supaya pengguna boleh mengisih mengikut lajur dengan mengklik pada pengepala. Pertama, kita perlu menentukan kaedah "sortBy" yang akan digunakan untuk mengisih data. Dalam kaedah ini, kita perlu terlebih dahulu menyimpan medan untuk diisih dalam atribut "sortKey", dan kemudian mengisih berdasarkan keadaan atribut "terbalik".

methods: {
  sortBy(key) {
    this.sortKey = key;
    this.reverse = !this.reverse;
    this.items.sort((a, b) => {
      let modifier = 1;
      if (this.reverse) modifier = -1;
      if (a[this.sortKey] < b[this.sortKey]) return -1 * modifier;
      if (a[this.sortKey] > b[this.sortKey]) return 1 * modifier;
      return 0;
    });
  }
},

Akhir sekali, kita perlu menggunakan arahan v-on untuk mengikat acara klik dan memanggil kaedah sortBy dalam setiap lajur pengepala jadual.

<th v-on:click="sortBy('name')">Name</th>
<th v-on:click="sortBy('age')">Age</th>

2. Laksanakan halaman jadual

Apabila kita perlu membentangkan sejumlah besar data, memaparkan semua data dalam satu jadual boleh menyebabkan halaman menatal perlahan. Oleh itu, kita perlu membahagikan data kepada berbilang halaman dan memaparkannya secara berasingan. Berikut ialah cara untuk melaksanakan paging.

Dalam pilihan "data" komponen Vue, kita perlu menentukan sifat "currentPage" untuk menjejak halaman yang dipaparkan pada masa ini. Dan tentukan atribut "pageSize" untuk menentukan bilangan item yang terkandung dalam setiap halaman.

data() {
  return {
    items: [
      { name: 'John', age: 20 },
      { name: 'Bob', age: 25 },
      { name: 'Alice', age: 30 },
      { name: 'Peter', age: 35 }
    ],
    currentPage: 1,
    pageSize: 2
  }
},

Seterusnya, kita perlu menentukan sifat yang dikira yang akan mengembalikan subset item yang diperlukan untuk halaman semasa.

computed: {
  displayedItems() {
    let start = (this.currentPage - 1) * this.pageSize;
    let end = start + this.pageSize;
    return this.items.slice(start, end);
  }
},

Akhir sekali, kita perlu menambah komponen paging pada templat Vue. Kami boleh menggunakan Vuetify, Bootstrap atau CSS tersuai untuk mencipta komponen halaman Di sini kami mengambil CSS tersuai sebagai contoh.

<ul class="pagination">
  <li v-bind:class="{ disabled: currentPage === 1 }" v-on:click="currentPage--">
    <a>Previous</a>
  </li>
  <li v-for="pageNumber in pages" v-bind:class="{ active: currentPage === pageNumber }" v-on:click="currentPage = pageNumber">
    <a>{{ pageNumber }}</a>
  </li>
  <li v-bind:class="{ disabled: currentPage === pageCount }" v-on:click="currentPage++">
    <a>Next</a>
  </li>
</ul>

Dalam komponen Vue, kita perlu menentukan dua sifat terkira baharu, "pageCount" mengira jumlah halaman dan "halaman" mengira tatasusunan yang digunakan untuk memaparkan nombor halaman dalam gelung.

computed: {
  pageCount() {
    return Math.ceil(this.items.length / this.pageSize);
  },
  pages() {
    let pagesArray = [];
    for (let i = 1; i <= this.pageCount; i++) {
      pagesArray.push(i);
    }
    return pagesArray;
  }
},

Dengan cara ini, kami telah menyelesaikan pelaksanaan paging jadual. Apabila kita mengklik pada nombor halaman dalam komponen penomboran, sifat "currentPage" dikemas kini dengan sewajarnya dan sifat dikira "displayedItems" digunakan untuk memaparkan item yang diperlukan untuk nombor halaman semasa. Ringkasnya, tidak sukar untuk melaksanakan pengisihan jadual dan halaman dalam Vue, dan ia boleh dicapai dengan mudah menggunakan kaedah di atas.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi pengisihan jadual dan halaman dalam dokumen Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!