Bagaimana untuk melaksanakan jadual boleh diedit dalam Vue

Dalam banyak aplikasi web, jadual merupakan komponen penting. Jadual biasanya mempunyai jumlah data yang besar, jadi jadual memerlukan beberapa ciri khusus untuk meningkatkan pengalaman pengguna. Salah satu ciri penting ialah keboleheditan. Dalam artikel ini, kami akan meneroka cara melaksanakan jadual boleh diedit menggunakan Vue.js dan memberikan contoh kod khusus.

Langkah 1: Sediakan data

Pertama, kita perlu menyediakan data untuk jadual. Kita boleh menggunakan objek JSON untuk menyimpan data jadual dan menyimpannya dalam sifat data bagi contoh Vue. Dalam contoh ini kita akan mencipta jadual ringkas dengan tiga lajur: Nama, Kuantiti dan Harga. Berikut ialah data sampel yang akan kami gunakan:

data: {
  items: [
    { name: 'Item 1', quantity: 1, price: 10 },
    { name: 'Item 2', quantity: 2, price: 20 },
    { name: 'Item 3', quantity: 3, price: 30 }
  ]
}

Langkah 2: Cipta komponen jadual

Kami akan menggunakan komponen Vue.js untuk mencipta jadual. Salah satu faedah menggunakan komponen ialah ia boleh digunakan semula dan digunakan beberapa kali dalam aplikasi Vue. Berikut ialah struktur asas komponen jadual yang akan kami buat:

<template>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Quantity</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in items">
        <td>{{ item.name }}</td>
        <td>{{ item.quantity }}</td>
        <td>{{ item.price }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  name: 'TableComponent',
  props: {
    items: {
      type: Array,
      required: true
    }
  }
}
</script>

Komponen ini mempunyai nama yang dipanggil "TableComponent" dan menggunakan atribut props untuk menerima koleksi data kami yang terdahulu sebagai sifatnya. Arahan v-for digunakan untuk memaparkan baris dalam jadual. Arahan ini bergelung melalui setiap objek dalam tatasusunan item dan mencipta baris yang sepadan. v-for指令用于渲染表格中的行。该指令循环遍历items数组中的每个对象并创建对应的行。

步骤3：启用编辑

现在，我们已经可以在应用程序中显示表格了。下一步是使表格可编辑。为了实现这一点，我们将添加一个“编辑”按钮。用户单击该按钮后，将启用相应单元格的编辑功能。

以下是我们将在表格中添加的编辑按钮的基本代码：

<template>
  <!---  添加按钮  -->
  <table>
    <!---  前面的表头和tbody就不再赘述  -->
    <tfoot>
      <tr>
        <td colspan="3">
          <button @click="addRow">Add Row</button>
        </td>
      </tr>
    </tfoot>
  </table>
</template>

<script>
export default {
  name: 'TableComponent',
  props: {
    items: {
      type: Array,
      required: true
    }
  },
  methods: {
    addRow() {
      this.items.push({
        name: '',
        quantity: 0,
        price: 0
      })
    }
  }
}
</script>

我们添加了一个按钮，当用户单击该按钮时，将调用addRow方法。该方法将向items数组添加一个新项目对象，初始值为空字符串、0和0。

步骤4：启用单元格编辑

现在，我们已经有了添加新行的功能。下一步是启用单元格编辑功能。一旦用户单击编辑按钮，我们将使相关单元格变为可编辑状态。

我们将使用以下代码来启用单元格编辑功能：

<template>
  <table>
    <!---  前面的表头、tbody和tfoot  -->

    <tbody>
      <tr v-for="(item, index) in items" :key="index">
        <td :contenteditable="item.editable" @dblclick="toggleCellEdit(index, 'name')">{{ item.name }}</td>
        <td :contenteditable="item.editable" @dblclick="toggleCellEdit(index, 'quantity')">{{ item.quantity }}</td>
        <td :contenteditable="item.editable" @dblclick="toggleCellEdit(index, 'price')">{{ item.price }}</td>
        <td>
          <button @click="toggleRowEdit(index)">Edit</button>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  name: 'TableComponent',
  props: {
    items: {
      type: Array,
      required: true
    }
  },
  methods: {
    addRow() {
      // 添加新行
    },
    toggleRowEdit(index) {
      let item = this.items[index]
      item.editable = !item.editable
    },
    toggleCellEdit(index, key) {
      let item = this.items[index]
      if (item.editable) {
        return
      }
      item.editable = true
      let el = this.$refs['cell-' + index + '-' + key]
      let oldVal = el.innerText
      el.innerHTML = '<input type="text" value="' + oldVal + '" @blur="cellEditDone(' + index + ', '' + key + '', $event)">'
      el.focus()

    },
    cellEditDone(index, key, event) {
      let item = this.items[index]
      item.editable = false
      item[key] = event.target.value
    }
  }
}
</script>

我们将添加一个顶级属性“editable”，以跟踪表格行和单元格的编辑状态。在默认情况下，editable设置为false。

使用toggleRowEdit方法，我们可以在单击编辑按钮时切换行的状态。如果行当前是非编订状态，函数将行的editable值设置为true，并在单元格中添加一个文本框，以使编辑状态启动。在此状态下，如果单击其他单元格，我们将使用toggleCellEdit方法来切换单元格的状态。

该方法将原始文本替换为包含文本框的HTML元素，并将其聚焦到文本框中。在输入完成后，将调用单元格编辑完成方法cellEditDone

Langkah 3: Dayakan pengeditan

Kini kami bersedia untuk memaparkan jadual dalam aplikasi. Langkah seterusnya ialah membuat jadual boleh diedit. Untuk mencapai ini, kami akan menambah butang "Edit". Apabila pengguna mengklik butang, fungsi penyuntingan sel yang sepadan didayakan.

Berikut ialah kod asas untuk butang edit yang akan kami tambahkan pada jadual:

<template>
  <div>
    <table-component :items="items" />
  </div>
</template>

<script>
import TableComponent from './TableComponent.vue'

export default {
  name: 'App',
  components: {
    TableComponent
  },
  data: {
    items: [
      { name: 'Item 1', quantity: 1, price: 10 },
      { name: 'Item 2', quantity: 2, price: 20 },
      { name: 'Item 3', quantity: 3, price: 30 }
    ]
  }
}
</script>

Kami telah menambah butang dan apabila pengguna mengklik butang tersebut, kaedah addRow akan dipanggil. Kaedah ini akan menambah objek item baharu pada tatasusunan item, dengan nilai awalnya ialah rentetan kosong, 0 dan 0.

Langkah 4: Dayakan pengeditan sel

Kini, kami mempunyai keupayaan untuk menambah baris baharu. Langkah seterusnya ialah untuk membolehkan pengeditan sel. Sebaik sahaja pengguna mengklik butang edit, kami akan menjadikan sel yang berkaitan boleh diedit. 🎜🎜Kami akan menggunakan kod berikut untuk mendayakan pengeditan sel: 🎜rrreee🎜Kami akan menambah atribut peringkat teratas "boleh diedit" untuk menjejak status pengeditan baris dan sel jadual. Secara lalai, boleh diedit ditetapkan kepada palsu. 🎜🎜Menggunakan kaedah toggleRowEdit, kita boleh menogol keadaan baris apabila butang edit diklik. Jika baris pada masa ini tidak diedit, fungsi menetapkan nilai boleh diedit baris kepada benar dan menambah kotak teks pada sel untuk mendayakan keadaan edit. Dalam keadaan ini, jika kami mengklik pada sel lain, kami akan menggunakan kaedah toggleCellEdit untuk menogol keadaan sel. 🎜🎜Kaedah ini menggantikan teks asal dengan elemen HTML yang mengandungi kotak teks dan memfokuskannya ke dalam kotak teks. Selepas input selesai, kaedah penyelesaian pengeditan sel cellEditDone akan dipanggil untuk mengemas kini nilai ke dalam pengumpulan data dan menutup keadaan pengeditan. 🎜🎜Langkah 5: Jalankan Apl🎜🎜Kami bersedia untuk menjalankan apl dan menguji borang yang boleh diedit. Berikut ialah konteks asas Vue.js yang digunakan untuk memaparkan dan menguji komponen jadual boleh diedit kami: 🎜rrreee🎜 Kami menyerahkannya kepada komponen jadual apabila memulakannya menggunakan sifat item. Ini akan membenarkan contoh komponen mengakses objek data kami dan menjadikannya dalam jadual. Keupayaan untuk menambah baris baharu dan mengedit baris sedia ada berfungsi dengan baik. 🎜🎜Ringkasan🎜🎜Dalam artikel ini, kami mempelajari cara membuat jadual boleh diedit menggunakan Vue.js. Kami mempelajari cara menggunakan komponen Vue untuk menyusun jadual, cara mendayakan keboleheditan dan cara memproses input dan menyimpannya ke pengumpulan data kami. Kami telah menyediakan contoh kod lengkap untuk kemudahan anda menggunakan dan menguji. Dengan menggunakan teknik yang diterokai dalam artikel ini, anda boleh dengan cepat dan mudah membuat borang yang berfungsi sepenuhnya dan sangat boleh disesuaikan untuk meningkatkan pengalaman pengguna aplikasi web anda. 🎜

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