Vue + element中table来回切换页面显示差异问题

这次做项目遇到多个table切换页面显示差异的问题，当我切换到上个页面的时候，表格有一列是下个页面的内容，切换到下个页面的时候那一列的内容消失了，就很奇葩。

这个问题也是我都一次遇到，问了Baidu阿姨，上面的解决办法好像都不行，这个时候感觉这个bug好像解决不了，但是不解决也不行，先出去点根烟冷静一下~~~~~~~~

抽到一半的时候想起来element的table有template，用一下slot-scope="scope"把scope换成不一样的试一试，感觉这个办法也不错，不管对不对先尝试一下。

吸到最后一口的时候突然想起来，我当时用了v-if来切换的，换成v-show感觉会更好点。

我解释一下v-if和v-show的区别：

实现本质方法区别：
v-show本质就是标签display设置为none，控制隐藏
v-if是动态的向DOM树内添加或者删除DOM元素

编译的区别：
v-show其实就是在控制css
v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件

编译的条件：
v-show都会编译，初始值为false，只是将display设为none，但它也编译了
v-if初始值为false，就不会编译了

性能：
v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点

话不多说上代码：

<div class="my-office"
	style="height: 653px;width: 1135px;margin-left: 20px;box-shadow: 3px 3px 10px #4472a2;padding: 20px;border-radius: 10px;"
				v-show="displayBlock == '6'">
		<el-table-column align="center" prop="createDate" label="登记日期">
		</el-table-column>
	</el-table>
</div>
//原本是使用v-if的后来改变成v-show
<div class="my-office"
	style="height: 653px;width: 1135px;margin-left: 20px;box-shadow: 3px 3px 10px #4472a2;padding: 20px;border-radius: 10px;"
				v-show="displayBlock == '7'">
		<el-table-column align="center" prop="createDate" label="登记日期">
		</el-table-column>
	</el-table>
</div>

slot-scope="scope"方法也是可以的

<!-- 原本的方式 -->
<el-table-column prop="createDate" label="登记日期"></el-table-column>
 
<!-- 更改之后 -->
<el-table-column prop="createDatet" label="登记日期">
	<template slot-scope="scope">
		<span>{{scope.row.createDate}}</span>
	</template>
</el-table-column>

这里看你项目的需求在去考虑用什么方式（我是用v-show的）