element el-table的TypeError: Cannot read property 'reduce' of null错误
微wx笑
2021-01-11【前端开发】
4
0关键字：
element el-table reduce property
element el-table的TypeError: Cannot read property 'reduce' of null错误页面中使用了 el-table，每次加载页面的时候就报 TypeError: Cannot read property 'r
element el-table的TypeError: Cannot read property 'reduce' of null错误
页面中使用了 el-table，每次加载页面的时候就报 TypeError: Cannot read property 'reduce' of null
相关代码：
html
<el-table :data="list" style="width: 100%;margin-top:30px;" row-key="id" :indent="16" lazy border :load="loadChild" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<el-table-column align="center" label="ID" width="80">
<template slot-scope="scope">
{{ scope.row.id }}
<!-- <template v-if="scope.row.parentId === 0">
<el-button icon="el-icon-caret-right" size="mini" circle @click="handleExpend(scope.row, $event)" />
</template>
<template v-else>
<el-button icon="el-icon-caret-bottom" size="mini" circle @click="handleExpend(scope.row, $event)" />
</template> -->
</template>
</el-table-column>js
export default {
// components: { Pagination },
data() {
return {
cate: Object.assign({}, defaultCate),
routes: [],
dialogVisible: false,
dialogType: 'new',
checkStrictly: false,
defaultProps: {
children: 'children',
label: 'title'
},
tableKey: 0,
list: null,
total: 0,
listLoading: true,
listQuery: {
page: 1,
size: 10,
limit: 10
},
importanceOptions: [1, 2, 3],
sortOptions: [{ label: 'ID Ascending', key: '+id' }, { label: 'ID Descending', key: '-id' }],
statusOptions: ['published', 'draft', 'deleted'],
showReviewer: false
}
},错误原因：
可以看到，我在 el-talbe 中指定的 :data="list" ，在 js 中给的初始值是 null，所以就产生了这个错误。
<script>
export default {
data() {
return {
tableData: null
}
}
}
</script>解决方法：
将其改为 list: [], 就可以了。
<script>
export default {
data() {
return {
tableData: []
}
}
}
</script>
本文由 微wx笑 创作，采用 署名-非商业性使用-相同方式共享 4.0 许可协议，转载请附上原文出处链接及本声明。
原文链接：https://www.ivu4e.cn/blog/front/2021-01-11/600.html
