element框架一个页面多个table渲染互相影响解决方法

场景一： tab切换，每个切换下面是一个表格，一个页面多个表格

场景二： 页面点击按钮（多个按钮），打开Dialog 对话框，每个按钮对应一个表格展示，一个页面多个表格

问题：
tab切换或者打开不同的对话框，表格中展示数据会出现错乱，互相影响
出现此问题的原因：
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 将不会清除用户已经输入的内容。因为两个模板使用了相同的元素， 不会被替换掉——仅仅是替换了它的 placeholder

解决方法：
为table添加唯一的 key值 ，使每个表格完全独立，不进行复用

<el-tabs v-model="tabType" @tab-click="tabHandleClick">
    <!-- tab1 -->
	<el-tab-pane label="tab1" :name="1">
	   <el-table key="tab01" v-loading="unloadingLoading" :data="uploadDataList" size="small" @selection-change="handleSelectionChange" width="95">
	   </el-table>
	</el-tab-pane>
	<!-- tab1 end -->
	<!-- tab2 -->
	<el-tab-pane label="tab2" :name="2">
	   <el-table key="tab02" v-loading="unloadingLoading" :data="uploadDataList" size="small" @selection-change="handleSelectionChange" width="95">
	   </el-table>
	</el-tab-pane>
	<!-- tab2 end -->
	<!-- tab3 -->
	<el-tab-pane label="tab3" :name="3">
	   <el-table key="tab03" v-loading="unloadingLoading" :data="uploadDataList" size="small" @selection-change="handleSelectionChange" width="95">
	   </el-table>
	</el-tab-pane>
	<!-- tab3 end -->
</el-tabs>