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
	}
}
相关推荐
摸鱼的春哥26 分钟前
前端程序员最讨厌的10件事
前端·javascript·后端
牧羊狼的狼4 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手6 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
luckys.one6 小时前
第9篇:Freqtrade量化交易之config.json 基础入门与初始化
javascript·数据库·python·mysql·算法·json·区块链
魔云连洲6 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell6 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
weixin_437830948 小时前
使用冰狐智能辅助实现图形列表自动点击:OCR与HID技术详解
开发语言·javascript·ocr
前端工作日常9 小时前
我学习到的Vue2.6的prop修饰符
vue.js
gnip9 小时前
JavaScript事件流
前端·javascript
小菜全9 小时前
基于若依框架Vue+TS导出PDF文件的方法
javascript·vue.js·前端框架·json