本文实例为大家分享了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> <div id="app"> <div 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> </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("请问您是否确定删除当前行")) { this.list.splice(index, 1); } }, } }); </script>
二.运行效果
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持华域联盟。
您可能感兴趣的文章:
- Antd-vue Table组件添加Click事件,实现点击某行数据教程
- vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
- VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
本文由 华域联盟 原创撰写:华域联盟 » vue-table实现添加和删除
转载请保留出处和原文链接:https://www.cnhackhy.com/64150.htm