Vue.js 테이블의 현재 레코드를 삭제하는 방법

Vue.js는 사용자 인터페이스 구축을 위한 진보적인 프레임워크로 Evan You가 설립한 오픈 소스 프로젝트입니다. Vue.js의 핵심은 데이터 드라이브를 통해 뷰의 자동 업데이트를 구현하는 MVVM 패턴입니다. Vue.js 애플리케이션에서는 테이블 작업과 관련된 데이터를 추가, 삭제, 수정 및 쿼리해야 하는 경우가 많습니다. Vue.js 테이블의 현재 레코드를 삭제하는 방법은 무엇입니까?

먼저 Vue.js가 데이터 기반 프레임워크라는 점을 분명히 해야 합니다. 테이블의 레코드를 삭제하려면 먼저 Vue.js를 통해 데이터 목록을 유지 관리한 다음 각 레코드에 대한 페이지의 v-for 명령은 행으로 렌더링됩니다. 데이터 행을 삭제하는 것은 데이터 목록에서 데이터를 제거하는 것과 동일하며 보기가 자동으로 업데이트됩니다. 따라서 우리는 다음 두 가지 작업을 마스터해야 합니다. 1. 데이터 목록을 유지하는 방법 2. 데이터 목록에서 데이터를 삭제하는 방법.

1. 데이터 목록 관리

Vue.js 인스턴스의 데이터 옵션에 배열을 정의하여 데이터 목록을 관리할 수 있습니다. 예:

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() 메서드를 통해 배열에서 하나 이상의 요소를 삭제할 수 있습니다. 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. 데이터 목록에서 데이터 삭제. Vue.js 인스턴스에 배열을 정의하여 데이터 목록을 유지하고 splice() 메서드를 통해 데이터 목록에서 데이터를 삭제할 수 있습니다. 페이지에서 삭제 버튼을 클릭하면 이 메소드를 호출하여 해당 데이터 레코드를 삭제할 수 있습니다.

위 내용은 Vue.js 테이블의 현재 레코드를 삭제하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!