el-table 动态修改高度，封装mixins

最新推荐文章于 2024-08-28 15:47:47 发布

原创最新推荐文章于 2024-08-28 15:47:47 发布 · 586 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript

本文介绍了一个Vue mixin，用于动态监听页面resize事件，调整表格高度以适应视口变化。通过配置subtractHeight参数，可以在组件创建和销毁时适配窗口大小，确保table的流畅滚动。同时，展示了如何在组件中使用这个mixin，并提供了根据需求动态更改subtractHeight的方法。此解决方案在实际应用中可能存在优化空间，欢迎进一步讨论。

mixins如下，通过监听页面的resize事件，当页面视窗大小变化的时候，
动态将当前视窗高度减去固定的高度值，使得table能够动态滑动。

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`;
      },
    },
  };
};

vue组件中使用方式为

<a-table
      id="aTable"
      v-loading="tableLoad"
      :height="tableHeight"
      :columns="columns"
      :row-class-name="tableRowClassName"
      :data="list"
      @cell-dblclick="dblclick"
      @row-contextmenu="rightClick"
    >
.....

import Heightmixin from '@/mixins/tableHeight-mixin';

const initalSubsubtractHeight = 570;
const heights = new Heightmixin({
  subtractHeight: initalSubsubtractHeight,
});
export default {
  	mixins: [heights],
	// 涉及到搜索列表的展开和折叠，可能需要动态更改subtractHeight,此时可以进行方法传递。
	// 通过watch来进行table动态的更改。
	showFormFun() {
	  this.showForm = !this.showForm;
	  this.subtractHeight = this.showForm ? initalSubsubtractHeight : 232;
	},
}