element el-table的TypeError: Cannot read property 'reduce' of null错误

element el-table的TypeError: Cannot read property 'reduce' of null错误EGT无知

页面中使用了 el-table，每次加载页面的时候就报 TypeError: Cannot read property 'reduce' of nullEGT无知

相关代码：

htmlEGT无知

1 2 3 4 5 6 7 8 9 10 11 12

<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
EGT无知

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

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，所以就产生了这个错误。EGT无知

1 2 3 4 5 6 7 8 9

<script>     export default {       data() {         return {           tableData: null         }       }     }   </script>

解决方法：

将其改为 list: [], 就可以了。EGT无知

1 2 3 4 5 6 7 8 9

<script>     export default {       data() {         return {           tableData: []         }       }     }   </script>

 EGT无知

本文由 微wx笑 创作，采用 署名-非商业性使用-相同方式共享 4.0 许可协议，转载请附上原文出处链接及本声明。
原文链接：https://www.ivu4e.cn/blog/front/2021-01-11/600.html

很赞哦！ (21) 赏 有话说 (0)