Vue.js中表格行数少于15时如何动态调整表格高度？

你已经实现了行数超过15时固定50vh高度的逻辑，现在需要解决行数少于15时动态获取真实行高来计算表格高度的问题，替代手动硬编码的rowHeight值。

核心实现思路 #

通过Vue的$refs获取表格行的真实DOM节点，读取其offsetHeight属性得到实际行高，再结合行数、表头高度计算表格总高度。

具体代码修改 #

1. 给表格组件添加ref标识 #

<v-card ref="tableContainer" :items="tableItems" :items-per-page="15" :style="getTableHeight()"/>

2. 改造getTableHeight方法 #

getTableHeight() {
  const tableItemsCount = this.tableItems.length;
  const maxVisibleRows = 15;
  const maxHeight = `50vh`;

  if (tableItemsCount <= maxVisibleRows) {
    // 等待DOM渲染完成后获取元素
    this.$nextTick(() => {
      // 根据实际UI库的DOM结构调整选择器，以下是Vuetify默认类名示例
      const rowElement = this.$refs.tableContainer?.querySelector('.v-data-table__row');
      const headerElement = this.$refs.tableContainer?.querySelector('.v-data-table-header');
      
      // 获取真实行高和表头高度，兜底值防止获取失败
      const rowHeight = rowElement?.offsetHeight || 70;
      const headerHeight = headerElement?.offsetHeight || 50;
      
      // 计算总高度：表头高度 + 行数*行高
      const totalHeight = `${headerHeight + tableItemsCount * rowHeight}px`;
      return {'--height': totalHeight};
    });
  } else {
    return {'--height': maxHeight};
  }
}

3. 关键注意事项 #

• DOM选择器适配：如果使用非Vuetify的UI库或自定义表格，需要将.v-data-table__row、.v-data-table-header替换为对应表格行、表头的类名或标签选择器。
• 渲染时机处理：用$nextTick确保数据更新后DOM已完成渲染，避免获取不到元素的情况。
• 兜底值设置：保留手动设定的70px、50px作为兜底，防止DOM元素获取失败导致表格高度异常。

可选优化：监听行高变化 #

如果表格行高会因内容变化、窗口 resize 改变，可以添加监听事件重新计算高度：

mounted() {
  window.addEventListener('resize', this.refreshTableHeight);
},
beforeUnmount() {
  window.removeEventListener('resize', this.refreshTableHeight);
},
methods: {
  refreshTableHeight() {
    this.$forceUpdate(); // 强制触发高度重新计算
  },
  // 原getTableHeight方法...
}

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