Bagaimana untuk melaksanakan fungsi pengisihan jadual dinamik dalam Vue

Apabila Vue menjadi popular dan semakin ramai perniagaan menggunakannya untuk membina aplikasi web mereka, kami mungkin menghadapi masalah yang memerlukan penjanaan jadual dinamik dan melaksanakan pengisihan dalam Vue. Dalam artikel ini, kami akan meneroka cara melaksanakan pengisihan jadual dinamik dalam Vue.

Pertama, untuk melaksanakan pengisihan jadual dinamik, kami memerlukan tatasusunan yang mengandungi data. Kita boleh menentukan tatasusunan dalam Vue menggunakan atribut data. Contohnya:

data() {
  return {
    tableData: [
      { name: 'John', age: 25, gender: 'male' },
      { name: 'Jane', age: 30, gender: 'female' },
      { name: 'Bob', age: 20, gender: 'male' }
    ],
    sortKey: 'name',
    reverse: false
  }
},

Seperti yang ditunjukkan di atas, kami mentakrifkan tatasusunan yang mengandungi tiga objek, setiap objek mengandungi atribut nama, umur dan jantina. Kami juga mentakrifkan sifat sortKey untuk menyimpan nama kunci isihan semasa, dan sifat terbalik untuk menyimpan sama ada susunan isihan perlu diterbalikkan.

Seterusnya, kita perlu mencipta kaedah yang boleh dicetuskan apabila pengepala jadual diklik. Dalam kaedah ini, kami akan menukar sifat sortKey untuk mengisih berdasarkan nama kunci yang berbeza dan menentukan sama ada untuk mengisih dalam tertib menaik atau menurun berdasarkan nilai sifat terbalik. Contohnya:

sortTable(key) {
  this.reverse = (this.sortKey == key) ? !this.reverse : false;
  this.sortKey = key;
  this.tableData.sort((a, b) => {
    let valA = a[key];
    let valB = b[key];
    if (this.reverse) {
      [valA, valB] = [valB, valA];
    }
    return valA.localeCompare(valB, 'zh-Hans-CN', { numeric: true });
  });
}

Dalam kaedah ini, kami mula-mula menentukan sama ada nama kunci pengisihan semasa adalah sama dengan pengepala yang diklik oleh pengguna Jika ya, atribut terbalik akan diterbalikkan, jika tidak, atribut terbalik akan ditetapkan semula kepada palsu. Kami kemudian menetapkan sifat sortKey kepada sifat data pengepala jadual yang diklik oleh pengguna.

Akhir sekali ialah bahagian teras kod pengisihan. Kami menggunakan kaedah isihan untuk mengisih tatasusunan, menggunakan fungsi anak panah, memusnahkan dan menyusun pelbagai bahasa. Khususnya, kami menggunakan nilai terbalik dan nilai atribut yang sepadan dengan nama kunci semasa, dan kemudian menggunakan kaedah localeCompare untuk membandingkan dua nilai untuk mencapai pengisihan bahasa Cina.

Seterusnya, kita perlu menambah pendengar acara pada pengepala jadual untuk memanggil kaedah Jadual Isih untuk melaksanakan pengisihan. Contohnya:

<th @click="sortTable(&#39;name&#39;)">姓名</th>
<th @click="sortTable(&#39;age&#39;)">年龄</th>
<th @click="sortTable(&#39;gender&#39;)">性别</th>

Di sini, kami menambah pendengar peristiwa klik untuk setiap sel pengepala jadual dan menghantar atribut data yang dipilih kepada kaedah Jadual Isih supaya apabila pengguna mengklik pada pengepala jadual untuk mengisih.

Akhir sekali, kami perlu mengemas kini jadual supaya ia dipaparkan semula selepas setiap pengisihan data. Kita boleh menggunakan arahan v-for untuk lelaran melalui tatasusunan tableData dan mengikat sifat setiap objek ke sel yang sepadan dalam jadual HTML. Contohnya:

<table>
  <thead>
    <tr>
      <th @click="sortTable(&#39;name&#39;)">姓名</th>
      <th @click="sortTable(&#39;age&#39;)">年龄</th>
      <th @click="sortTable(&#39;gender&#39;)">性别</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(item, index) in tableData" :key="index">
      <td>{{ item.name }}</td>
      <td>{{ item.age }}</td>
      <td>{{ item.gender }}</td>
    </tr>
  </tbody>
</table>

Melalui kod ini, kami boleh melaksanakan fungsi pengisihan jadual yang dijana secara dinamik dalam Vue dengan mudah. Sama ada bekerja dengan set data yang besar atau paparan diisih ringkas, Vue mempunyai banyak alatan dan kaedah praktikal untuk membantu kami menyelesaikan tugas.

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