el-table加上v-if顺序混乱问题解决

element ui使用过程中有很多坑，先看效果图：

 代码是这样写的：

<div v-if="num === 1">....</div>
<div v-if="num === 2">....</div>
<div v-if="num === 3">....</div>
<div  v-if="num === 4">....</div>
<div v-if="num === 5">....</div>

 百度了很多都是给el-table-column 加key，但还是不行，不能从根本解决数据错乱问题

 换上v-show就把所以的数据都渲染出来了，不是我们想要的解决方法。

后面把div换成template就可以了，原因是template是vue的语法。能有效兼容v-if,

template是模板占位符，可帮助我们包裹元素，而且循环过程当中，template不会被渲染到页面。

上代码：

<template v-if="num === 1">....</template>
<template v-if="num === 2">....</template>
<template v-if="num === 3">....</template>
<template v-if="num === 4">....</template>
<template v-if="num === 5">....</template>

成功效果图：能成功根据判断条件渲染正确的数据