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

在同一个页面切换展示多个table，然而table在切换的时候会出现内容消失和无故出现的现象。vue会尽可能的高效地渲染元素，通常复用已有元素而不是从头开始渲染。这么做除了使vue变得非常快之外，还有其它一些好处。例如，允许用户在不同的登录方式之间切换。

<template v-if="loginType === 'username'"><label>Usernamelabel><input placeholder="Enter your username">
template>
<template v-else><label>Emaillabel><input placeholder="Enter your email address">
template>

代码中切换loginType将不会清除用户已经输入的内容。因为两个模板使用了相同的元素， 不会被替换掉，仅仅是替换了它的 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>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！