Vue3 设置 style 属性类型检查失败问题及解决方案
警告信息
在开发过程中,控制台可能抛出如下警告:
[Vue warn]: Invalid prop: type check failed for prop "style". Expected Object, got String with value "height:calc(100vh - 252px) !important;".
该错误表明赋值和接收参数值类型不匹配。Vue 3 期望 :style 绑定的是一个对象(Object),但实际传递的是字符串(String)。

问题原因
当前的写法 :style="newTableHeight()" 返回的是一个字符串,例如:
"height: calc(100vh - 252px) !important;"
而 Vue 3 要求样式绑定应该是一个对象,例如:
{ height: 'calc(100vh - 252px)' }
解决方案
1. 修改方法返回值
将 newTableHeight 方法改为返回样式对象而不是字符串:
methods: {
newTableHeight() {
return {
height: 'calc(100vh - 252px) !important'
}
}
}
或者在模板中直接使用对象语法:
<div :style="{ height: 'calc(100vh - 252px)', important: true }"></div>



