Cara melaksanakan fungsi pengisihan jadual dan penyembunyian lajur dalam dokumen Vue

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 //排序方式
}

2. 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;
    });
  }
}

3. 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;
  }
}

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>

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: [] //已选中的列
}

2. 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));
  }
}

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>

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!