一、目标效果

（1）初始表格数据

（2）点击添加数据按钮，表格显示数据，此处添加相同数据。

（3）点击添加数据按钮，表格显示数据，此处添加不同数据。

二、原理

知识点：set、map遍历、json.stringify和json.parse、数组合并、rest解构赋值

（1）判断两个基本类型是否一样，比较的是值。判断两个引用类型是否一样，比较的是引用。 （2）set无法将数组中的对象去重，set去重的原理是判断两者所处的内存单元位置是否一样，所处位置一样才能去重。基本类型数据都在栈，所以只要值相同就可以直接去重，引用类型存储在堆，引用类型值相同位置不同也无法去重。 (3) 只要将引用类型数据转变成基本数据类型那就可以用set去重了，本案例就是使用这个思路，通过JSON.stringify将对象转换成json字符串，JSON.parse将json字符串转换成JSON对象。

三、实操

（1）App.vue中template模板

<template>
  <div id="app">
    <el-button type="primary" @click="addData()">添加数据</el-button>
<el-table
    :data="tableData"
    border
    stripe>
    <el-table-column
      prop="date"
      label="日期">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
  </div>
</template>

（2）App.vue中script

export default {
  name: App,
  data(){
    return {
      //表格数据
      tableData: [{
          date: 2016-05-02,
          name: 王小虎,
          address: 上海市普陀区金沙江路 1518 路
        }],

      //模拟数据
      mockData:[{
          date: 2016-05-02,
          name: 王小虎,
          address: 上海市普陀区金沙江路 1519 路
        }]
    }
  },
  methods:{
    addData(){
        //将表格数据与模拟数据两个数组合并
        let newTable=this.tableData.concat(this.mockData)

        //表格数据去重
        this.tableData= [...new Set(newTable.map(item=>JSON.stringify(item)))].map(i=>JSON.parse(i))
    }
  }
}