import?Vue?from?"vue";
/**
?*?v-zcCalcTableHeight?，?專門用來在el-table上根據(jù)tableData的行數(shù)，動(dòng)態(tài)開啟縱向滾動(dòng)的指令。
?*?主要作用：
?*?1.?避免行數(shù)過多導(dǎo)致分頁組件會(huì)浮在表格上
?*?2.?避免行數(shù)不足時(shí)，表格內(nèi)有底部有冗余的空間，
?*?
?*?注：需要組件存在?calcTableHeight?屬性（屬性名可自定義），同時(shí)在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; //獲取表格的所有數(shù)據(jù)
????const?hei?=?el?&&?el.parentElement.clientHeight?-?60;?//?可見區(qū)域clientHeight?-?分頁高度60
????const?len?=?Math.floor(hei?/?45);?//?可容納的最大行數(shù)， 行高為45
????const?allLen?=?list.length;?//?目前的內(nèi)容行數(shù)
????//?根據(jù)行數(shù)設(shè)置height的值，若不溢出則設(shè)置為?null?，否則設(shè)置為?calc(100%?-?60px)
????vnode.componentInstance.$emit(
??????"update:height",? //這個(gè)可以控制table的高度，所以table那里傳入:height.sync="calHeight"這樣的屬性， calHeight：null
??????allLen?>?len???"calc(100%?-?60px)"?:?null
????);
????//?若最后的計(jì)算結(jié)果時(shí)不需要滾動(dòng)，則手動(dòng)重置dom上的height
????if?(allLen?<=?len)?{
??????el.style.cssText?=?"height:auto";
????}
??}
});
