vue+element-ui中的el-table-column配合v-if 数据位置错乱问题

我们在做vue 开发中，经常会使用到 element-ui, el-table是我们使用场景特别高的组件
有时候我们在不同标签下，使用不同的el-table,会出现数据列错乱的问题。

<div class="list-item">

      <div class="tabs">
        <div class="tab-title">
          <a class="tab-item" :class="{'tab-active':currentType==0}" @click="handleClick(0)">普通用户</a>
          <a class="tab-item" :class="{'tab-active':currentType==1}" @click="handleClick(1)">会员用户</a>
        </div>
      </div>

      <div v-if="currentType===0">
        <el-table :data="tabs[0].dataList.rows" border :tooltip-effect="toolTipEffect" key="0">

          <el-table-column :width="indexWidth" align="center"  label="序号" type="index" :index="indexMethod"></el-table-column>
          

          <el-table-column prop="name" label="名字" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="name" label="电话" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="name" label="邮箱" show-overflow-tooltip>
          </el-table-column>
          
        </el-table>

        <el-pagination v-if="tabs[0].dataList.total" @size-change="onSizeChange" @current-change="onCurrentChange"
          :current-page="currentPage" :page-size="rows" layout="total, sizes, prev, pager, next"
          :total="tabs[0].dataList.total">
        </el-pagination>
      </div>

      <div v-if="currentType===1">
        
        <el-table
          :data="tabs[1].dataList.rows" border  :tooltip-effect="toolTipEffect" key="1">
          <el-table-column :width="indexWidth" align="center"  label="序号" type="index" :index="indexMethod"></el-table-column>
          <el-table-column prop="name" label="名字" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="brithday" label="生日" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="name" label="邮箱" show-overflow-tooltip>
          </el-table-column>

        </el-table>

        <el-pagination v-if="tabs[1].dataList.total" @size-change="onSizeChange" @current-change="onCurrentChange"
          :current-page="currentPage" :page-size="rows" layout="total, sizes, prev, pager, next"
          :total="tabs[1].dataList.total">
        </el-pagination>
      </div>

    </div>

我们在请求普通用户列表数据时，如果全部都有数据，在请求会员用户列表里没数据的时候，有一列没有数据的话，普通用户列列的数据就会在会员数据列表里面出现，这个是以前没有注意的地方，找了很久都没有找到原因，后来才在网上找到资料，给el-table,设置一个key属性，这个问题就完美解决。
因为这个是因为el-table做了一些优化，可以复用列(这个在android开发中的ListView 复用item的原理是一样的)，不加key,就成了bug.
ps-- 在以后开发中，又并列相同的组件，也一定要记得给组件设置key属性。