el-table 表头错乱问题解决

开发项目时，使用 el-table 建立表格，由于数据是动态展示的，表头中使用了 v-if 进行判断，偶尔情况下发现会有表头错乱的问题。
解决方案：为每个 v-if 的 el-table-column 添加 key 进行绑定

<el-table-column 
	v-if="col.coupon_amount"
    prop="couponAmount"
    width="125"
    key="couponAmount"
 >
 	...
 </el-table-column >

v-for为什么使用key?

key的作用主要是为了高效的更新虚拟DOM，vue组件就地复用，增加key可以标识组件的唯一性，diff算法就可以正确的识别此节点，找到正确的位置插入新的节点，不设置key会在列表更新时，比如表格头有判断会错乱，vue在相同标签名元素的过渡切换时也用key，目的让vue区分它们，否则vue只替换内部属性不会触发过渡效果。