这次做项目的时候遇到需要再同一个页面切换展示多个table的需求，然而再完成之后遇到一个问题：表格之间切换的时候会出现内容消失和无故出现的现象，

感觉对vue掌握的还不好，这里记录一下。

先奉上解决办法：Vue+ElementUI项目中条件渲染切换表格时单元格内容显示异常的问题及解决方法

在面试的时候，面试官有没有问过v-if 与 v-show 的区别呢，是不是信誓旦旦的回答v-show只是切换显示与隐藏，DOM元素一直存在，而v-if是重新渲染元素，v-show具有更小的切换开销。

其实，这样的回答是没有问题的，可是v-if也不总是全部重新挂载渲染，看官网的说明：

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处。例如，如果你允许用户在不同的登录方式之间切换：

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address">
</template>

那么在上面的代码中切换 loginType 将不会清除用户已经输入的内容。因为两个模板使用了相同的元素，<input> 不会被替换掉——仅仅是替换了它的 placeholder。

这样也不总是符合实际需求，所以 Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key attribute 即可。

 那么这次的问题就是因为这个原因，Vue高效的背后也是因为对已有元素的复用，所以当进行表格之间的切换操作时，vue会复用已有元素，所以导致表格内容出现差异。

虽然知道是什么原因造成的，但是目前针对当前项目的业务也只有如下方式可以解决：

<!-- 之前方式 -->
<el-table-column prop="handlerResult" label="处理结果"></el-table-column>

<!-- 更改 -->
<el-table-column prop="handlerResult" label="处理结果">
	<template slot-scope="scope">
		<span>{{scope.row.handlerResult}}</span>
	</template>
</el-table-column>

那么，还有一种解决方式，更改 v-if 为 v-show ，如果你的项目适合的话。