1. 程式人生 > >Vue表格複用,報錯"TypeError: _self.$scopedSlots.default is not a function"

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>