vue+elementUi条件渲染切换表格时单元格内容显示异常的问题及解决方法

Posted 2021-09-05 web半晨

在同一个页面切换展示多个table，然而table在切换的时候会出现内容消失和无故出现的现象。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>