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-table实现添加和删除 的全部内容, 来源链接: utcz.com/p/239199.html

回到顶部