import?Vue?from?"vue";
/**
?*?v-zcCalcTableHeight?,?專門用來在el-table上根據(jù)tableData的行數(shù)矫俺,動態(tài)開啟縱向滾動的指令待笑。
?*?主要作用:
?*?1.?避免行數(shù)過多導致分頁組件會浮在表格上
?*?2.?避免行數(shù)不足時振乏,表格內(nèi)有底部有冗余的空間恰聘,
?*?
?*?注:需要組件存在?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; //獲取表格的所有數(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",? //這個可以控制table的高度麻捻,所以table那里傳入:height.sync="calHeight"這樣的屬性纲仍, calHeight:null
??????allLen?>?len???"calc(100%?-?60px)"?:?null
????);
????//?若最后的計算結(jié)果時不需要滾動,則手動重置dom上的height
????if?(allLen?<=?len)?{
??????el.style.cssText?=?"height:auto";
????}
??}
});