vue3 + ts，element-plus中el-table，使用自定义指令自适应表格高度

自先沉稳UP

已于 2024-04-01 15:19:38 修改

阅读量658

点赞数 6

文章标签： vue.js javascript element-plus

于 2024-01-26 15:26:31 首次发布

本文链接：https://blog.csdn.net/Just_Maybe/article/details/135867242

版权

怎么注册自定义指令就不说了，这个会有一个500s的动画效果。

使用的时候直接v-custom="{bottomOffset: 65}"就行了，bottomOffset是距离底部的距离，如果有分页组件或者别的内容，需要预留一下距离。

感兴趣小伙伴可以试一下。

import { DirectiveBinding } from "vue";
import { debounce } from "lodash-es";

interface HTMLElementCustom extends HTMLElement {
  resizeListener?:  () => void;
}


const doResize = debounce(async (el: HTMLElement, binding: DirectiveBinding) => {
  // 获取调用传递过来的数据
  const { value: { bottomOffset = 0 } = {} } = binding;
  const height = window.innerHeight - el.getBoundingClientRect().top - bottomOffset;
  el.style.transition = 'height 0.5s';
  el.style.height = `${height}px`;
}, 500)

export default {
  // 初始化设置
  beforeMount(el: HTMLElementCustom, binding: DirectiveBinding) {
    el.resizeListener = async () => {
      await doResize(el, binding);
    }
    el.resizeListener();
    window.addEventListener('resize', el.resizeListener);
  },
  // 销毁时设置
  beforeUnmount(el: HTMLElementCustom) {
    // 移除resize监听
    window.removeEventListener('resize', el.resizeListener as (this: Window, ev: UIEvent) => any);
  }
};