場景：單頁面做可切換的多報表展示

如圖：每個報表戰術展示不同的資料項，需要隨select的切換，複用對應的table

這樣寫會報錯，並且切換後的table選項沒有達到預期效果

<el-main style="padding:10px;overflow-y:hidden">
    <el-table v-if="checkValue=='getcustomergoods'" :data="dataList" border :header-cell-style="rowClass" height="530">
        ...
    </el-
 
table>
    <el-table v-if="checkValue=='getcustomerpay'" :data="dataList" border :header-cell-style="rowClass" height="530">
        ...
    </el-table>
    <el-table v-if="checkValue=='getcustomerup'" :data="dataList" border :header-cell-style="rowClass" height="530" :row-class-name=
 
"tableRowClassName">
        ...
    </el-table>
</el-main>

檢視文件發現vue會複用隱藏的table

官方提示用key屬性管理複用元素

<el-main style="padding:10px;overflow-y:hidden">
    <el-table v-if="checkValue=='getcustomergoods'" key="getcustomergoods" :data="dataList" border :header-cell-style="rowClass"
 
 height="530">
        ...
    </el-table>
    <el-table v-if="checkValue=='getcustomerpay'" key="getcustomerpay" :data="dataList" border :header-cell-style="rowClass" height="530">
        ...
    </el-table>
    <el-table v-if="checkValue=='getcustomerup'" key="getcustomerup" :data="dataList" border :header-cell-style="rowClass" height="530" :row-class-name="tableRowClassName">
        ...
    </el-table>
</el-main>