element-ui 表格 修改后, 表格里面的数据不实时更新问题

element-ui 表格 修改后 表格里面的数据后 页面不实时更新问题 完美解
想要达到的效果：点击"更多"后，"更多"隐藏，删除和补仓显示；（有时间可全部看完，没时间直接看做法6/7）
尝试用的方法：自己用 this.show、在百度上找的方法 set 都没能成功
提示：最下面有代码demo
页面初始化：

目标效果

做法1：
给"更多"绑定一个 v-show=‘show’ 把 this.show 设置为true ，点击"更多"按钮后 在点击事件里面把this.show 设置为false；

结果1：
未成功，点击一个"更多"，其他所有的"更多"都隐藏起来了

原因1：
循环的时候show给了表格所有的行，所以点击一个"更多"导致所有的"更多"都隐藏了；

做法2：
给"更多"绑定一个v-show=’(scope.$index+1{)}^{\prime }，理想状态是：索引最低是0，+1后，至少也为1,所以显示，给删除和补仓设置为v-show{=}^{\prime }!(scope.$index+1)’ 取反就是隐藏了；

结果2：
未成功，报错

做法3：
当取到表格的data数据后，循环给数据一个flag =true ，在赋值给表格，点击"更多"后把当前的行索引拿到 ，把当前行的 this.tables[index].flag = false设置为false；

结果3
未成功，点击第一个 “更多"可以 隐藏"更多”，显示 删除、补仓， 出现问题：在点击其他行的"更多"就不能正常显示和隐藏，还是有问题

做法4：
百度到的结果：用set方法，当取到表格的data数据后，循环给数据一个flag =true ，在赋值给表格，点击"更多"后把当前的行索引拿到 ，把当前行的 this.tables[index].flag = false设置为false； 并 设置：this.$set(this.tables);

结果4
未成功，结果是点击第一个"更多"可以改变，点击其他的"更多"还是改变不了；

做法5：
把当前行的 this.tables[index].flag = false设置为false；然后在把 表格的数据 用 JSON this.tables = JSON.parse(JSON.stringify(this.tables)); 值重新克隆一遍 再赋值给表格就OK了

结果5：
成功(有缺陷)， 如果只有 new Date的话 转化就会有问题

做法5的缺陷：
如果有 new Date的话，转化就会有问题 (会把new Date转化成 字符串)

做法6：
使用 JSON.parse(JSON.stringify(this.tables)) 也可行，但是怎么能止步于此呢，赋值给tables表格，那么我还能这样 this.tables = this.tables.filter(item => item); ，把每一项重新 复赋值给 this.tales ；

结果
成功， 所有的表格项可以正常隐藏 和显示

做法6 完美解决了缺陷

做法7： Object.assign
直接使用es6的 Object.assign复制一个新的对象 this.tables = Object.assign([],this.tables) 少去了过滤循环的麻烦 简单明了

结果
成功， 所有的表格项可以正常隐藏 和显示

以下demo代码可复制到新的vue文件里面直接查看，点击查看效果

    <hr />
    <el-button @click="showTable">显示表格</el-button>
    <el-table :data.sync="tables" style="width: 100%">
        <el-table-column prop="date" label="日期" width="180"></el-table-column>
        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
        <el-table-column label="操作" align="center">
            <template slot-scope="scope">
          <el-button type="info" size="small">编辑</el-button>
          <el-button
            type="primary"
            size="small"
            v-show="scope.row.flag"
            @click="more(scope.$index,scope.row)"
          >更多</el-button>
          <div v-show="!scope.row.flag">
            <el-button type="danger" size="small">删除</el-button>
            <el-button type="success" size="small">补仓</el-button>
          </div>