Kaedah pelaksanaan jadual boleh diedit dalam dokumen Vue

Vue.js ialah salah satu rangka kerja bahagian hadapan yang paling popular pada masa ini Ia menggunakan pendekatan dipacu data untuk membina antara muka pengguna dan mempunyai ciri pengikatan data dua hala dan komponenisasi. Dalam dokumentasi Vue.js, kaedah untuk melaksanakan jadual boleh diedit disediakan. Artikel ini akan memperkenalkan langkah pelaksanaan khusus kaedah ini.

1. Sediakan data

Pertama, sediakan satu set data Di sini kami mengambil maklumat pelajar sebagai contoh. Format data boleh menjadi tatasusunan, setiap elemen mengandungi atribut seperti nama, jantina, umur, dsb.

students: [
   { name: '小明', gender: '男', age: 18 },
   { name: '小红', gender: '女', age: 17 },
   { name: '小刚', gender: '男', age: 19 },
   { name: '小丽', gender: '女', age: 18 }
]

2. Tentukan jadual

Seterusnya, anda perlu menentukan komponen jadual, yang digunakan untuk memaparkan data dan menyokong klik untuk memasuki mod edit untuk mengubah suai data. Sintaks templat Vue.js digunakan di sini untuk mentakrifkan jadual, di mana arahan v-untuk digunakan untuk menggelung melalui data senarai untuk memaparkan maklumat setiap pelajar arahan v-jika digunakan untuk mengawal syarat untuk memasuki mod edit. Kodnya adalah seperti berikut:

<template>
   <table>
      <thead>
         <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th></th>
         </tr>
      </thead>
      <tbody>
         <tr v-for="(student, index) in students" :key="index">
            <td v-if="!student.editable">{{ student.name }}</td>
            <td v-else><input v-model="student.name" /></td>
            <td v-if="!student.editable">{{ student.gender }}</td>
            <td v-else>
               <select v-model="student.gender">
                  <option value="男">男</option>
                  <option value="女">女</option>
               </select>
            </td>
            <td v-if="!student.editable">{{ student.age }}</td>
            <td v-else><input v-model.number="student.age" /></td>
            <td>
               <button v-if="!student.editable" @click="toggleEdit(index)">编辑</button>
               <button v-else @click="toggleEdit(index)">保存</button>
            </td>
         </tr>
      </tbody>
   </table>
</template>

Dalam kod di atas, atribut student.editable digunakan untuk menentukan sama ada baris data semasa berada dalam mod edit Jika palsu, kandungan sel dipaparkan, sebaliknya label input atau pilih dipaparkan , membenarkan pengguna mengubah suai data. Pada masa yang sama, acara klik terikat pada penghujung kod untuk menukar mod pengeditan.

Untuk menentukan kaedah toggleEdit yang digunakan dalam kod di atas, kami perlu menambahkan beberapa kod pada bahagian skrip Vue.js.

<script>
export default {
   data() {
      return {
         students: [ // 准备数据
            { name: '小明', gender: '男', age: 18 },
            { name: '小红', gender: '女', age: 17 },
            { name: '小刚', gender: '男', age: 19 },
            { name: '小丽', gender: '女', age: 18 }
         ]
      };
   },
   methods: {
      toggleEdit(index) {
         this.students[index].editable = !this.students[index].editable;
      }
   }
};
</script>

Dalam kod di atas, kaedah toggleEdit digunakan untuk menukar keadaan elemen yang boleh diedit pada kedudukan indeks yang ditentukan. Pada masa yang sama, tambahkan atribut boleh diedit pada pilihan data, dengan nilai awal adalah palsu.

data() {
   return {
      students: [
         { name: '小明', gender: '男', age: 18, editable: false },
         { name: '小红', gender: '女', age: 17, editable: false },
         { name: '小刚', gender: '男', age: 19, editable: false },
         { name: '小丽', gender: '女', age: 18, editable: false }
      ]
   };
}

3. Lengkap

Selepas melengkapkan penulisan kod di atas, anda boleh melaksanakan jadual mudah dan boleh diedit. Pengguna boleh memasuki mod pengeditan dengan mengklik butang "Edit", mengubah suai data, dan klik butang "Simpan" sekali lagi untuk menyelesaikan pengubahsuaian dan keluar dari mod penyuntingan.

Dalam penggunaan sebenar, anda mungkin perlu menambah beberapa pengesahan data, penyerahan dan fungsi lain. Walau bagaimanapun, kami boleh melaksanakan fungsi ini dengan cepat dan meningkatkan kecekapan pembangunan melalui kaedah di atas dan ciri lain Vue.js.

Atas ialah kandungan terperinci Kaedah pelaksanaan jadual boleh diedit dalam dokumen Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!