vue-table实现添加和删除
更新时间：2021年05月17日 11:55:31 作者：々橙若℃ №
这篇文章主要为大家详细介绍了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>
<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>
二.运行效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
最近工作上经常操作数组数据,并且要求实时更新视图数据,这个时候首先想到的是 vue.set(),下面这篇文章主要给大家介绍了关于vue中this.$set()的基本用法实例,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了Vue实现数值型输入框并限制长度，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
vue3.0 移动端二次封装van-uploader实现上传图片(vant组件库)
这篇文章主要介绍了vue3.0 移动端二次封装van-uploader上传图片组件,此功能最多上传6张图片，并可以实现本地预览，实现代码简单易懂，需要的朋友可以参考下2022-05-05
这篇文章主要介绍了vxe-table vue table 表格组件功能，功能非常强大，文中给大家提到了功能点,需要的朋友可以参考下2019-05-05
这篇文章主要介绍了Vue项目如何关闭语法检查问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
Vue 先初始化父组件再初始化子组件的方法(自定义父子组件mounted执行顺序)
这篇文章主要介绍了Vue 先初始化父组件再初始化子组件的方法（自定义父子组件mounted执行顺序）,本篇内容内容主要讲述了,在使用 Konva 进行开发过程中遇到的一些问题,需要的朋友可以参考下2024-07-07
这篇文章主要介绍了Vue按回车键进行搜索的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
vue 是一个 渐进式的javascript框架，脚手架是一个通用概念，帮助搭建项目的工具，本文以vue2为例结合实例代码给大家详细讲解，感兴趣的朋友跟随小编一起看看吧2022-12-12
Vue.js每天必学之方法与事件处理器，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
这篇文章主要介绍了vue自定义组件search-box，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-05-05
最新评论