Vue2中Bootstrap Vue表格自适应屏幕高度的计算方法

一、测量表格上下侧需预留的空间 #

根据页面元素是否固定高度，分两种方式测量：

1. 静态测量（元素高度固定时） #

打开浏览器开发者工具（F12），在Elements标签页中操作：

• 选中<page-header>元素，查看它的offsetHeight（包含padding、border的总高度），记为headerHeight。
• 选中表格上方的所有元素（比如<b-row>区域、<b-card>的内边距），计算总高度：比如<b-card>默认上下内边距为1.25rem（约20px），<b-row>高度为50px，这部分记为topSpace。
• 确定表格下方需要预留的最小空间（比如<b-card>底部内边距、页面底部留白），记为bottomSpace。
• 总预留高度 = headerHeight + topSpace + bottomSpace，比如计算结果为220px。

2. 动态计算（响应式场景，元素高度随屏幕变化） #

如果页面存在响应式元素（比如<b-row>换行导致高度变化），静态值会失效，用JS实时计算：
在Vue组件中添加如下代码：

data() {
  return {
    tableHeight: '600px' // 初始默认高度
  }
},
methods: {
  calculateTableHeight() {
    // 获取页面头部高度
    const header = document.querySelector('page-header')
    const headerHeight = header ? header.offsetHeight : 0
    // 获取表格上方内容区域高度（根据实际DOM结构调整选择器）
    const topContent = document.querySelector('.card .row')
    const topContentHeight = topContent ? topContent.offsetHeight : 0
    // 获取b-card的上下内边距总和
    const card = document.querySelector('.card')
    const cardPadding = card ? parseInt(getComputedStyle(card).paddingTop) + parseInt(getComputedStyle(card).paddingBottom) : 0
    // 底部预留空间（可根据需求调整）
    const bottomSpace = 20
    // 计算总预留高度
    const totalReserve = headerHeight + topContentHeight + cardPadding + bottomSpace
    this.tableHeight = `calc(100vh - ${totalReserve}px)`
  }
},
mounted() {
  this.calculateTableHeight()
  // 监听窗口 resize 事件，实时更新高度
  window.addEventListener('resize', this.calculateTableHeight)
},
beforeDestroy() {
  // 组件销毁前移除监听，避免内存泄漏
  window.removeEventListener('resize', this.calculateTableHeight)
}

二、应用自适应高度到表格 #

将sticky-header属性改为动态绑定：

<div class="table-responsive">
  <b-table-simple 
    class="text-left border-left multiple-headers" 
    small 
    :sticky-header="tableHeight" 
    bordered 
    no-border-collapse
  >
    <!-- 表格内容 -->
  </b-table-simple>
</div>

如果用静态测量的结果，直接写死calc表达式即可：

<b-table-simple 
  sticky-header="calc(100vh - 220px)"
  <!-- 其他属性 -->
>

注意事项 #

• 确保页面body默认margin已重置（body { margin: 0; }），否则100vh会出现垂直滚动条。
• 动态计算时，选择器要精准匹配你的DOM结构，避免获取错误元素。

内容的提问来源于stack exchange，提问作者monny