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
	}
}
相关推荐
codingandsleeping44 分钟前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
白水清风2 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
用户22152044278002 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端2 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧2 小时前
Promise 的使用
前端·javascript
用户51681661458413 小时前
Vue Router 路由懒加载引发的生产页面白屏问题
vue.js·vue-router
前端康师傅3 小时前
JavaScript 作用域
前端·javascript
前端缘梦3 小时前
Vue Keep-Alive 组件详解:优化性能与保留组件状态的终极指南
前端·vue.js·面试
云枫晖3 小时前
JS核心知识-事件循环
前端·javascript
Simon_He3 小时前
这次来点狠的:用 Vue 3 把 AI 的“碎片 Markdown”渲染得又快又稳(Monaco 实时更新 + Mermaid 渐进绘图)
前端·vue.js·markdown