Bagaimana untuk melaksanakan senarai boleh disusun dalam Vue?

Vue.js ialah rangka kerja bahagian hadapan JavaScript yang popular yang membantu pembangun membina antara muka interaktif dengan cepat. Isih senarai ialah ciri biasa dalam aplikasi web, dan cara melaksanakan senarai boleh susun ialah teknik yang perlu diketahui oleh pembangun Vue.js. Artikel ini akan meneroka cara melaksanakan senarai boleh diisih dalam Vue.

1. Prinsip asas melaksanakan senarai boleh diisih

Melaksanakan senarai boleh diisih dalam Vue terutamanya melibatkan dua aspek: satu ialah pengisihan data, dan satu lagi ialah kemas kini paparan. Untuk pengisihan data, kami boleh melaksanakannya melalui kaedah sort() tatasusunan JavaScript. Kaedah ini menerima fungsi perbandingan pilihan yang menentukan cara elemen dalam tatasusunan disusun. Untuk kemas kini paparan, kami boleh menggunakan arahan v-for dalam Vue untuk menjana senarai, dan menggunakan mekanisme responsif Vue untuk mencapai kemas kini data masa nyata.

Apabila melaksanakan senarai boleh diisih, kita juga perlu mempertimbangkan aspek berikut:

1. Kaedah isih: tertib menaik atau menurun?
2. Isih medan: Medan yang manakah hendak diisih?
3. Isih seret dan lepas: Menyokong pengisihan item dalam senarai dengan menyeret dan menjatuhkan.

2. Pelaksanaan senarai boleh diisi berdasarkan Vue.js

Di bawah kami akan melaksanakan senarai yang menyokong pengisihan dan seret dan lepas berdasarkan Vue.js.

1. Melaksanakan kaedah pengisihan

Kita boleh mentakrifkan kaedah sortList untuk melaksanakan fungsi mengisih senarai. Kaedah ini menerima dua parameter: sortField dan sortOrder, yang masing-masing mewakili medan pengisihan dan kaedah pengisihan. Dalam kaedah ini, kami menggunakan kaedah sort() tatasusunan JavaScript untuk mengisih senarai.

sortList(sortField, sortOrder) {
this.list.sort((a, b) => {

if (sortOrder === 'asc') {
  if (a[sortField] > b[sortField]) {
    return 1;
  } else if (a[sortField] < b[sortField]) {
    return -1;
  } else {
    return 0;
  }
} else {
  if (a[sortField] > b[sortField]) {
    return -1;
  } else if (a[sortField] < b[sortField]) {
    return 1;
  } else {
    return 0;
  }
}

});

2. Mencapai draggable sorting

Anda perlu menyusun untuk mencapai draggable untuk menggunakan arahan drag-and-drop Vue.js v-draggable. Arahan ini membolehkan kami mendayakan fungsi menyeret pada elemen. Dalam arahan ini, kita boleh menggunakan pengubah suai acara untuk mendengar peristiwa seretan untuk melaksanakan pengisihan seret.

 :key="item.id"
 v-draggable
 @dragstart="onDragStart(item, index)"
 @dragend="onDragEnd"
 @drop="onDrop">

Dalam kod di atas, kami menggunakan arahan v-for untuk menjana the list , gunakan arahan v-draggable untuk mendayakan fungsi drag. Dalam pendengar acara yang sepadan, kita boleh melaksanakan fungsi pengisihan seret dan lepas.

3. Melaksanakan kemas kini paparan

Untuk mencapai kemas kini masa nyata paparan, kita perlu mencetuskan kaedah $forceUpdate bagi contoh Vue secara manual apabila sumber data berubah, dengan itu memaksa tika Vue untuk memaparkan semula pandangan. . pelaksanaan senarai berdasarkan Vue.js. Dalam pembangunan sebenar, kita boleh melanjutkan pelaksanaan ini mengikut keperluan perniagaan tertentu.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan senarai boleh disusun dalam Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!