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

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

WBOY

リリース： 2023-06-20 18:43:42

オリジナル

1770 人が閲覧しました

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

データの準備

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

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

ログイン後にコピー

テーブルの定義

次に、テーブルコンポーネントを定義する必要があります。これはデータの表示に使用され、クリックしてデータを変更するための編集モードに入ることができます。。ここでは 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 }
      ]
   };
}

ログイン後にコピー