el-table报错“Cannot read properties of undefined (reading ‘style‘)”解决

代码搬运媛2024-04-22 16:01

今天在用 el-table 的时候遇到这样一个报错，排查了好久才找到一点眉目。

Error in callback for immediate watcher "maxHeight": "TypeError:

Cannot read properties of undefined (reading 'style')

出现问题的原因

问题代码：

html 复制代码

<el-table
  :data="tableData"
   :height="height"
   style="width: 100%">
   <el-table-column
     prop="date"
     label="日期"
     width="180">
   </el-table-column>
   <el-table-column
     prop="name"
     label="姓名"
     width="180">
   </el-table-column>
   <el-table-column
     prop="address"
     label="地址">
   </el-table-column>
 </el-table>

js 复制代码

data(){
	return {
		height: ''
	}
}

出现问题的原因是我给 height 赋值为 ''，vue 的执行顺序是先拿到data里面的数据，再去执行created和mounted里面的函数，而我把height赋值为空了，所以报错了。即便在 mounted 中重新赋值，因为视图渲染已经完成，所以赋值无效依然报错。

解决问题

解决问题的思路就是不给 height 赋值为空，可以写成 height="auto"，或者直接在计算属性中赋值

computed: {
	height(){
		return document.documentElement.clientHeight - 450
	}
}