今天在用 el-table 的时候遇到这样一个报错,排查了好久才找到一点眉目。
Error in callback for immediate watcher “maxHeight”: "TypeError:
Cannot read properties of undefined (reading ‘style’)
出现问题的原因
问题代码:
<el-table:data="tableData":height="height"style="width: 100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table>
data(){return {height: ''}
}
出现问题的原因是我给 height 赋值 为 ‘’,vue 的执行顺序是先拿到data里面的数据,再去执行created和mounted里面的函数,而我把height赋值为空了,所以报错了。即便在 mounted 中重新赋值,因为视图渲染已经完成,所以赋值无效依然报错。
解决问题
解决问题的思路就是不给 height 赋值为空,可以写成 height="auto"
,或者直接在计算属性中赋值
computed: {height(){return document.documentElement.clientHeight - 450}
}