父组件props 更新的时候，子组件el-table 的新data被附加在了老data列后， 求帮忙！

Question

父组件通过axios获取数据，通过props传递给子组件apptable（表格组件）+apppage（翻页组件），
页面刚加载的时候没问题，显示的都对。
原来的设想是： 点击翻页或更换pagesize的时候就重新调用axios，api获取新数据显示。
现在碰到的问题是，当翻页组件：点击翻页，或者更换pagesize的时候，新生成的数据就会被附加到老数据列的后面，而不是覆盖老数据。如图

父组件主要放 了一个apptable表格，2个page翻页。
<template>
<div >

<div  style='margin:15px auto;'>
  <app-filter/>
</div>
<div    style='margin:15px auto;'>
  <app-page :total="total" :page-size='pageSize' :current-page='currentPage' @getPageSize="getPgSizeFromSon" @getCurrentPage="getCurPgFromSon"/>
 <!-- {{info}}-->
  <app-table ref='table'
             :tableRowAction="tableRowAction"
             :tableRowId="tableRowId"
             :multiPleSelection="multiPleSelection"
             :tableData="tableData"
             :tableLabel="tableLabel"
             @getMultiSelect="getMultiSelectFromSon"
              @tableRowAction="tableRowActionFromSon"  :v-if="showFlag"/>
  <app-page :total="total" :page-size='pageSize' :current-page='currentPage' @getPageSize="getPgSizeFromSon" @getCurrentPage="getCurPgFromSon"/>
  <el-backtop  :bottom="30" :right="5">
    <div
      style="{
    height: 100%;
    width: 100%;
    background-color: #f2f5f6;
    box-shadow: 0 0 6px rgba(0,0,0, .12);
    text-align: center;
    line-height: 15px;
    color: #1989fa;
  }"
    >
      顶部
    </div>
  </el-backtop>
</div>

</div>
</template>

子组件apppage，点翻页+每页大小
<template>
<!-- {{total}}-->
<el-pagination

  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="currentPage"
  :page-sizes="[300, 500,100, 1000,10,50]"
  :page-size="pageSize"
  layout="total, sizes, prev, pager, next, jumper"
  :total="total"
 >
</el-pagination>

</template>
<script>
export default {

data(){
  return{
    showFlag:true
  }
},
props: {
  total:Number, //php后台返回的就是string格式的数字
  pageSize:{
    type:Number,
    default:300
  },
  currentPage:{
    type:Number,
    default:1
  },
},
methods: {
  handleSizeChange(val) {
    console.log(`每页 ${val} 条`);

    this.$emit('getPageSize',val);
  },
  handleCurrentChange(val) {
    console.log(`当前页: ${val}`);
    this.showFlag = !this.showFlag
    this.showFlag = !this.showFlag
    this.$emit('getCurrentPage',val);
  }
}

}
</script>

子组件apptble，通过父组件props绑定数据
<template>
<el-table ref="table"

:data="tableData"
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column
  type="selection"
  width="55">
</el-table-column>
<el-table-column
  v-for="(item, index) in tableLabel"
  :key="index"
  :prop="item.prop"
  :width="item.width"
  :label="item.label">
</el-table-column>
<el-table-column label="操作">
  <template slot-scope="scope">
    <el-button
      type="text"
      size="mini"
      @click="handleTableRow(scope.$index, scope.row.id,'tableRowDetail')">详情</el-button>
    <el-button
      type="text"
      size="mini"
      @click="handleTableRow(scope.$index, scope.row.id,'tableRowMark')">备注</el-button>
    <el-button
      type="text"
      size="mini"
      @click="handleTableRow(scope.$index, scope.row.id,'tableRowPrint')">打印</el-button>
    <el-button
      type="text"
      size="mini"
      @click="handleTableRow(scope.$index, scope.row.id,'tableRowEdit')">编辑</el-button>
    <el-button
      type="text"
      size="mini"
      @click="handleTableRow(scope.$index, scope.row.id,'tableRowDelete')">删除</el-button>
  </template>
</el-table-column>

</el-table>
</template>

<script>
export default {

props: {
  tableData: { // 父组件传递过来的表格数据
    type:Array,
    default:[]
  },
  tableLabel: { // 父组件传递过来的表头数据
    type:Array,
    default:[]
  },
  multiPleSelection: {// 父组件传递过来的checkbox
    type:Array,
    default:[]
  },
  tableRowId:  {
    type:Number,
    default:null
  },
  tableRowAction:  {
    type:String,
    default:null
  }
},

/* beforeUpdate:{

},*/

/* watch:{

  tableData:{
    handler(val, oldVal){
      // 监听获取ajax数据
    /!*  console.log('监听获取ajax数据开始');
      console.log(this.$refs.table.data);
      console.log('监听获取ajax数据结束');*!/
    /!*  this.$refs.table.data=this.tableData;*!/
    },
    // 监听到数据变化时立即调用
    immediate: true

  }
},*/
/*watch:{
  a(val, oldVal){//普通的watch监听
    console.log("a: "+val, oldVal);
  },
  b:{//深度监听，可监听到对象、数组的变化
    handler(val, oldVal){
      console.log("b.c: "+val.c, oldVal.c);
    },
    deep:true //true 深度监听
  },*/
methods: {
/*  initData(){
    this.tableData=[];
    this.tableLabel=[];
    this.multiPleSelection=[];
    this.tableRowId=null;
    this.tableRowAction=null;
  },*/
  watchTableData(){

  },
  handleSelectionChange(val){
   /* 不能在子组件内部修改父组件的属性值*/
    /*this.multipleSelection=val.map(x => {return x.id})*/
    console.log('table组件handleSelectionChange');
    console.log(this.$refs.table.data);

    this.$emit('getMultiSelect',val);

  },

  handleTableRow(index, row,action) {
    console.log('table组件 handleTableRow');
    console.log(this.$refs.table.data);
    console.log(index, row);
    this.$emit('tableRowAction',index,row,action);
  }
},updated() {
 /* this.initData();*/
}

}
</script>

Answer 1

关键的tableLabel和tableData的处理没有给出，不知道你具体是如何处理的。

猜测你是使用push或concat不断追加的，那你需要换成=或其他方法重新赋值

Answer 2

在请求下(上)一页数据之前，先清空掉原来的数组。如：
this.tableData = []，然后再请求