Bagaimana untuk menggunakan Vue untuk membina jadual data yang boleh diedit dan disimpan dalam masa nyata?

Vue ialah rangka kerja JavaScript yang popular yang boleh digunakan untuk membina pelbagai aplikasi web yang berbeza. Antaranya, jadual data merupakan komponen yang sering digunakan. Walau bagaimanapun, banyak aplikasi web perlu membenarkan pengguna mengedit jadual data dan menyimpan perubahan ini dalam masa nyata. Jadi, bagaimana untuk menggunakan Vue untuk melaksanakan fungsi ini? Dalam artikel ini, kami akan membincangkan cara menggunakan Vue untuk membina jadual data yang boleh diedit dan disimpan masa nyata, dengan harapan dapat membantu anda menggunakan Vue dengan lebih baik dalam pembangunan aplikasi web.

1. Struktur asas komponen Vue

Sebelum menggunakan Vue untuk membina jadual data, kita perlu terlebih dahulu memahami struktur asas komponen Vue. Komponen Vue terdiri daripada tiga bahagian: templat (templat), kod logik (skrip) dan gaya (gaya). Di antara tiga bahagian ini, templat menentukan kandungan paparan komponen, kod logik bertanggungjawab untuk memproses data dan logik komponen, dan gaya mengawal penampilan komponen. Berikut ialah contoh kod komponen Vue mudah:

<template>
  <div class="my-component">
    {{ message }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, world!'
    }
  }
}
</script>

<style>
.my-component {
  font-size: 20px;
}
</style>

Dalam komponen ini, bahagian templat hanya mengandungi elemen div dan pemegang tempat. Kod logik komponen ini mentakrifkan pembolehubah data bernama mesej dan memberikannya nilai lalai 'Hello, dunia!'. Akhir sekali, gaya mentakrifkan saiz fon sebanyak 20 piksel untuk kelas .my-component.

2. Bina jadual data boleh edit

Seterusnya, kami akan menunjukkan cara menggunakan Vue untuk membina jadual data boleh diedit yang ringkas. Dalam contoh ini, kami menganggap bahawa data dalam jadual disediakan oleh tatasusunan JavaScript, yang kemudiannya boleh diberikan ke dalam jadual menggunakan arahan v-untuk Vue.

1. Sediakan data

Dalam templat dan kod logik, kita perlu menggunakan pembolehubah data bernama baris untuk menyimpan data dalam jadual. Pembolehubah ini mestilah tatasusunan, dengan setiap elemen mewakili baris data. Berikut ialah contoh tatasusunan baris mudah:

var rows = [
  { id: 1, name: 'Apple', price: 10 },
  { id: 2, name: 'Banana', price: 5 },
  { id: 3, name: 'Orange', price: 8 }
]

2. Render jadual

Seterusnya, kita boleh menggunakan arahan v-for Vue untuk memaparkan data ke dalam jadual. Dalam contoh ini, kita boleh mencipta elemen jadual dan menggunakan dua gelung v-untuk bersarang, satu gelung melalui setiap baris dan satu lagi gelung melalui setiap lajur. Secara khusus, elemen input ditakrifkan dalam pengepala lajur, dan nilainya ialah tajuk lajur semasa. Elemen input juga ditakrifkan dalam setiap sel supaya pengguna boleh mengedit data dalam jadual.

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th v-for="column in columns">
            <input v-model="column.title" />
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in rows">
          <td v-for="column in columns">
            <input v-model="row[column.field]" />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rows: [
        { id: 1, name: 'Apple', price: 10 },
        { id: 2, name: 'Banana', price: 5 },
        { id: 3, name: 'Orange', price: 8 }
      ],
      columns: [
        { field: 'id', title: 'ID' },
        { field: 'name', title: 'Name' },
        { field: 'price', title: 'Price' }
      ]
    }
  }
}
</script>

3. Simpan perubahan

Akhir sekali, apabila pengguna mengedit data dalam jadual, kita perlu menyimpan perubahan ini pada tatasusunan baris. Kami boleh menggunakan pilihan jam tangan Vue untuk memantau perubahan dalam data setiap baris dan mengemas kini kedudukannya yang sepadan dalam tatasusunan baris. Secara khusus, kita boleh menentukan pembolehubah data bernama editedRow untuk menyimpan baris yang sedang diedit oleh pengguna. Kemudian, tambahkan acara @focus dan @blur pada sel untuk mengemas kini nilai pembolehubah EditedRow apabila pengguna mula mengedit dan menyelesaikan pengeditan. Akhir sekali, apabila pembolehubah editedRow berubah, kita boleh menyimpannya semula ke dalam tatasusunan baris.

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th v-for="column in columns">
            <input v-model="column.title" />
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in rows" :class="{ 'editing': row === editedRow }">
          <td v-for="column in columns">
            <input v-model="row[column.field]"
                  @focus="editedRow = row"
                  @blur="editedRow = null" />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rows: [
        { id: 1, name: 'Apple', price: 10 },
        { id: 2, name: 'Banana', price: 5 },
        { id: 3, name: 'Orange', price: 8 }
      ],
      columns: [
        { field: 'id', title: 'ID' },
        { field: 'name', title: 'Name' },
        { field: 'price', title: 'Price' }
      ],
      editedRow: null
    }
  },
  watch: {
    editedRow: function(newValue, oldValue) {
      if (oldValue && oldValue !== newValue) {
        // Save changes
        console.log('Changes saved for row:', oldValue)
      }
    }
  }
}
</script>

Dalam contoh ini, apabila pengguna mula mengedit baris, gayanya bertukar kepada kelas .editing. Kelas ini boleh digunakan untuk menentukan rupa sel yang sedang diedit. Apabila pengguna selesai mengedit, kami mengesan dalam pilihan jam tangan bahawa pembolehubah yang dieditRow berubah daripada bukan nol kepada kosong, dan kemudian menyimpan perubahan pada tatasusunan baris.

3. Kesimpulan

Artikel ini menunjukkan cara menggunakan Vue untuk membina jadual data yang boleh diedit dan disimpan dalam masa nyata. Dalam contoh ini, kami menggunakan arahan v-for Vue untuk memaparkan data ke dalam jadual dan menggunakan pilihan jam tangan untuk menyimpan perubahan pada data dalam setiap baris. Templat, kod logik dan bahagian gaya Vue boleh membantu kami menyusun kod kami dengan lebih baik dan menjadikan aplikasi kami lebih mudah untuk diselenggara dan dikembangkan. Melalui contoh ini, saya harap ia dapat membantu anda menggunakan Vue dengan lebih baik dalam pembangunan aplikasi web.

Atas ialah kandungan terperinci Bagaimana untuk menggunakan Vue untuk membina jadual data yang boleh diedit dan disimpan dalam masa nyata?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!