Vue表格複用,報錯"TypeError: _self.$scopedSlots.default is not a function"
阿新 • • 發佈:2018-11-15
場景:單頁面做可切換的多報表展示
如圖:每個報表戰術展示不同的資料項,需要隨select的切換,複用對應的table![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20181115115001914.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTg1NjA2Ng==,size_16,color_FFFFFF,t_70)
這樣寫會報錯,並且切換後的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>