element表格高度自适应

配合adaptive使用来达到高度自适应
1、首先在directive文件夹下创建el-table文件夹再在此文件夹下创建 adaptive.js文件和index.js文件

1. adaptive.js是该方法文件

// 设置表格高度
const doResize = async(el, binding, vnode) => {
  // 获取表格Dom对象
  const {
    componentInstance: $table
  } = await vnode
  // 获取调用传递过来的数据
  const {
    value
  } = binding

  if (!$table.height) {
    throw new Error(`el-$table must set the height. Such as height='100px'`)
  }
  // 获取距底部距离（用于展示页码等信息）
  const bottomOffset = (value && value.bottomOffset) || 30

  if (!$table) return

  // 计算列表高度并设置
  const height = window.innerHeight - el.getBoundingClientRect().top - bottomOffset
  $table.layout.setHeight(height)
  $table.doLayout()
}

export default {
  // 初始化设置
  bind(el, binding, vnode) {
    // 设置resize监听方法
    el.resizeListener = async() => {
      await doResize(el, binding, vnode)
    }
    // 绑定监听方法到addResizeListener
    // addResizeListener(window.document.body, el.resizeListener)
    window.addEventListener('resize', el.resizeListener)
  },
  update(el, binding, vnode) {
    doResize(el, binding, vnode)
  },
  // 绑定默认高度
  async inserted(el, binding, vnode) {
    await doResize(el, binding, vnode)
  },
  // 销毁时设置
  unbind(el) {
    // 移除resize监听
    // removeResizeListener(el, el.resizeListener)
    window.removeEventListener('resize', el.resizeListener)
  }
}

2. index.js是全局注册adaptive的文件

import adaptive from './adaptive'

const install = function(Vue) {
  // 绑定v-adaptive指令
  Vue.directive('adaptive', adaptive)
}

if (window.Vue) {
  window['adaptive'] = adaptive
  // eslint-disable-next-line no-undef
  Vue.use(install)
}

adaptive.install = install

export default adaptive

2、在需要使用的地方引入

import adaptive from '@/directive/el-table';

3、并在directives下注册

  directives: { adaptive },

4、在el-table标签中使用（bottomOffset是表格下方预留的空间，比如下放还需要一个翻页，没有就是0）

v-adaptive="{ bottomOffset: 85 }"

 5、注意初始化必须给默认高度，不然无效

tableHeight: '100px',

贴出全部代码，

<template>
  <div>
    <!-- 表格数据 -->
    <el-table
      ref="registerListData"
      v-loading="loading"
      v-adaptive="{ bottomOffset: 85 }"  //此处关键代码
      highlight-current-row
      :data="tableData"
      :height="tableHeight"  //此处关键代码
      border
      fit
      stripe
      min-height="300px"
      max-height="330px"
      :header-cell-style="{
        background: '#e6e6e6',
        color: '#606266',
        textAlign: 'center',
      }"
      :show-overflow-tooltip="true"
      :size="size"
      style="width: 100%"
      @sort-change="sortChange"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @row-click="rowClick"
    >
      <slot />
    </el-table>
    <el-pagination
      v-if="paging"
      :current-page.sync="params.page"
      :page-size="params.limit"
      :page-sizes="[10, 15, 20, 30, 50]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableCount"
      @size-change="limitChange"
      @current-change="pageChange"
    />
  </div>
</template>
<script>
import adaptive from '@/directive/el-table'   //此处引入

export default {
  name: 'CommonTable',
  directives: { adaptive },   //此处注册
  props: {
    // 参数  默认返回分页和条数
    params: {
      type: [Object, String, Number],
      default: function() {
        return { page: 1, limit: 15 }
      }
    },
    // 尺寸
    size: {
      type: String,
      default: 'small'
    },
    // 分页
    paging: {
      type: Boolean,
      default: false
    },
    tableData: {
      type: Array,
      default: function() {
        return []
      }
    }
  },

  data() {
    return {
      tableCount: 0, // 总条数
      tableDate: [], // 表格数据
      loading: false, // loading动画
      tableHeight: '100px'  //       此处关键代码
    }
  },
  computed: {

  },
  created() {

  },
  methods: {
    // 以下是对el-table原来的方法再次封装emit出去
    // 多选
    selectionChange(val) {
      this.$emit('selection-change', val)
    },
    // 单选
    currentChange(currentRow, oldCurrentRow) {
      this.$emit('current-change', currentRow, oldCurrentRow)
    },
    rowClick(row, event, column) {
      this.$emit('row-click', row, event, column)
    },
    // 排序
    sortChange(column, prop, order) {
      this.$emit('sort-change', column, prop, order)
    },
    // 表格翻页
    pageChange(page) {
      this.params.page = page
    },
    limitChange(limit) {
      this.params.limit = limit
    },
    clearSelection() {
      this.$refs.registerListData.clearSelection()
    }
  }
}
</script>