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";
}
}
});
