vue-table implements adding and deleting

This article example shares the specific code for vue-table to add and delete for your reference. The specific content is as follows

1. Code

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>vue-table example</title>
    <style>
        .table_box {
            height: auto;
            width: 90%;
            margin: 5% auto;
        }

        .table {
            border-collapse: collapse;
            width: 100%;
            height: auto;
        }

        h1 {
            text-align: center;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="table_box">
        <h1>Table Exercises</h1>
        <input type="text" v-model="text"/>
        <button @click="add">Add</button>
        <table class="table" border="1">
            <thead>
            <tr>
                <th>Serial number</th>
                <th>Brand</th>
                <th>Time</th>
                <th>Operation</th>
            </tr>

            </thead>
            <tbody>
            <tr v-for="(v,k) in list" :key="k">
                <th>{{v.id}}</th>
                <th>{{v.name}}</th>
                <th>{{v.time}}</th>
                <th>
                    <a href="#" @click.prevent="del(k)">Delete</a>
                </th>
            </tr>
            </tbody>
        </table>
    </div>

</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>

    var vm = new Vue({
        el: '#app',
        data: {
            num: 1,
            list: [],
            text: '',

        },
        methods: {
            add: function () {
                this.list.unshift({
                    "id": this.num++,
                    "name": this.text,
                    "time": new Date().toLocaleString(),
                });
            },
            del: function (index) {
                if (confirm("Are you sure you want to delete the current row")) {
                    this.list.splice(index, 1);
                }

            },

        }
    });
</script>

2. Operation effect

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Antd-vue Table component adds Click event to click on a row of data tutorial
vuejs element table table add rows, modify, delete rows individually, delete rows in batches
The VUE table dynamically adds a column of data, and the newly added data cannot be edited (the data bound to v-model cannot be updated in real time)

<<: Detailed explanation of four solutions for MySQL active-active synchronous replication

>>: Detailed explanation of how to use awk in Linux