问题描述：控制台报错“TypeError: Cannot read properties of undefined (reading ‘xxx‘)“

例如：TypeError: Cannot read properties of undefined (reading $el)     at eval

原因分析及解决

情况一： 出现该错误的原因是因为你花括号中的某些属性未定义                。极大可能是因为你写错了属性名称

情况二：

异步请求获取数据时
  
  
  
  
  
  
  
 ，由于数据时异步获取的  
  
  
  
  
  
  
  ，所以一开始是没有该数据属性
 


 


 


 


 


 


 


 

，这种情况下也会报这种错误
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
。比如说我这里有一个数据tableData
 
 
 
 
 
 
 
，初始值为一个空对象














。我们在使用{{tableData.detail}}是不会报错的   
   
   
   
   
   
   
   ，但如果是{{tableData.detail.name}}这样就会报错了
 

 

 

 

 

 

 

 
，这是为什么呢？

因为

 

 

 

 

 

 

 

，tableData.detail已经是一个undefined了                ，你undefined.name就肯定会报错了 
  
  
  
  
  
  
  
 。

所以在初始化时
 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 ，detail属性赋值为空对象就行了
  
  
  
  
  
  
  
 。

情况三：

后端返回给你的数据没有这个属性 或者 返回的有的有数据有的是null

这个时候需要先查一下















，可以加v-if进行判断

情况四：

使用$nextTick,刷新表格的时候                       ，表格未自定义属性 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 ，或自定义属性引用错了(因为方法是现成复制过来的找了老半天























，坑！)

<template> // 起初没有定义ref="multipleTable" <el-table ref="multipleTable" :data="tableData" style="width: 100%" :header-cell-style="{ background: #f5f7fa }"> </el-table> </template> methods: { getData() { let params = { ...this.queryFrom } params.pageNo = params.pageNo.toString() params.pageSize = params.pageSize.toString() getSettlementOrder(params).then(res => { this.tableData = res.result.data || [] // 在数据更新后执行刷新表格 this.$nextTick(() => { // myTable是表格的ref属性值 if (this.$refs.multipleTable && this.$refs.multipleTable.doLayout) { this.$refs.multipleTable.doLayout(); } }) this.total = res.result.total || 0 this.tabHeight = window.innerHeight - this.$refs.multipleTable.$el.offsetTop - 170; }) },