今天在调前端界面适应主流分辨率的时候，遇到了一个很大的坑，前天就开始解决，一直也没成功，忙完别的工作后今天下午又开始排查问题。先来看下面一个渲染值的代码，如图所示： 看着没问题，值也取到了，如图： 但是其实应该如下图这个在mounted钩子函数中打了debugger的样子： mounted代码如下：
mounted() { // this.$nextTick(function () { // this.setWinNum(1); // 默认设置四分屏 // }) if (document.body.offsetHeight > 950 && document.body.offsetHeight < 1000){ $('.treeCard .el-card__body').height(810); $('.treeCard .el-tree').height(780); $('.empInfoCard').height(587); } else if (document.body.offsetHeight > 750 && document.body.offsetHeight < 800){ $('.treeCard .el-card__body').height(630); $('.treeCard .el-tree').height(600); $('.empInfoCard').height(450); this.treeSpan = 5; this.empInfoBodyStyle = 30 } else if (document.body.offsetHeight > 650){ $('.treeCard .el-card__body').height(500); $('.treeCard .el-tree').height(470); $('.empInfoCard').height(375); $('.image').width(50) $('.image').height(50) this.empInfoBodyStyle = 0 this.treeSpan = 6; } this.loadRegions(); this.setWinNum(1); debugger; getUserInfo().then(res => { this.empInfo = res; // this.empInfo.postName = this.empInfo.positionList[0].name }) /** * 关闭播放 **/ const self = this; window.closePlayer = function(containerId) { const domId = containerId + '-container'; for (let i = 0; i < self.playingList.length; i++) { if (self.playingList[i].playId === domId) { const player = self.playingList[i].player; player.stop(); player.unload(); self.playingList.splice(i, 1); $('#' + domId).remove(); $('#' + containerId).prev().find('span').text(''); $('#' + containerId).prev().find('label').hide(); break; } } }; }放开断点后，我不知道为什么会重新刷新整个vue组件，变成了最开始那个截图，左侧树高度没有撑满容器，而且中间播放视频的窗口也没有了。
最后一段代码一段代码的屏蔽，找到了是这行代码的问题： 而empInfo信息也很简单： 按道理说没问题，最后采用如下方式解决：获取empInfo的时候添加岗位属性，然后渲染，如图： 修改之后成功解决，如图所示：
