el-table 根据屏幕大小动态调整max-height 的值

最新推荐文章于 2025-04-25 12:47:57 发布

原创最新推荐文章于 2025-04-25 12:47:57 发布

· 742 阅读

1 ·

版权

文章标签：

#前端 #javascript #vue.js

<template>
  <div>
    <p>窗口高度：{{ windowHeight }} px</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
       // 下面的 -250  表示减去一些表单元素高度 这个值需要自己手动调整
      windowHeight: document.documentElement.clientHeight - 250, // 初始化窗口高度
    };
  },
  methods: {
    updateWindowHeight() {
      // 更新窗口高度
      this.windowHeight = document.documentElement.clientHeight;
      console.log("窗口高度变化为:", this.windowHeight);
    },
  },
  mounted() {
    // 组件挂载后添加事件监听器
    window.addEventListener("resize", this.updateWindowHeight);
  },
  beforeDestroy() {
    // 组件销毁前移除事件监听器
    window.removeEventListener("resize", this.updateWindowHeight);
  },
};
</script>

<style scoped>
/* 添加样式 */
</style>

如果你不考虑屏幕缩放的自动调整高度那就可以用下面的

      <el-table
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        :max-height="tableHeight"
        border
        stripe
        :header-cell-style="{
          background: '#f1f3f5',
          color: '#000000'
        }"
      >

      </el-table>


  computed: {
    tableHeight () {
    // 下面的 - 262  表示减去一些表单元素高度 这个值需要自己手动调整
      return document.documentElement.clientHeight - 262
    }
  },