Vue.jsのテーブル内の現在のレコードを削除する方法

Vue.js は、ユーザー インターフェイスを構築するための進歩的なフレームワークで、Evan You によって設立されたオープンソース プロジェクトです。 Vue.js の中核は MVVM パターンで、データ ドライブを介したビューの自動更新を実装します。 Vue.js アプリケーションでは、テーブルに対する操作を伴うデータの追加、削除、変更、クエリが必要になることがよくありますが、Vue.js でテーブル内の現在のレコードを削除するにはどうすればよいですか?

まず第一に、Vue.js がデータ駆動型フレームワークであることを明確にする必要があります。テーブル内のレコードを削除したい場合は、まず Vue.js を通じてデータ リストを維持する必要があります。 、ページ内で v を使用します。 -for ディレクティブは、各レコードを 1 行にレンダリングします。データ行を削除すると、データ リストからデータを削除するのと同じになり、ビューが自動的に更新されます。したがって、1. データリストを維持する方法、2. データリストからデータを削除する方法の 2 つの操作をマスターする必要があります。

1. データ リストの維持

Vue.js インスタンスの data オプションで配列を定義して、データ リストを維持できます。例:

data() {
    return {
        dataList: [
            {id: 1, name: '小明', age: 20},
            {id: 2, name: '小红', age: 22},
            {id: 3, name: '小刚', age: 18},
            {id: 4, name: '小李', age: 25},
            {id: 5, name: '小张', age: 23},
        ]
    }
}

2. データの削除

Vue.js では、splice() メソッドを通じて配列から 1 つ以上の要素を削除できます。 splice() メソッドの構文は次のとおりです:

arr.splice(start[, deleteCount[, item1[, item2[, ...]]]])

ここで:

• start: 削除する開始位置 (0 から数えます)
• deleteCount: 削除する要素の数、0 の場合は要素は削除されません
• item1 , item2, ...: 配列に追加される要素。要素が指定されていない場合、 splice() は要素を削除するだけで、要素は追加しません。

必要に応じて、現在のレコードのインデックスを渡すだけで済みます。対応するデータを削除するには、splice() メソッドが使用されます。例:

deleteRecord(index) {
    this.dataList.splice(index, 1);
}

ここで、index は現在のレコードのインデックスです。

ページ上の削除ボタンをクリックすると、deleteRecord() メソッドを呼び出して、対応するデータを削除できます。たとえば、テンプレートに次のように記述できます:

<template>
    <div>
        <table>
            <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in dataList" :key="item.id">
                    <td>{{ item.id }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.age }}</td>
                    <td>
                        <button @click="deleteRecord(index)">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

ここでは、v-for ディレクティブを通じて各レコードを行にレンダリングし、各行に削除ボタンを追加します。削除ボタンをクリックすると、deleteRecord() メソッドを呼び出して、対応するデータ レコードを削除します。

概要

Vue.js でテーブル内の現在のレコードを削除するには、1. データ リストの維持、2. データ リストからのデータの削除という 2 つの操作を習得する必要があります。 Vue.js インスタンスで配列を定義することでデータ リストを維持し、splice() メソッドを通じてデータ リストからデータを削除できます。ページ上の削除ボタンをクリックすると、このメソッドを呼び出すことで、対応するデータ レコードを削除できます。

以上がVue.jsのテーブル内の現在のレコードを削除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。