el-table高度自动撑满全屏

1，新建table.js

import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event'

// 设置表格高度
const doResize = (el, binding) => {
  // 获取调用传递过来的数据
  const { value } = binding
  // 获取距底部距离（用于展示页码等信息，51为页码盒子高度）
  const customHeight = (value && value.customHeight) || 51
  // 计算列表高度
  const height = window.innerHeight - el.getBoundingClientRect().top - customHeight
  // 设置高度
  el.style.height = height + "px"
  el.style.minHeight = height + "px"
  el.style.maxHeight = height + "px"
}

export default {
  // 初始化设置
  bind(el, binding) {
    // 设置resize监听方法
    el.resizeListener = () => {
      doResize(el, binding)
    }
    // 绑定监听方法到addResizeListener
    addResizeListener(window.document.body, el.resizeListener)
  },
  // 所在组件的 VNode 更新时设置
  // 页面上搜索表单是可以展开收起的，当展开更多表单搜索时，表格高度没变（展开收起需要将表格数据重新赋值，内容变化则会重新计算高度）
  update(el, binding) {
    doResize(el, binding)
  },
  // 销毁时设置
  unbind(el) {
    // 移除resize监听
    removeResizeListener(window.document.body, el.resizeListener)
  }
}

2,directive-》index.js引入

import table from './table'
export default { table }

3,使用方法

<template>
  <div v-tableHeight="{customHeight: 51}">
    <table height="100%" />
  </div>
</template>