您的位置:首页 > 编程学习 > > 正文

vuetable表格合并(vue-table实现添加和删除)

更多 时间:2022-03-30 00:06:31 类别:编程学习 浏览量:2659

vuetable表格合并

vue-table实现添加和删除

本文实例为大家分享了vue-table实现添加和删除的具体代码,供大家参考,具体内容如下

一.代码

  • <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>vue-table示例</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>
    <li id="app">
        <li class="table_box">
            <h1>表格练习</h1>
            <input type="text" v-model="text"/>
            <button @click="add">添加</button>
            <table class="table" border="1">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>品牌</th>
                    <th>时间</th>
                    <th>操作</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)">删除</a>
                    </th>
                </tr>
                </tbody>
            </table>
        </li>
    
    </li>
    </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("请问您是否确定删除当前行")) {
                        this.list.splice(index, 1);
                    }
    
                },
    
            }
        });
    </script>
    
  • 二.运行效果

    vuetable表格合并(vue-table实现添加和删除)

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。

    您可能感兴趣