vue.runtime.esm.js:1888 TypeError: Cannot read property ‘forEach‘ of undefined at VueComponent.＜

最新推荐文章于 2024-08-16 11:34:58 发布

tonysh_zds

最新推荐文章于 2024-08-16 11:34:58 发布

阅读量7k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/tonysh_zds/article/details/107999199

版权

vue 专栏收录该内容

91 篇文章 1 订阅

订阅专栏

出错原因：
调用 $table.toggleRowExpansion 函数报错。

vue.runtime.esm.js:1888 TypeError: Cannot read property 'forEach' of undefined
    at VueComponent.<anonymous> (crud.js:957)
    at invokeWithErrorHandling (vue.runtime.esm.js:1854)
    at VueComponent.Vue.$emit (vue.runtime.esm.js:3882)
    at VueComponent.toggleRowExpansion (element-ui.common.js:10306)
    at VueComponent.toggleRowExpansionAdapter (element-ui.common.js:11066)
    at VueComponent.toggleRowExpansion (element-ui.common.js:13627)
    ```
解决方案：
去掉$table.toggleRowExpansion，在el-table增加绑定:expand-row-keys="expandRowKeys" :row-key="getRowKey"
采用expandRowKeys属性数据进行控制。

<el-table ref=“table” v-loading=“crud.loading” :data=“crud.data” size=“small” style=“width: 100%;” :row-key=“getRowKey” :expand-row-keys=“expandRowKeys” @sort-change=“crud.changeTableSort” @selection-change=“crud.selectionChangeHandler”>

data(){
return {
expandRowKeys: [],
…
}
methods: {
// 展开时需要
getRowKey(row){
return row.id;
},

// 查看专题项详情
toogleExpand(row) {
let $t a b l e = t h i s .$ refs.table;
this.topicDetail = []
this.expandRowKeys = []
this.crud.data.map((item) => {
if (row.id != item.id) {
// $table.toggleRowExpansion(item, false)
item.hasExpand = false
}else {
if (!item.hasExpand) {
this.expandRowKeys.push(item.id)
item.hasExpand = true
}
}
})
// 显示该条目明细
getDetailList(row.id).then(res => {
this.topicDetail = res.content
})
// $table.toggleRowExpansion(row,true)
},
…