Bagaimana untuk mendapatkan nilai vue jadual tersuai

Cara untuk mendapatkan nilai vue jadual tersuai

Dalam Vue.js, jadual dipaparkan menggunakan gelung arahan v-untuk. Setelah data tersuai wujud dalam jadual (seperti kotak senarai juntai bawah, butang radio, kotak semak, dsb.), anda memerlukan cara yang mudah untuk mendapatkan nilai data tersuai ini daripada jadual. Dalam artikel ini, kami akan memperkenalkan cara mendapatkan nilai jadual tersuai dalam Vue.js.

Pertama, kita perlu memahami kitaran hayat komponen Vue.js, kerana jadual tersuai biasanya mengandungi komponen. Komponen Vue.js mempunyai 9 fungsi kitaran hayat, iaitu:

beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed, errorCaptured

Antaranya, kami akan menggunakan create dan Melekapkan dua fungsi kitaran hayat untuk melaksanakan nilai jadual tersuai.

1. Dalam fungsi kitaran hayat yang dicipta, kita perlu menentukan model data jadual, termasuk pengepala jadual dan baris jadual. Kod berikut melaksanakan model data jadual, termasuk pengepala jadual dan baris jadual.

created() {
  this.headers = [
    { text: 'Name', value: 'name' },
    { text: 'Age', value: 'age' },
    { text: 'Gender', value: 'gender' },
    { text: 'Hobby', value: 'hobby' }
  ]
  this.items = [
    { name: 'John', age: 25, gender: 'Male', hobby: 'Basketball' },
    { name: 'Mary', age: 30, gender: 'Female', hobby: 'Singing' },
    { name: 'David', age: 28, gender: 'Male', hobby: 'Dancing' },
    { name: 'Rachel', age: 22, gender: 'Female', hobby: 'Reading' }
  ]
}

2. Dalam fungsi kitaran hayat yang dipasang, kita perlu mencipta fungsi untuk mendapatkan nilai dalam jadual tersuai. Gunakan atribut $refs Vue.js untuk merujuk elemen DOM dalam jadual dan dapatkan nilai daripada elemen DOM. Kod berikut melaksanakan fungsi untuk mendapatkan nilai data tersuai dalam jadual:

mounted() {
  this.getSelectedValues = function() {
    let items = this.$refs.table.getSelectedItems()
    let selectedValues = []
    for (let item of items) {
      selectedValues.push(item.hobby)
    }
    return selectedValues
  }
}

Dalam kod ini, kami memanggil fungsi $refs.table.getSelectedItems() untuk mendapatkan item data yang dipilih. Kami kemudiannya menggunakan gelung for untuk melelaran melalui item data yang dipilih dan menambah nilai atribut hobi mereka kepada tatasusunan Nilai yang dipilih, dan akhirnya mengembalikan tatasusunan.

3. Akhir sekali, tambahkan data tersuai dalam jadual dan pastikan anda menambah atribut rujukan pada elemen DOM lajur tersuai supaya ia boleh dirujuk menggunakan atribut $refs. Kod berikut menunjukkan cara menambah data tersuai dan merujuk elemen DOM pada jadual.

<v-data-table :headers="headers" :items="items" ref="table">
  <template v-slot:item.hobby="{ item }">
    <v-select v-model="item.hobby" :items="hobbies" ref="hobby" label="Hobby"></v-select>
  </template>
  <template v-slot:body>
    <tbody>
      <tr v-for="(item, index) in items" :key="index" v-bind:style="[ index % 2 == 0 ? { background: '#f2f2f2' } : {} ]">
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>{{ item.gender }}</td>
        <td><v-select v-model="item.hobby" :items="hobbies" label="Hobby"></v-select></td>
      </tr>
    </tbody>
  </template>
</v-data-table>

Dalam contoh ini, kami menggunakan komponen v-select sebagai data tersuai. Untuk merujuk elemen DOM, anda perlu menambah atribut ref pada elemen v-select. Kami juga menunjukkan cara menambah lajur v-select pada jadual. Akhir sekali, kami menambah arahan v-model pada elemen v-select supaya pemilihan pengguna boleh terikat dalam kedua-dua arah.

Ringkasan

Jadual tersuai dalam Vue.js boleh memberikan kami lebih fleksibiliti untuk membentangkan dan memproses lebih banyak data dan maklumat. Menggunakan ciri Vue.js, kami boleh mendapatkan dan memproses data dengan mudah daripada jadual tersuai. Dalam artikel ini, kami menggunakan dua fungsi kitaran hayat yang dibuat dan dipasang untuk mendapatkan nilai jadual tersuai. Kami juga membincangkan cara menggunakan atribut $refs untuk merujuk elemen DOM.

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan nilai vue jadual tersuai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!