Vueドキュメントでの編集可能なテーブルの実装方法

Vue.js は現在最も人気のあるフロントエンド フレームワークの 1 つで、データ駆動型のアプローチを使用してユーザー インターフェイスを構築し、双方向のデータ バインディングとコンポーネント化の特徴を備えています。 Vue.jsのドキュメントには編集可能なテーブルを実装するメソッドが記載されており、この記事ではその具体的な実装手順を紹介します。

1. データの準備

まず、生徒情報を例として一連のデータを準備します。データ形式は配列にすることができ、各要素には名前、性別、年齢などの属性が含まれます。

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

2. テーブルの定義

次に、テーブル コンポーネントを定義する必要があります。これはデータの表示に使用され、クリックしてデータを変更するための編集モードに入ることができます。 。ここでは Vue.js のテンプレート構文を使用してテーブルを定義し、v-for 命令を使用してリスト データをループして各生徒の情報を表示し、v-if 命令を使用して条件を制御します。編集モードに入ります。コードは次のとおりです:

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

上記のコードでは、student.editable 属性を使用して、データの現在の行が編集モードかどうかを判断します。false の場合はセルの内容が表示され、そうでない場合はセルの内容が表示されます。入力または選択ラベルが表示され、ユーザーがデータを変更できるようになります。同時に、編集モードを切り替えるために、コードの最後にクリック イベントがバインドされます。

上記のコードで使用されている toggleEdit メソッドを定義するには、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>

上記のコードでは、toggleEdit メソッドを使用して、指定されたインデックス位置にある要素の編集可能状態を切り替えます。同時に data オプションに editable 属性を追加します。初期値は false です。

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

上記のコードの作成が完了したら、シンプルで編集可能なフォームを実装できます。ユーザーは、「編集」ボタンをクリックして編集モードに入り、データを変更し、再度「保存」ボタンをクリックして変更を完了し、編集モードを終了します。

実際に使用する場合は、データ検証、送信などの機能を追加する必要がある場合があります。しかし、上記の方法や Vue.js のその他の機能を使用することで、これらの機能を迅速に実装し、開発効率を向上させることができます。

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