前端动态计算高度

/**
 * @description: 动态计算表格高度
 * @return {*}
 */
onresize() {
  /* 表格最大高度=页面高度减去除表格外的高度-上下间距dialogMargin高度 */
  // 获取屏幕高度
  const { innerHeight } = window;
  // 获取类名或者id名为estimate-dialog的dom对象
  const dialog = document.querySelector('.estimate-dialog');
  const dialogWrapper = document.querySelector('.estimate-dialog-wrapper');
  const dialogStyles = window.getComputedStyle(dialogWrapper);
  // 防止该组件影响需求详情组件显示
  if (!dialogWrapper || dialogStyles.display === 'none') return;
  const header = dialog.querySelector('.el-dialog__header');
  const subTitle = dialog.querySelector('.sub_title');
  const padding = 30;
  const { showComment, appendBtn } = this.$refs;
  const headerHeight = header.clientHeight;
  const subTitleHeight = subTitle.clientHeight;
  const commentHeight = showComment.clientHeight;
  const btnHeight = appendBtn.clientHeight;
  const dialogMarin = 30;
  const height = XEUtils.sum([padding, headerHeight, subTitleHeight, commentHeight, btnHeight, dialogMarin]);
  this.tableMaxHeight = innerHeight - height;
},

mounted () {
//初始化表格
this.initializationTabColumn()
// 计算表格高度
window.onresize = (event) => {
this.onresize()
}
// 计算表格高度
this.onresize()
},