前端开发您现在的位置是:首页 > 博客日志 > 前端开发

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

<a href='mailto:'>微wx笑</a>的头像微wx笑2021-01-11 12:30:50前端开发人已围观关键字: element  el-table  reduce  property  

element el-table的TypeError: Cannot read property &#39;reduce&#39; of null错误页面中使用了 el-table,每次加载页面的时候就报 TypeError: Cannot read property &#39;r

element el-table的TypeError: Cannot read property 'reduce' of null错误bLu编程技术_踩坑日志_进阶指南_无知人生

页面中使用了 el-table,每次加载页面的时候就报 TypeError: Cannot read property 'reduce' of nullbLu编程技术_踩坑日志_进阶指南_无知人生

相关代码:

htmlbLu编程技术_踩坑日志_进阶指南_无知人生

<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
bLu编程技术_踩坑日志_进阶指南_无知人生

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,所以就产生了这个错误。bLu编程技术_踩坑日志_进阶指南_无知人生

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

解决方法:

将其改为 list: [], 就可以了。bLu编程技术_踩坑日志_进阶指南_无知人生

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

 bLu编程技术_踩坑日志_进阶指南_无知人生

本文由 微wx笑 创作,采用 CC BY-NC 4.0 许可协议。 非商业性使用可自由转载、引用、甚至修改,但需署名作者且注明出处。

很赞哦! () 有话说 ()