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

今天在用 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
	}
}
相关推荐
im_AMBER29 分钟前
Web 开发 27
前端·javascript·笔记·后端·学习·web
玩代码1 小时前
vue项目安装chromedriver超时解决办法
前端·javascript·vue.js
计算机毕业设计木哥2 小时前
计算机毕业设计选题推荐:基于SpringBoot和Vue的快递物流仓库管理系统【源码+文档+调试】
java·vue.js·spring boot·后端·课程设计
苏打水com2 小时前
JavaScript 面试题标准答案模板(对应前文核心考点)
javascript·面试
Wx-bishekaifayuan2 小时前
基于微信小程序的社区图书共享平台设计与实现 计算机毕业设计源码44991
javascript·vue.js·windows·mysql·pycharm·tomcat·php
DoraBigHead3 小时前
React 架构重生记:从递归地狱到时间切片
前端·javascript·react.js
苦夏木禾4 小时前
css实现表格中最后一列固定
前端·javascript·css
晚枫~4 小时前
零基础快速上手Playwright自动化测试
javascript·python·测试工具·c#·自动化
~无忧花开~4 小时前
JavaScript学习笔记(二十八):JavaScript性能优化全攻略
开发语言·前端·javascript·笔记·学习·性能优化·js