Vue表格复用，报错"TypeError: _self.$scopedSlots.default is not a function"

场景：单页面做可切换的多报表展示

如图：每个报表战术展示不同的数据项，需要随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>