element-ui-sticky-table
Version:
Sticky for element-ui table
2 lines (1 loc) • 4.35 kB
JavaScript
this.StickyTable=function(e){"use strict";function t(e,t,i,s,a,n,l,d,r,o){"boolean"!=typeof l&&(r=d,d=l,l=!1);const h="function"==typeof i?i.options:i;let c;if(e&&e.render&&(h.render=e.render,h.staticRenderFns=e.staticRenderFns,h._compiled=!0,a&&(h.functional=!0)),s&&(h._scopeId=s),n?(c=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,r(e)),e&&e._registeredComponents&&e._registeredComponents.add(n)},h._ssrRegister=c):t&&(c=l?function(e){t.call(this,o(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,d(e))}),c)if(h.functional){const e=h.render;h.render=function(t,i){return c.call(i),e(t,i)}}else{const e=h.beforeCreate;h.beforeCreate=e?[].concat(e,c):[c]}return i}const i={name:"sticky-table",inheritAttrs:!0,props:{sticky:{default:!1,type:Boolean},stickyOffsetTop:{default:0,type:Number}},components:{ElTable:e.Table},data:()=>({oldScrollableParentNodes:[],tableEl:void 0,tableHeader:void 0,tableHeaderFixed:void 0,tableHeaderFixedRight:void 0,requestId:null}),computed:{scrollableParentNodes(){const e=[document];try{let t=this.tableEl.parentElement;for(;null!==t;)["auto","scroll","visible"].includes(getComputedStyle(t).overflowY)&&e.push(t),t=t.parentElement}catch(e){}return e}},watch:{scrollableParentNodes:{immediate:!0,handler(){this.oldScrollableParentNodes.forEach(e=>{e.removeEventListener("scroll",this.adjust),e.removeEventListener("wheel",this.adjust)}),this.scrollableParentNodes.forEach(e=>{e.addEventListener("scroll",this.adjust),e.addEventListener("wheel",this.adjust)}),this.oldScrollableParentNodes=[...this.scrollableParentNodes]}},tableEl(){const e=this.tableEl,t=[...e.children].find(e=>e.classList.contains("el-table__header-wrapper"));void 0!==t&&(this.tableHeader=t);const i=[...e.children].find(e=>e.classList.contains("el-table__fixed"));void 0!==i&&(this.tableHeaderFixed=[...i.children].find(e=>e.classList.contains("el-table__fixed-header-wrapper")));const s=[...e.children].find(e=>e.classList.contains("el-table__fixed-right"));void 0!==s&&(this.tableHeaderFixedRight=[...s.children].find(e=>e.classList.contains("el-table__fixed-header-wrapper")))},tableHeader(){void 0!==this.tableHeader&&(this.tableHeader.style.position="relative",this.tableHeader.style.zIndex="2")},tableHeaderFixed(){void 0!==this.tableHeaderFixed&&(this.tableHeaderFixed.style.position="relative",this.tableHeaderFixed.style.zIndex="4")},tableHeaderFixedRight(){void 0!==this.tableHeaderFixedRight&&(this.tableHeaderFixedRight.style.position="relative",this.tableHeaderFixedRight.style.zIndex="4")},data:{immediate:!0,handler(){this.adjust()}}},async mounted(){!1!==this.sticky&&(await this.$nextTick(),this.tableEl=this.$refs.table.$el,window.addEventListener("resize",this.adjust),window.addEventListener("sticky-table:expand",this.adjust))},beforeDestroy(){this.scrollableParentNodes.forEach(e=>{e.removeEventListener("scroll",this.adjust),e.removeEventListener("wheel",this.adjust)}),window.removeEventListener("resize",this.adjust),window.removeEventListener("sticky-table:expand",this.adjust)},methods:{handleExpand(){window.dispatchEvent(new Event("sticky-table:expand"))},adjust(){cancelAnimationFrame(this.requestId),this.requestId=requestAnimationFrame(async()=>{const e=this.$refs.table.$el.getBoundingClientRect().top-this.stickyOffsetTop,t=e>=0?"0":Math.abs(e)+"px";var i;if([this.tableHeader,this.tableHeaderFixed,this.tableHeaderFixedRight].filter(e=>void 0!==e).forEach(e=>{e.style.top=t}),await(i=166,new Promise(e=>setTimeout(e,i))),void 0===this.tableHeaderFixedRight)return;const s=getComputedStyle(this.tableHeaderFixedRight.parentElement).width,a=getComputedStyle([...this.tableHeaderFixedRight.children].find(e=>e.classList.contains("el-table__header"))).width;this.tableHeaderFixedRight.style.left=`calc(-${a} + ${s})`})}}};var s=function(){var e=this,t=e.$createElement;return(e._self._c||t)("el-table",e._g(e._b({ref:"table",on:{"expand-change":e.handleExpand},scopedSlots:e._u([e._l(e.$scopedSlots,(function(t,i){return{key:i,fn:function(t){return[e._t(i,null,null,t)]}}}))],null,!0)},"el-table",e.$attrs,!1),e.$listeners))};s._withStripped=!0;return t({render:s,staticRenderFns:[]},void 0,i,void 0,!1,void 0,!1,void 0,void 0,void 0)}(ELEMENT);