Vue進階(幺貳陸):Vue表格複用,TypeError: _self.$scopedSlots.default is not a function解決方法

前言

在使用 element ui 的el-table 組件時,表頭應用v-if判斷來動態顯示,正常來說這樣的操作是沒有問題的,但是如果在這基礎上使用 <template slot-scope="scope"> 操作的話,表頭一旦切換就會報錯,錯誤信息如下:

_self.$scopedSlots.default is not a function

解決方法

在v-for或者v-if切換標籤時,多個相同的標籤被渲染,如果不添加key來區分則會出現複用的情況。而原本這些標籤每一個都是獨立的,故需要添加key來做區分!

給包含 <template slot-scope="scope"><el-table-column>標籤列加上屬性 key 屬性。如無唯一標識,可應用:key=Math.random().

原理解析

官方提示用key屬性管理複用元素
在這裏插入圖片描述
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章