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屬性。