场景:单页面做可切换的多报表展示
如图:每个报表战术展示不同的数据项,需要随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>