Vue3 el-table 动态高度（element-plus）

最新推荐文章于 2025-03-10 17:06:57 发布

Li_Ning21

最新推荐文章于 2025-03-10 17:06:57 发布

阅读量1.3k

点赞数 6

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Li_Ning21/article/details/138246884

版权

本文对比了Vue2中使用Element-UI动态设置表格高度的方法，并展示了如何在Vue3中使用ref和debounce优化高度计算，以确保在页面加载和窗口调整时保持响应式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先回顾一下vue2+element-ui的策略

export default (config) => {
  const {
    subtractHeight = 250,
  } = config;
  return {
    data() {
      return {
        subtractHeight,
        // 列表高度
        tableHeight: `${document.body.clientHeight - this.subtractHeight}px`,
      };
    },
    created() {
      window.addEventListener('resize', this.getHeight);
      // 监听事件注销，防止内存溢出
      this.$once('hook:beforeDestory', () => {
        window.removeEventListener('resize', this.getHeight);
      });
    },
    mounted() {
      this.getHeight();
    },
    watch: {
      subtractHeight: {
        handler() {
          this.getHeight();
        },
      },
    },
    methods: {
      /**
       * @todo 获取列表高度
       */
      getHeight() {
        this.tableHeight = `${document.body.clientHeight - this.subtractHeight}px`;
      },
    },
  };
};

vue3 就翻译一下吧

// tableHeight.js
import { ref, onBeforeUnmount, nextTick } from "vue";
import _ from "lodash";


export default function (opts) {
  const {
    subtractHeight = 500,
  } = opts;

  const tableHeight= ref(500)
  
  // 计算高度
  const getHeight = _.debounce(function() {
    const height = document.body.clientHeight - subtractHeight
    tableHeight.value = height > 200 ? height : 200;
  }, 500)
  
  // 监听窗口变化，触发高度计算
  window.addEventListener('resize', getHeight);
  onBeforeUnmount(() => {
    window.removeEventListener('resize', getHeight);
  })

  // 初始化高度
  nextTick(()=>{
    getHeight()
  })
  return {
    tableHeight
  };
}

页面中使用

<template>
  <el-table :data="tableData" style="width: 100%" :max-height="tableHeight">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</template>

<script setup>
import mixTableHeight from './tableHeight.js'
const { tableHeight } = mixTableHeight({ subtractHeight: 380 })
</script>