ant中使用可编辑表格数据发生变化页面不渲染问题

ant中使用可编辑表格数据发生变化页面不渲染问题

小编这里写了个可编辑表格，复制了ant的表格可编辑组件，修改需求之后如下图：

后发现当我切换短信内容时，表格未更新。
解决思路：

1. 先确定一下有没有得到数据
2. 分析是问题所在（是可编辑表格还是不可编辑表格还是整个表格没有发生变化）
3. 修改问题
   然后我发现问题在可编辑的部分未更新数据，未更改代码如下：

  <template v-for="(item, index) in columns">
          <a-table-column :key="item.key" :data-index="item.key" :width="item.width">
            <span slot="title">
              <span> {{ item.title }}号</span>
            </span>
            <span slot-scope="text, r" v-if="!!r.details[index + 1]">
              <p>
                <span>
                  <span
                    v-if="
                    --
                    "
                    >{{ r.details[index + 1].goal | financialPercentile }}</span
                  >
                  <editable-cell
                    v-else
                    :text="r.details[index + 1].goal"
                    @change="onCellChange(r.details[index + 1], r, $event)"
                  />
                </span>
              </p>
            </span>
          </a-table-column>
        </template>

最先我实现方法是把编辑的内容移出来，不写组件直接放入表格中进行可编辑。
后来我发现我写了循环，但是没有用到key，怀疑是没有识别出两个节点的不一样，修改后添加了key值之后就好了，说明我们在写循环时还是尽量要使用key，不要去想着效果一样随便写与不写。

修改后的代码：

 <editable-cell
                    v-else
                    :key="r.details[index + 1].goal"
                    :text="r.details[index + 1].goal"
                    @change="onCellChange(r.details[index + 1], r, $event)"
                  />

key的作用是高效去渲染页面，去迭代更新我们虚拟的DOM。
比如说我要循环1,2,3,4,5
使用key当我们第一次循环的时候是12345，而第二次就是2345以此类推
不用的话每次都是12345这样子
就到这里啦下次再见~