el-table用key解决表格数据显示不正确

el-table用key解决表格数据显示不正确

问题：三个页面差不多，只有表格的个别字段不一致。就把三个页面写在一起，用v-if判断，最后效果差强人意。切换页面的时候，列表里的数据会发生错乱。

找了好久，也没在element官网上看到什么介绍。这时候旁边大哥，说，你在table上加个key试试。于是乎成功渲染了，数据没有出现问题了。

  <el-table
      v-if="type == 1"
           :key="table"
           ref="table"
           v-loading="tableLoading"
           :data="tableData"
           @selection-change="onSelectionChange"
       >

在每次切换页面的时候，置换key就可以了。

原来key是vue中的属性，具体请看→https://cn.vuejs.org/v2/api/#key
在此只引用一段：

key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。
有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。

一些关于key的讨论→https://github.com/PanJiaChen/vue-element-admin/issues/656