Rumah > hujung hadapan web > View.js > teks badan

Cara melaksanakan fungsi pengisihan jadual dan penyembunyian lajur dalam dokumen Vue

王林
Lepaskan: 2023-06-20 18:50:19
asal
1693 orang telah melayarinya

Vue ialah rangka kerja JavaScript popular yang digunakan secara meluas untuk membangunkan projek bahagian hadapan. Antaranya, dokumentasi Vue menyediakan banyak fungsi dan contoh kod yang berguna, termasuk pengisihan jadual dan penyembunyian lajur. Jika anda sedang membangunkan aplikasi borang menggunakan Vue, ciri ini boleh meningkatkan pengalaman dan kefungsian pengguna anda.

Artikel ini akan memperkenalkan kaedah pelaksanaan pengisihan jadual dan fungsi penyembunyian lajur dalam dokumen Vue. Kami akan membincangkan beberapa konsep asas mengenai topik ini dan menyediakan kod sampel.

1. Isih jadual

Dokumentasi Vue mengandungi contoh kod untuk melaksanakan pengisihan jadual. Terdapat tiga konsep utama untuk melaksanakan pengisihan jadual dalam Vue: data, sifat terkira dan fungsi pengisihan.

  1. Data

Seperti yang ditunjukkan dalam kod berikut, kita memerlukan objek data di mana data jadual disimpan.

data: {
  tableData: [
    { name: 'John', age: 28, score: 85 },
    { name: 'Jane', age: 24, score: 90 },
    { name: 'Bob', age: 32, score: 76 },
    { name: 'Barbara', age: 29, score: 92 },
  ],
  sortKey: '', //现在排序的关键字
  reverse: false //排序方式
}
Salin selepas log masuk
  1. Sifat Berkomputer

Seterusnya, kita perlu menggunakan sifat yang dikira untuk mengisih berdasarkan data sedia ada. Sifat yang dikira ialah konsep penting dalam Vue yang membolehkan anda mengemas kini DOM secara automatik apabila data berubah.

computed: {
  sortedTableData() {
    return this.tableData.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;
    });
  }
}
Salin selepas log masuk
  1. Fungsi isih

Akhir sekali, kita perlu menulis fungsi untuk mengendalikan acara klik pada pengepala. Apabila pengguna mengklik pada pengepala, kami akan memanggil fungsi ini, menghantar nama pengepala sebagai parameter. Fungsi isihan akan mengemas kini sifat sortKey dan terbalik berdasarkan nilai yang diluluskan, sekali gus mencetuskan kemas kini harta yang dikira.

methods: {
  sort(key) {
    this.sortKey = key;
    this.reverse = !this.reverse;
  }
}
Salin selepas log masuk

Kod HTML terakhir adalah seperti berikut:

<table>
  <thead>
    <tr>
      <th @click="sort('name')">Name</th>
      <th @click="sort('age')">Age</th>
      <th @click="sort('score')">Score</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="item in sortedTableData" :key="item.name">
      <td>{{ item.name }}</td>
      <td>{{ item.age }}</td>
      <td>{{ item.score }}</td>
    </tr>
  </tbody>
</table>
Salin selepas log masuk

2 Penyembunyian lajur

Ciri lain yang berguna dalam dokumentasi Vue ialah penyembunyian lajur. Jika jadual anda mengandungi banyak lajur, anda mungkin mahu membenarkan pengguna mengawal lajur yang boleh dilihat.

Terdapat dua konsep utama dalam melaksanakan penyembunyian lajur: data dan sifat yang dikira.

  1. Data

Kami memerlukan objek data yang memegang keadaan lajur yang dipilih.

data: {
  tableData: [
    { name: 'John', age: 28, score: 85 },
    { name: 'Jane', age: 24, score: 90 },
    { name: 'Bob', age: 32, score: 76 },
    { name: 'Barbara', age: 29, score: 92 },
  ],
  selectedColumns: [] //已选中的列
}
Salin selepas log masuk
  1. Harta Berkomputer

Kami memerlukan harta yang dikira untuk menyembunyikan atau menunjukkan setiap lajur. Harta yang dikira mengembalikan tatasusunan nama lajur yang dipilih. Gunakan arahan v-for untuk membuat teg ke secara dinamik.

computed: {
  visibleColumns() {
    return ['name', 'age', 'score'].filter(column => !this.selectedColumns.includes(column));
  }
}
Salin selepas log masuk

Kod HTML terakhir adalah seperti berikut:

<table>
  <thead>
    <tr>
      <th v-for="column in visibleColumns" :key="column">{{ column }}</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="item in tableData" :key="item.name">
      <td v-if="!selectedColumns.includes('name')">{{ item.name }}</td>
      <td v-if="!selectedColumns.includes('age')">{{ item.age }}</td>
      <td v-if="!selectedColumns.includes('score')">{{ item.score }}</td>
    </tr>
  </tbody>
</table>
Salin selepas log masuk

3 Ringkasan

Di atas adalah pengenalan kepada kaedah pelaksanaan fungsi pengisihan jadual dan penyembunyian lajur dalam dokumen Vue. . Ciri ini memberikan pengalaman interaktif yang lebih baik untuk pengguna anda dan meningkatkan kefungsian aplikasi anda. Apabila melaksanakan ciri ini, pastikan anda menggunakan sifat dan kaedah yang dikira untuk mengemas kini data dan DOM. Ini akan memastikan aplikasi anda kekal disegerakkan dan responsif pada setiap masa.

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

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!