Vue でテーブルを編集およびキャンセルするにはどうすればよいですか?

Vue でテーブルを編集およびキャンセルするにはどうすればよいですか?

Vue の開発ではテーブルの編集や変更の処理が必要になることが多いため、テーブルの編集やキャンセルは特に重要です。ここでは、Vueでテーブルを編集・解除する方法を紹介します。

1. テーブル データのバインド

テーブルでは、まずデータをテーブルにレンダリングする必要があるため、データをバインドする必要があります。 Vue では、v-for ディレクティブを使用してデータのトラバーサルとレンダリングを実現できます。

たとえば、data にサンプル データを次のように定義します。

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

その中に、3 つのオブジェクトを格納する tableData 配列が定義されており、各オブジェクトはテーブル データ内の行を表します。 editIndex は現在編集中のテーブル行を表し、初期値は -1 で未編集の状態を示します。

テーブルでは、次のコードを使用してデータをレンダリングできます:

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

上記のコードでは、v-for 命令を使用して tableData 配列内のデータをループし、次のコードを使用します。 :key 属性を使用して、各要素の一意の識別子を指定します。また、表の各行には「編集」ボタンがあり、このボタンをクリックすると現在の行が編集状態になります。

2. テーブルの編集状態の切り替え

Vue では、editIndex 変数を定義することで、現在編集中の行のインデックスを記録できます。ユーザーが「編集」ボタンをクリックすると、ボタンが配置されている行のインデックスが editIndex の値に設定され、表の行のデータが編集可能な状態で表示されます。ユーザーが「保存」または「キャンセル」ボタンをクリックすると、editIndex の値が -1 にリセットされ、現在編集中の行がないことが示されます。

コードでは、次のコードを使用して編集状態を切り替えることができます:

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

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

上記のコードでは、editRow メソッドを使用してテーブル行の編集状態を設定し、 saveRow メソッドはテーブルの編集結果を保存するために使用され、cancelRow メソッドはテーブルの編集操作をキャンセルするために使用されます。

3. テーブルの行の編集

テーブルでは、編集状態に入るときに、テーブルの行のデータが編集可能な状態で表示される必要があります。 Vue では、input や select などのフォーム要素を使用してこの効果を実現できます。

たとえば、テーブル行にデータの名前と年齢の列を表示する場合、次のコードを使用できます。

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

上記のコードでは、input 要素を使用して、データの名前と年齢の列。編集可能なステータス。テーブルの編集状態を3つのボタンで切り替え、「保存」ボタンで編集結果の保存、バックグラウンドサーバーへのデータ保存、ローカル状態でのデータ更新を行います。

概要

上記の手順により、Vue でテーブルを編集したりキャンセルしたりできます。実際の開発では、表のセルにカスタマイズした編集機能を実装したり、表データにチェックサムプロンプトを追加したりするなど、必要に応じて編集機能をカスタマイズできます。

以上がVue でテーブルを編集およびキャンセルするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。