Vue で編集可能なテーブルを実装する方法

多くの Web アプリケーションでは、テーブルは不可欠なコンポーネントです。通常、テーブルには大量のデータが含まれるため、ユーザー エクスペリエンスを向上させるためにテーブルにはいくつかの特定の機能が必要です。重要な機能の 1 つは編集可能性です。この記事では、Vue.js を使用して編集可能なテーブルを実装する方法を検討し、具体的なコード例を示します。

ステップ 1: データを準備する

まず、テーブルのデータを準備する必要があります。 JSON オブジェクトを使用してテーブルのデータを保存し、それを Vue インスタンスの data プロパティに保存できます。この例では、名前、数量、価格の 3 つの列を持つ単純なテーブルを作成します。使用するサンプル データは次のとおりです。

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

ステップ 2: テーブル コンポーネントを作成する

Vue.js コンポーネントを使用してテーブルを作成します。コンポーネントを使用する利点の 1 つは、コンポーネントを Vue アプリケーション内で何度も再利用して使用できることです。作成するテーブル コンポーネントの基本構造は次のとおりです。

<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>

コンポーネントの名前は「TableComponent」で、props 属性を使用して以前のデータ コレクションをプロパティとして受け取ります。 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## が実行されます。 #メソッドと呼ばれます。このメソッドは、空の文字列、0、および 0 の初期値を持つ新しい項目オブジェクトを items 配列に追加します。

ステップ 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 メソッドを使用すると、編集ボタンがクリックされたときに行の状態を切り替えることができます。行が現在編集されていない場合、関数は行の編集可能な値を true に設定し、セルにテキスト ボックスを追加して編集可能な状態を有効にします。この状態で別のセルをクリックすると、toggleCellEdit メソッドを使用してセルの状態を切り替えます。

このメソッドは、元のテキストをテキスト ボックスを含む HTML 要素に置き換え、テキスト ボックスにフォーカスします。入力が完了すると、セル編集完了メソッド

cellEditDone が呼び出され、データ コレクションに値が更新され、編集状態が閉じられます。

ステップ 5: アプリを実行する

アプリケーションを実行して編集可能なフォームをテストする準備が整いました。編集可能なテーブル コンポーネントのレンダリングとテストに使用される基本的な Vue.js コンテキストは次のとおりです。

<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>

item プロパティを使用してテーブル コンポーネントを初期化するときに、これをテーブル コンポーネントに渡します。これにより、コンポーネント インスタンスがデータ オブジェクトにアクセスし、それをテーブルにレンダリングできるようになります。新しい行を追加したり、既存の行を編集したりする機能は問題なく機能します。

概要

この記事では、Vue.js を使用して編集可能なテーブルを作成する方法を学びました。 Vue コンポーネントを使用してテーブルを整理する方法、編集可能にする方法、入力を処理してデータ コレクションに保存する方法を学びました。使いやすく、テストしやすいように、完全なコード例を提供しました。この記事で説明する手法を使用すると、完全に機能し、高度にカスタマイズ可能なフォームを迅速かつ簡単に作成して、Web アプリケーションのユーザー エクスペリエンスを向上させることができます。

以上がVue で編集可能なテーブルを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。