关于Vue element-UI 的table 显示字段乱序的踩坑记

关于element-UI 的table 显示字段的踩坑记

之前有一个功能就是用户根据不同的选择查询，显示的列表字段不一样，但是再实现的时候发现element-UI table 显示只能通过 v-if来控制（v-show失效）这个再写的时候发现如果这样子弄的话会导致一个问题，就是显示的字段会乱序


以上乱序的例图

然后再上网搜资料的时候就发现因为vue diff算法的缘故，需要给 el-table-column 加key 标识

以下总结了一下：
key值的作用
主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes，相当于唯一标识ID。
Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染， 因此使用key值可以提高渲染效率，同理，改变某一元素的key值会使该元素重新被渲染。