Element动态计算table表格的高度，使其自适应页面不滚动

1：创建 tableHeight文件夹

2：文件夹下分别创建 tableHeight.js 和index.js

3: tableHeight.js

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

// 设置表格高度
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'`)
  // }
  // console.log($table, '$table$table$table$table')
  // 获取距底部距离（用于展示页码等信息）
  const bottomOffset = (value && value.bottomOffset) || 30;
  if (!$table) return;
  // 计算列表高度并设置
  const height = window.innerHeight - el.getBoundingClientRect().top - bottomOffset;
  // $table.layout.setMaxHeight(height)
  $table.layout.setHeight(height);
  // $table.maxHeight = 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);
  },
  // // 绑定默认高度
  async inserted(el, binding, vnode) {
    await doResize(el, binding, vnode);
  },
  // // 销毁时设置
  unbind(el) {
    // 移除resize监听
    removeResizeListener(el, el.resizeListener);
  }
};

4:index.js

import tableHeight from './tableHeight';

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

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

tableHeight.install = install;

export default tableHeight;

5:main.js引用 注册 这里我们使用全局指令

 

import tableHeight from '@/utils/tableHeight';
Vue.use(tableHeight);

6： 在需要的el-table表格中使用即可  

bottomOffset：为table距离底部的距离 自行计算
height:随便给个值即可
代码如下

  <el-table
      ref="evtTable"
      v-tableHeight="{bottomOffset: 65}"
      :data="list"
      height="100px"
      tooltip-effect="dark"
      @selection-change="handleSelectionChange"
    >
      <el-table-column width="80" align="center" type="selection" />
      <el-table-column prop="username" align="center" label="登录名" />
      <el-table-column prop="pdate" align="center" label="创建时间" />
      <el-table-column prop="managername" align="center" label="角色" />
      <el-table-column prop="email" align="center" label="邮箱" />
      <el-table-column prop="parentname" align="center" label="创建人" />
      <el-table-column align="center" label="操作">
        <template slot-scope="{ row }">
          <el-button size="small" type="info" @click="showConfig(row)">配置</el-button>
        </template>
      </el-table-column>
    </el-table>