通过指令v-zcCalcTableHeight计算el-table的高度

import Vue from "vue";

/**

 * v-zcCalcTableHeight ， 专门用来在el-table上根据tableData的行数，动态开启纵向滚动的指令。

 * 主要作用：

 * 1. 避免行数过多导致分页组件会浮在表格上

 * 2. 避免行数不足时，表格内有底部有冗余的空间，

 * 

 * 注：需要组件存在 calcTableHeight 属性（属性名可自定义），同时在el-table表格组件添加：

    v-zcCalcTableHeight

    :height.sync="calcTableHeight"

 *

 * 示例：views/systemManager/dataManagement/components/sectionInformation/SectionInformationTable.vue

 */

Vue.directive("zcCalcTableHeight", {

  componentUpdated(el, binding, vnode) {

    const list = vnode.componentInstance.data; //获取表格的所有数据

    const hei = el && el.parentElement.clientHeight - 60; // 可见区域clientHeight - 分页高度60

    const len = Math.floor(hei / 45); // 可容纳的最大行数， 行高为45

    const allLen = list.length; // 目前的内容行数

    // 根据行数设置height的值，若不溢出则设置为 null ，否则设置为 calc(100% - 60px)

    vnode.componentInstance.$emit(

      "update:height",  //这个可以控制table的高度，所以table那里传入:height.sync="calHeight"这样的属性， calHeight：null

      allLen > len ? "calc(100% - 60px)" : null

    );

    // 若最后的计算结果时不需要滚动，则手动重置dom上的height

    if (allLen <= len) {

      el.style.cssText = "height:auto";

    }

  }

});