vue.js - 如何让naive-ui的n-data-table的maxHeight的值为屏幕总高度减去非<n-card><n-data-table /></n-card>的高度？

Question

如何让naive-ui的n-data-table的maxHeight的值为屏幕总高度减去非<n-card><n-data-table /></n-card>的高度

在线演示

不知道如何尝试，期望数据每页30条的时候，<n-card><n-data-table /></n-card>的maxHeight的值为屏幕总高度减去非<n-card><n-data-table /></n-card>的高度

Answer 1

要实现根据屏幕总高度和非 <n-card><n-data-table /></n-card> 部分的高度来动态设置 <n-card><n-data-table /></n-card> 的 maxHeight，可以通过 JavaScript 或 Vue 的响应式数据来实现。如下所示:

1. 获取屏幕的总高度

使用 window.innerHeight 来获取屏幕的总高度。

2. 获取非 <n-card><n-data-table /></n-card> 部分的高度

通过 Vue 的 ref 引用获取页面中非 <n-card><n-data-table /></n-card> 部分的高度。您可以分别获取其他卡片元素（b 和 c）的高度。

3. 计算 maxHeight

通过计算剩余高度来设置 maxHeight，确保 <n-data-table /> 在显示时填满剩余的可视区域。

4. 响应式更新

使用 Vue 的响应式系统，确保当页面尺寸或卡片高度变化时，maxHeight 会自动更新。

示例实现：

<template>
  <div style="padding: 16px">
    <!-- 上部卡片 -->
    <n-card style="margin-bottom: 12px" ref="b">
      <div style="height: 80px" class="title">Like Layout {{ bHeight }}</div>
    </n-card>

    <!-- 显示当前行高和最大高度 -->
    rowHeight: {{ rowHeight }} maxHeight: {{ maxHeight }}

    <!-- 数据表卡片 -->
    <n-card>
      <n-data-table
        ref="tableRef"
        :columns="columns"
        :data="data"
        :pagination="pagination"
        :maxHeight="maxHeight"
      />
    </n-card>

    <!-- 下部卡片 -->
    <n-card style="margin-top: 10px" ref="c">
      <div style="height: 30px" class="title">Like Layout Footer {{ cHeight }}</div>
    </n-card>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, watch } from 'vue';

// 定义数据
const columns = [];
const data = [];
const pagination = { pageSize: 30 };

// 行高和其他高度参数
const rowHeight = 40; // 每行的高度为40px
const bHeight = 80; // b卡片高度
const cHeight = 30; // c卡片高度

// 用来计算数据表格的最大高度
const maxHeight = ref(0);

// 获取引用
const b = ref(null);
const c = ref(null);

// 计算最大高度的函数
const calculateMaxHeight = () => {
  const screenHeight = window.innerHeight; // 获取屏幕总高度
  const bCardHeight = b.value ? b.value.$el.offsetHeight : 0; // 获取b卡片的高度
  const cCardHeight = c.value ? c.value.$el.offsetHeight : 0; // 获取c卡片的高度

  // 计算剩余高度并根据行高设置 maxHeight
  const remainingHeight = screenHeight - bCardHeight - cCardHeight - 60; // 减去padding等空白

  // 计算表格的最大高度
  const tableHeight = Math.floor(remainingHeight / rowHeight) * rowHeight;

  // 设置 maxHeight
  maxHeight.value = tableHeight;
};

// 在组件挂载时计算最大高度
onMounted(() => {
  calculateMaxHeight();
  window.addEventListener('resize', calculateMaxHeight); // 监听窗口大小变化
});

// 在组件卸载时移除事件监听
onBeforeUnmount(() => {
  window.removeEventListener('resize', calculateMaxHeight);
});

// 监视相关数据变化
watch([b, c], () => {
  calculateMaxHeight(); // 如果b或c变化，重新计算maxHeight
});
</script>

<style scoped>
.title {
  font-size: 16px;
  font-weight: bold;
}
</style>

解释：

1. calculateMaxHeight 方法：

   • 获取 window.innerHeight 作为屏幕总高度。
   • 使用 this.$refs 来获取 b 和 c 卡片的高度。通过 this.$refs.b.$el.offsetHeight 和 this.$refs.c.$el.offsetHeight 来获取实际的高度。
   • 计算剩余的高度并根据每行的高度 rowHeight 来确定 <n-data-table /> 的最大显示高度。

2. mounted 和 resize 事件监听：

   • 当组件挂载时，调用 calculateMaxHeight 来初始化 maxHeight。
   • 监听 resize 事件，在页面大小变化时重新计算 maxHeight。

3. maxHeight 的计算：

   • 减去 b 和 c 的高度以及一些额外的空白（如 padding 或边距）来获取 <n-data-table /> 的可用高度。
   • 使用每行的高度 rowHeight 来调整 maxHeight，确保每页显示的行数为 30。

通过这种方式，<n-card><n-data-table /></n-card> 的 maxHeight 会动态调整，并根据屏幕大小和其他元素的高度变化自动适配。