Bagaimana untuk memadam rekod semasa dalam jadual dalam Vue.js

Vue.js ialah rangka kerja progresif untuk membina antara muka pengguna Ia adalah projek sumber terbuka yang diasaskan oleh Evan You. Teras Vue.js ialah corak MVVM, yang melaksanakan pengemaskinian automatik pandangan melalui pemacu data. Dalam aplikasi Vue.js, kita selalunya perlu menambah, memadam, mengubah suai dan pertanyaan data, yang melibatkan operasi pada jadual Bagaimana untuk memadam rekod semasa dalam jadual dalam Vue.js?

Pertama sekali, kami perlu menjelaskan dengan jelas bahawa Vue.js ialah rangka kerja dipacu data Jika kami ingin memadamkan rekod dalam jadual, kami perlu mengekalkan senarai data melalui Vue.js terlebih dahulu , dan kemudian gunakan v dalam halaman Arahan -for menjadikan setiap rekod menjadi satu baris. Apabila kami memadamkan baris data, ia sama dengan mengalih keluar data daripada senarai data, dan kemudian paparan dikemas kini secara automatik. Oleh itu, kita perlu menguasai dua operasi berikut: 1. Bagaimana untuk mengekalkan senarai data 2. Bagaimana untuk memadam data daripada senarai data.

1. Mengekalkan senarai data

Kami boleh menentukan tatasusunan dalam pilihan data contoh Vue.js untuk mengekalkan senarai data. Contohnya:

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. Padam data

Dalam Vue.js, kita boleh memadamkan satu atau lebih elemen daripada tatasusunan melalui kaedah splice(). Sintaks kaedah splice() ialah:

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

di mana:

• mula: kedudukan permulaan untuk dipadamkan (mengira dari 0)
• deleteCount: bilangan elemen yang akan dipadam, jika 0, tiada unsur akan dipadamkan
• item1 , item2, ...: Elemen untuk ditambahkan pada tatasusunan Jika tiada elemen dinyatakan, splice() hanya memadamkan elemen dan tidak menambah elemen

Untuk keperluan kami, kami hanya. perlu lulus semasa Indeks rekod dan kaedah splice() digunakan untuk memadam data yang sepadan. Contohnya:

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

di mana indeks ialah indeks rekod semasa.

Apabila kami mengklik butang padam pada halaman, kami boleh memanggil kaedah deleteRecord() untuk memadam data yang sepadan. Sebagai contoh, kita boleh menulis ini dalam templat:

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

Di sini, kami menjadikan setiap rekod menjadi satu baris melalui arahan v-for dan menambah butang padam pada setiap baris. Apabila butang padam diklik, kami memadamkan rekod data yang sepadan dengan memanggil kaedah deleteRecord().

Ringkasan

Dalam Vue.js, pemadaman rekod semasa dalam jadual memerlukan penguasaan dua operasi: 1. Mengekalkan senarai data 2. Memadam data daripada senarai data. Kami boleh mengekalkan senarai data dengan mentakrifkan tatasusunan dalam contoh Vue.js dan memadamkan data daripada senarai data melalui kaedah splice(). Apabila kami mengklik butang padam pada halaman, kami boleh memadamkan rekod data yang sepadan dengan memanggil kaedah ini.

Atas ialah kandungan terperinci Bagaimana untuk memadam rekod semasa dalam jadual dalam Vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!