VUE 表格删除问题

Question

<template>
<div class="bar">

  <el-button type="danger" v-on:click="delLastOne">删除</el-button>
  <el-button type="primary" v-on:click="add">添加一条</el-button>

   <el-table :data="tableData3"  @current-change="handleCurrentChange">
   <el-table-column type="selection" width="55"></el-table-column>
   <el-table-column  label="条件"  prop="date"></el-table-column>
   <el-table-column prop="name" label="字段"></el-table-column>
   <el-table-column prop="address" label="属性"></el-table-column>
  <el-table-column prop="deletePerson" label="操作" ></el-table-column>
</el-table>

<div class="bnt01">
<el-button type="default" v-on:click="print">查询</el-button>
 </div>
<el-table>搜索结果</el-table>

</div>

</template>

<script>
export default {

data() {
  return {
  tableData3: [{
             date: '2',
             name: '3',
          address: '4',
     deletePerson:'5'
}]
  }
},

methods: {
  handleCurrentChange(val) {
    this.currentRow = val;
    console.log(val.date,val.name,val.address);
  },
  add(){
    var _data ={
      date: ['空','真','与','假'],
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄',
      deletePerson:'删除'
    }
    this.tableData3.push(_data);
  },

  print(){
    console.log(this.tableData3)
  },
  methods:{
      delLastOne:function(){
       this.tableData3 = this.tableData3.slice(1);
      }
   },
 }

}
</script>

<style>
.bar{

width: 100%;
margin: 10px 0px 0px 0px;

}
.bar button{

margin-bottom: 8px;
float: right;

}
.bar button:first-child{

  margin-left: 4px;

}
.el-table td{

  border: 0px solid #fff;}

.bnt01{

  width: 50px;
  margin-left: auto;
  margin-right: auto;
  margin-top:8px;}

</style>

delLastOne这是删除的命令，但不起效，请帮手看一下，多谢

Answer 1