Vue表格複用,報錯"TypeError: _self.$scopedSlots.default is not a function"
阿新 • • 發佈:2018-11-15
場景:單頁面做可切換的多報表展示
如圖:每個報表戰術展示不同的資料項,需要隨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>