Cara mengendalikan semak jadual dan pilih semua fungsi dalam dokumen Vue

Vue ialah rangka kerja JavaScript popular yang membolehkan pembangun membina antara muka web yang interaktif dan responsif dengan mudah. Rangka kerja Vue menyediakan satu siri komponen dan arahan untuk membina elemen halaman biasa, seperti jadual, borang, menu, dsb. Dalam artikel ini, kami akan meneroka cara mengendalikan semakan jadual dan memilih semua fungsi dalam dokumen Vue.

Dalam Vue, kita boleh menggunakan arahan model v untuk mengikat elemen bentuk dua hala kepada data dalam contoh Vue. Ini membolehkan kami dengan mudah mengumpul input pengguna, mengesahkan dan memprosesnya. Dalam jadual, kita boleh menggunakan arahan v-for dan v-bind untuk menjana baris dan lajur jadual secara dinamik, dan menggunakan arahan model v untuk mengikat data dalam sel jadual. Walau bagaimanapun, apabila jadual mempunyai lajur kotak berbilang pilihan, kami memerlukan pengurusan keadaan untuk kotak berbilang pilihan ini supaya data dalam tika Vue dikemas kini apabila pengguna memilih baris jadual. Di bawah ialah beberapa coretan kod yang menunjukkan cara melaksanakan fungsi semakan jadual dalam Vue.

Tambahkan lajur kotak berbilang pilihan pada jadual

Kita boleh menambah kotak berbilang pilihan b4d429308760b6c2d20d6300079ed38e elemen ae20bdd317918ca68efdc799512a9b39 Dalam elemen 92cee25da80fac49f6fb6eec5fd2c22a pada jadual, kita boleh menggunakan arahan v-for untuk menjana baris jadual secara dinamik dan menambah sel kotak berbilang pilihan pada setiap baris. Berikut ialah contoh kod:

<table>
  <thead>
    <tr>
      <th>
        <input type="checkbox" v-model="selectAll">
      </th>
      <th>Name</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="user in users">
      <td>
        <input type="checkbox" v-model="user.checked">
      </td>
      <td>{{ user.name }}</td>
      <td>{{ user.email }}</td>
    </tr>
  </tbody>
</table>

Dalam kod di atas, kami menggunakan pengguna data dan pilihSemua dalam contoh Vue. pengguna ialah tatasusunan, setiap elemen mewakili baris data, termasuk nama dan alamat e-mel. Melalui arahan v-for dan sintaks templat, kami boleh menjana data ini secara dinamik ke dalam baris jadual. selectAll ialah nilai Boolean yang menunjukkan sama ada pengguna telah menandakan kotak semak Pilih Semua.

Laksanakan fungsi pilih semua dalam jadual

Apabila pengguna menyemak kotak semak pilih semua berbilang dalam jadual, kami berharap untuk menyemak semua kotak semak berbilang dalam jadual. Berikut ialah kaedah pelaksanaan fungsi selectAll dalam contoh Vue:

data() {
  return {
    selectAll: false,
    users: [
      { name: 'John', email: 'john@example.com', checked: false },
      { name: 'Jane', email: 'jane@example.com', checked: false },
      { name: 'Bob', email: 'bob@example.com', checked: false }
    ]
  }
},
methods: {
  selectAllRows() {
    for (let user of this.users) {
      user.checked = this.selectAll
    }
  }
}

Dalam kod di atas, kami mentakrifkan atribut selectAll dan pengguna dalam fungsi data tika Vue. selectAll menunjukkan sama ada pengguna telah menandakan kotak semak pilih semua dan pengguna menunjukkan data dalam jadual. Kami juga menentukan fungsi selectAllRows dalam contoh Vue, yang akan dipanggil apabila pengguna menyemak kotak pilihan Pilih Semua. Dalam fungsi selectAllRows, kami mengulangi semua data dalam jadual dan menetapkan atribut yang disemak kepada nilai selectAll.

Melaksanakan fungsi berbilang pilih dalam jadual

Apabila pengguna mengklik kotak berbilang pilihan baris tertentu, kami perlu mengemas kini data dalam contoh Vue dan mengira semula keadaan kotak berbilang pilihan pilih-semua . Berikut ialah kaedah pelaksanaan fungsi checkRow dalam contoh Vue:

methods: {
  checkRow(user) {
    user.checked = !user.checked
    this.selectAll = this.users.every(user => user.checked)
  }
}

Dalam kod di atas, kami mentakrifkan fungsi checkRow dalam tika Vue Apabila pengguna mengklik kotak berbilang pilihan baris tertentu , ia akan Memanggil fungsi ini. Dalam fungsi checkRow, kami mula-mula menyongsangkan atribut yang ditandakan bagi baris, menunjukkan bahawa pengguna telah menandai atau menyahtanda baris tersebut. Kemudian, kami mengira semula status kotak berbilang pilih Pilih Semua dan tentukan sama ada kotak berbilang pilih Pilih Semua ditandakan dengan menilai sama ada atribut yang disemak bagi semua data dalam jadual adalah benar.

Ringkasan

Rangka kerja Vue menyediakan satu siri arahan dan komponen yang membolehkan pembangun membina antara muka web yang interaktif dan responsif dengan mudah. Dalam jadual, menyemak dan memilih semua adalah keperluan biasa Rangka kerja Vue memberikan kita arahan dan kaedah yang sepadan, menjadikannya sangat mudah untuk melaksanakan fungsi ini. Dalam artikel ini, kami mempelajari cara menjana jadual secara dinamik dalam Vue dan melaksanakan fungsi berbilang pilih dan semua pilihan dalam jadual Kami berharap ia akan membantu anda.

Atas ialah kandungan terperinci Cara mengendalikan semak jadual dan pilih semua fungsi dalam dokumen Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!