Bagaimana untuk mengedit dan membatalkan jadual dalam Vue?

Bagaimana untuk mengedit dan membatalkan jadual dalam Vue?

Dalam pembangunan Vue, selalunya perlu untuk mengedit dan mengubah suai jadual, jadi amat penting untuk mengedit dan membatalkan jadual. Di sini, artikel ini akan memperkenalkan cara mengedit dan membatalkan jadual dalam Vue.

1. Pengikatan data jadual

Dalam jadual, kita perlu memaparkan data terlebih dahulu ke dalam jadual, jadi data perlu diikat. Dalam Vue, traversal dan rendering data boleh dicapai dengan menggunakan arahan v-for.

Sebagai contoh, takrifkan data sampel dalam data seperti berikut:

data() {
  return {
    tableData: [
      {name: '张三', age: 20},
      {name: '李四', age: 22},
      {name: '王五', age: 25},
    ],
    editIndex: -1,
  }
}

Antaranya, tatasusunan tableData ditakrifkan, yang menyimpan tiga objek, setiap objek mewakili satu baris data dalam jadual. editIndex mewakili baris jadual yang sedang diedit, dan nilai awal ialah -1, menunjukkan keadaan tidak diedit.

Dalam jadual, anda boleh menggunakan kod berikut untuk memaparkan data:

<table>
  <tr v-for="(item, index) in tableData" :key="index">
    <td>{{ item.name }}</td>
    <td>{{ item.age }}</td>
    <td>
      <button @click="editRow(index)">编辑</button>
    </td>
  </tr>
</table>

Dalam kod di atas, gunakan arahan v-for untuk menggelungkan data dalam tatasusunan tableData, dan gunakan atribut :key untuk menentukan unik pengecam setiap elemen. Pada masa yang sama, setiap baris dalam jadual mempunyai butang "Edit" Mengklik butang ini akan meletakkan baris semasa ke dalam status pengeditan.

2. Menukar keadaan pengeditan jadual

Dalam Vue, anda boleh merekodkan indeks baris yang sedang diedit dengan mentakrifkan pembolehubah editIndex. Apabila pengguna mengklik butang "Edit", indeks baris di mana butang terletak ditetapkan kepada nilai editIndex dan data dalam baris dalam jadual dipaparkan dalam keadaan boleh diedit. Apabila pengguna mengklik butang Simpan atau Batal, menetapkan semula nilai editIndex kepada -1, menunjukkan bahawa tiada baris sedang diedit.

Dalam kod, anda boleh menggunakan kod berikut untuk menukar status penyuntingan:

methods: {
  // 编辑表格行
  editRow(index) {
    if (this.editIndex !== -1) {
      // 如果已经在编辑状态，则提示用户
      alert('请先完成当前行的编辑');
      return;
    }
    // 将该行的所以设置为编辑状态
    this.editIndex = index;
  },
  // 保存表格行
  saveRow() {
    // 执行保存操作
    // ...

    // 重置编辑状态
    this.editIndex = -1;
  },
  // 取消表格行
  cancelRow() {
    // 重置编辑状态
    this.editIndex = -1;
  }
}

Dalam kod di atas, kaedah editRow digunakan untuk menetapkan status penyuntingan baris jadual, kaedah saveRow digunakan untuk menyimpan keputusan penyuntingan jadual, dan kaedah cancelRow digunakan untuk membatalkan pengeditan jadual.

3. Mengedit baris jadual

Dalam jadual, apabila memasuki keadaan pengeditan, data baris jadual perlu dipaparkan dalam keadaan boleh diedit. Dalam Vue, kesan ini boleh dicapai dengan menggunakan elemen bentuk seperti input dan pilih.

Sebagai contoh, apabila memaparkan data lajur nama dan umur dalam baris jadual, anda boleh menggunakan kod berikut:

<tr v-for="(item, index) in tableData" :key="index">
  <td>
    <input type="text" :value="editIndex === index ? item.name : item.name">
  </td>
  <td>
    <input type="text" :value="editIndex === index ? item.age : item.age">
  </td>
  <td>
    <button @click="editRow(index)">编辑</button>
    <button @click="saveRow()">保存</button>
    <button @click="cancelRow()">取消</button>
  </td>
</tr>

Dalam kod di atas, elemen input digunakan untuk merealisasikan keadaan data lajur nama dan umur yang boleh diedit. Gunakan tiga butang untuk menukar keadaan penyuntingan jadual Butang "Simpan" digunakan untuk menyimpan hasil pengeditan, menyimpan data dalam pelayan latar belakang atau mengemas kini data dalam keadaan setempat.

Ringkasan

Melalui langkah di atas, kami boleh mengedit dan membatalkan jadual dalam Vue. Dalam pembangunan sebenar, fungsi penyuntingan boleh disesuaikan mengikut keperluan, seperti melaksanakan fungsi penyuntingan tersuai untuk sel jadual, menambah gesaan semak untuk data jadual, dsb.

Atas ialah kandungan terperinci Bagaimana untuk mengedit dan membatalkan jadual dalam Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!