关于el-table不能及时更新数据的问题

闲来无事写一写父子组件之间通讯的demo，遇到了好多坑，真的是菜。好，现在就记录下来。

demo大概是上面的样子 点击新增个人信息 弹出子组件 

 然后输入表单信息添加到父组件内，并可以在父组件上点击编辑按钮 弹出子组件回显要编辑的表单信息。

遇到的最坑的地方就是el-table 不能及时回显数据（但是数据已经更新）。

1.父组件控制子组件的显示

<add-list
      :title="title"
      :dialogVisible.sync="isShowInfoBox"
      :echoInfo="echoInfo"
      @personTrans="personTrans"
    ></add-list>

如代码块绑定一个data isshowinfoBox 这个作为父组件控制子组件显示的变量 当然要通过：dialogVisible这个绑定值在子组件上

<el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="30%"
    :before-close="handleClose"
    :show-close="false"
  >

：dialogVisible 作为接收父组件的值 也就是需要在props 中定义，然后子组件通过

this.$emit("update:dialogVisible", false);

这个东西向父组件发消息 告诉父组件我要关闭掉自己了。现在就基本实现了 父亲可以打开儿子，儿子告诉父亲我要自闭。

2打来子组件 接下来就是录入表单信息 并传给父组件 就是

this.$emit("personTrans", newObj);

这里注意的是 不要直接把表单v-model 的值传过去 我是浅拷贝了一下

3在父组件回显（没什么好说的），点击编辑这个数据回显到子组件就是父亲向子组件发消息用props 怎么监听呢？

watch: {
    title() {
      //   
    },
    echoInfo() {
      this.infoModel = this.echoInfo.data;
      this.infoModel.index = this.echoInfo.index
    },
  },

是这个样子

4然后回显后就要编辑修改 ，修改后出现了这个el-tale 不能及时更新的问题 ，我一直是以为我代码写的有问题，所以不断的console不断的打断点

最终发现问题数据已经更新但是页面没有及时更新。

所以灵机一动是不是el-table没有做到及时更新 google一下果然是这个问题 在el-table上面加上：key 果然可以实现及时更新table 

 // 生成唯一编码
        if (this.title === "新增个人信息") {
          function createRandomId() {
            return (
              (Math.random() * 10000000).toString(16).substr(0, 4) +
              "_" +
              new Date().getTime() +
              "_" +
              Math.random()
                .toString()
                .substr(2, 5)
            );
          }
          this.infoModel.id = createRandomId();

因为key 的值是唯一的 我这里有我随机生成的id 直接搬过去用就可以了。