vxe-table
Version:
A PC-end table component based on Vxe UI, supporting copy-paste, data pivot table, and high-performance virtual list table solution.
1 lines • 9.2 kB
JavaScript
Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_utils=require("../../ui/src/utils"),_util=require("./util"),_vn=require("../../ui/src/vn");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}let{renderer,renderEmptyElement}=_ui.VxeUI,sourceType="table",renderType="header";var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeTableHeader",props:{tableData:Array,tableColumn:Array,tableGroupColumn:Array,fixedColumn:Array,fixedType:{type:String,default:null}},setup(x){let ue=(0,_vue.inject)("$xeTable",{}),{xID:g,props:f,reactData:m,internalData:_}=ue,{computeColumnOpts:a,computeColumnDragOpts:r,computeCellOpts:t,computeMouseOpts:b,computeHeaderCellOpts:i,computeDefaultRowHeight:n,computeVirtualXOpts:d,computeFloatingFilterOpts:C,computeIsHeaderRenderOptimize:w}=ue.getComputeMaps(),y=(0,_vue.ref)([]),H=(0,_vue.ref)(),D=(0,_vue.ref)(),E=(0,_vue.ref)(),T=(0,_vue.ref)(),S=(0,_vue.ref)(),O=(0,_vue.ref)(),o=(0,_vue.ref)(),u=()=>{var e=f.showCustomHeader,{collectColumn:l,visibleColumn:a}=_,r=x.tableGroupColumn,t=m.isGroup;let i=t?(0,_util.convertHeaderColumnToRows)(r):[],n=[];e&&1<i.length&&(n=(0,_util.convertHeaderToGridRows)(i),i=n),y.value=i,ue.dispatchEvent("columns-change",{visibleColgroups:n,collectColumn:l,visibleColumn:a},null)},I=(E,T,e,S,O)=>{let I=ue.xeGrid,F=ue.xeGantt,R=x.fixedType,{resizable:$,columnKey:k,showCustomHeader:U,headerCellClassName:M,headerCellStyle:z,showHeaderOverflow:A,headerAlign:q,align:G,mouseConfig:X}=f,{currentColumn:j,dragCol:N,scrollXLoad:W,scrollYLoad:L,overflowX:V,mergeHeadFlag:B,tableColumn:K}=m,{fullColumnIdData:P,scrollXStore:Y,mergeHeaderList:J,mergeHeaderCellMaps:Q}=_,Z=d.value,ee=a.value,le=r.value,ae=t.value;var l=n.value;let re=i.value,te=(0,_util.getCalcHeight)(re.height)||l,{disabledMethod:ie,isCrossDrag:de,isPeerDrag:oe}=le,ne=S===e.length-1;return O.map((e,l)=>{var{type:a,showHeaderOverflow:r,headerAlign:t,align:i,filters:n,headerClassName:d,editRender:o,cellRender:u}=e,s=e.id,c=P[s]||{},o=o||u,u=o?renderer.get(o.name):null,o=e.children&&e.children.length,p=V&&!o&&(R?e.fixed!==R:!!e.fixed),v=(_xeUtils.default.isBoolean(re.padding)?re:ae).padding,r=_xeUtils.default.eqNull(r)?A:r,t=t||(u?u.tableHeaderCellAlign:"")||q||i||(u?u.tableCellAlign:"")||G,i="ellipsis"===r,u="title"===r,r=!0===r||"tooltip"===r,h=u||r||i;let x=!1,g=null;n&&(g=n[0],x=n.some(e=>e.checked));var f=c.index,c=c._index;let m={$table:ue,$grid:I,$gantt:F,$rowIndex:S,column:e,columnIndex:f,$columnIndex:l,_columnIndex:c,firstFilterOption:g,fixed:R,source:sourceType,type:renderType,isHidden:p,hasFilter:x};f={colid:s};let _=!1;if(U||(f.colspan=1<e.colSpan?e.colSpan:null,f.rowspan=1<e.rowSpan?e.rowSpan:null),B&&J.length&&(U||ne)){var b=Q[S+":"+(U?l:c)];if(b){var{rowspan:b,colspan:C}=b;if(!b||!C)return null;1<b&&(_=!0,f.rowspan=b),1<C&&(_=!0,f.colspan=C)}}b={onClick:e=>ue.triggerHeaderCellClickEvent(e,m),onDblclick:e=>ue.triggerHeaderCellDblclickEvent(e,m)},C=ee.drag&&"cell"===le.trigger;let w=!1;C&&(w=!(!ie||!ie(m))),(X||C)&&(b.onMousedown=e=>ue.triggerHeaderCellMousedownEvent(e,m)),ee.drag&&(b.onDragstart=ue.handleHeaderCellDragDragstartEvent,b.onDragend=ue.handleHeaderCellDragDragendEvent,b.onDragover=ue.handleHeaderCellDragDragoverEvent,C)&&(b.onMouseup=ue.handleHeaderCellDragMouseupEvent);var C=l===O.length-1,y=_xeUtils.default.isBoolean(e.resizable)?e.resizable:ee.resizable||$,H=!e.resizeWidth&&("auto"===e.minWidth||"auto"===e.width);let D=!1;!T||!V||E||_||N&&N.id===s||W&&10<K.length&&!e.fixed&&!Z.immediate&&(c<Y.visibleStartIndex-Y.preloadSize||c>Y.visibleEndIndex+Y.preloadSize)&&(D=!0);c={};if(h?c.height=te+"px":c.minHeight=te+"px",!U&&o&&!ne){let l=0;_xeUtils.default.eachTree(e.children,e=>{!e.visible||e.children&&e.children.length||(l+=e.renderWidth)}),c.width=l+"px"}return(0,_vue.h)("th",Object.assign(Object.assign(Object.assign({class:["vxe-table--column vxe-header--column",s,p?"fixed--hidden":"fixed--visible",{["col--"+t]:t,["col--"+a]:a,"col--last":C,"col--fixed":e.fixed,"col--group":o,"col--ellipsis":h,"fixed--width":!H,"is--padding":v,"is--sortable":e.sortable,"col--filter":!!n,"is--filter-active":x,"is--drag-active":ee.drag&&!e.fixed&&!w&&(de||oe||!e.parentId),"is--drag-disabled":ee.drag&&w,"col--current":j===e},d?_xeUtils.default.isFunction(d)?d(m):d:"",M?_xeUtils.default.isFunction(M)?M(m):M:""],style:z?_xeUtils.default.isFunction(z)?z(m):z:null},f),b),{key:U?""+s+l:k||W||L||ee.useKey||ee.drag||o?s:l}),[(0,_vue.h)("div",{class:["vxe-cell",{"c--title":u,"c--tooltip":r,"c--ellipsis":i}],style:c},D||T&&p?[]:[(0,_vue.h)("div",{colid:s,class:"vxe-cell--wrapper vxe-header-cell--wrapper"},e.renderHeader(m))]),p||!y||U&&!ne?renderEmptyElement(ue):(0,_vue.h)("div",{class:"vxe-cell--col-resizable",onMousedown:e=>ue.handleColResizeMousedownEvent(e,R,m),onDblclick:e=>ue.handleColResizeDblclickEvent(e,m)})])})},F=(C,w)=>{let y=ue.xeGrid,H=ue.xeGantt,D=x.fixedType,{showHeaderOverflow:E,headerAlign:T,align:S}=f,{currentColumn:O,overflowX:I}=m,F=_.fullColumnIdData,R=t.value;var e=n.value;let $=i.value,k=(0,_util.getCalcHeight)($.height)||e;return w.map((e,l)=>{var{type:a,showHeaderOverflow:r,headerAlign:t,align:i,filters:n,editRender:d,cellRender:o,floatingFilters:u,filterRender:s,slots:c}=e,p=e.id,v=F[p]||{},d=d||o,o=c?c.floatingFilter||c["floating-filter"]:null,c=d?renderer.get(d.name):null,d=(0,_utils.isEnableConf)(s)?renderer.get(s.name):null,d=d?d.renderTableFloatingFilter:null,h=I&&(D?e.fixed!==D:!!e.fixed),x=(_xeUtils.default.isBoolean($.padding)?$:R).padding,r=_xeUtils.default.eqNull(r)?E:r,t=t||(c?c.tableHeaderCellAlign:"")||T||i||(c?c.tableCellAlign:"")||S,i="ellipsis"===r,c="title"===r,r=!0===r||"tooltip"===r,g=c||r||i;let f=!1,m=null;n&&(m=n[0],f=n.some(e=>e.checked));var n=v.index,v=v._index,n={$table:ue,$grid:y,$gantt:H,column:e,columnIndex:n,$columnIndex:l,_columnIndex:v,option:m,fixed:D,source:sourceType,type:renderType,isHidden:h,hasFilter:f},v={colid:p},l=l===w.length-1,_=!e.resizeWidth&&("auto"===e.minWidth||"auto"===e.width),b={};return g?b.height=k+"px":b.minHeight=k+"px",(0,_vue.h)("th",Object.assign({class:["vxe-table--column vxe-header--column",p,h?"fixed--hidden":"fixed--visible",{["col--"+t]:t,["col--"+a]:a,"col--last":l,"col--fixed":e.fixed,"col--ellipsis":g,"fixed--width":!_,"is--padding":x,"is--sortable":e.sortable,"col--current":O===e}],key:p},v),[(0,_vue.h)("div",{class:["vxe-cell",{"c--title":c,"c--tooltip":r,"c--ellipsis":i}],style:b},C&&h&&!u?[]:[(0,_vue.h)("div",{colid:p,class:"vxe-cell--wrapper vxe-header-cell--wrapper"},o?ue.callSlot(o,n):d&&m?(0,_vn.getSlotVNs)(d(s,n)):[])])])})};return(0,_vue.watch)(()=>x.tableColumn,u),(0,_vue.onMounted)(()=>{(0,_vue.nextTick)(()=>{var e=x.fixedType,l=ue.internalData,l=l.elemStore,e=`${e||"main"}-header-`;l[e+"wrapper"]=H,l[e+"scroll"]=D,l[e+"table"]=E,l[e+"colgroup"]=T,l[e+"list"]=S,l[e+"xSpace"]=O,l[e+"repair"]=o,u()})}),(0,_vue.onUnmounted)(()=>{var e=x.fixedType,l=ue.internalData,l=l.elemStore,e=`${e||"main"}-header-`;l[e+"wrapper"]=null,l[e+"scroll"]=null,l[e+"table"]=null,l[e+"colgroup"]=null,l[e+"list"]=null,l[e+"xSpace"]=null,l[e+"repair"]=null}),()=>{let{fixedType:l,fixedColumn:e,tableColumn:a}=x;var r=f.mouseConfig,{isGroup:t,isColLoading:i,overflowX:n,scrollXLoad:d,dragCol:o}=m,{visibleColumn:u,fullColumnIdData:s}=_,c=b.value,p=w.value;let v=y.value||[],h=a;return t?h=u:(p&&(i||!l&&n)||(h=u),l&&p&&(h=e||[]),v=[h]),l||t||d&&o&&2<h.length&&(i=s[o.id])&&(n=i._index,u=h[0],d=h[h.length-1],i=s[u.id],u=s[d.id],i)&&u&&(s=i._index,d=u._index,n<s?(h=[o].concat(h),v=[[o].concat(v[0])].concat(v.slice(1))):d<n&&(h=h.concat([o]),v=[v[0].concat([o])].concat(v.slice(1)))),(0,_vue.h)("div",{ref:H,class:["vxe-table--header-wrapper",l?`fixed-${l}--wrapper`:"body--wrapper"],xid:g},[(0,_vue.h)("div",{ref:D,class:"vxe-table--header-inner-wrapper",onScroll(e){ue.triggerHeaderScrollEvent(e,l)}},[l?renderEmptyElement(ue):(0,_vue.h)("div",{ref:O,class:"vxe-body--x-space"}),(0,_vue.h)("table",{ref:E,class:"vxe-table--header",xid:g,cellspacing:0,cellpadding:0,border:0,xvm:p?"1":null},[(0,_vue.h)("colgroup",{ref:T},h.map((e,l)=>(0,_vue.h)("col",{name:e.id,key:l,style:{width:e.renderWidth+"px"}}))),(0,_vue.h)("thead",{ref:S},((r,t,i,e)=>{let n=x.fixedType,{headerRowClassName:d,headerRowStyle:o}=f;var l=C.value,a=i.map((e,l)=>{var a={$table:ue,$rowIndex:l,fixed:n,type:renderType};return(0,_vue.h)("tr",{key:l,class:["vxe-header--row",d?_xeUtils.default.isFunction(d)?d(a):d:""],style:o?_xeUtils.default.isFunction(o)?o(a):o:null},I(r,t,i,l,e))});return l.enabled&&a.push((0,_vue.h)("tr",{key:"ff",class:["vxe-header--row"]},F(t,e))),a})(t,p,v,h))]),r&&c.area?(0,_vue.h)("div",{class:"vxe-table--cell-area",xid:g},[(0,_vue.h)("span",{class:"vxe-table--cell-main-area"}),(0,_vue.h)("span",{class:"vxe-table--cell-clip-area"}),(0,_vue.h)("span",{class:"vxe-table--cell-extend-area"}),(0,_vue.h)("span",{class:"vxe-table--cell-multi-area"}),(0,_vue.h)("span",{class:"vxe-table--cell-active-area"}),(0,_vue.h)("span",{class:"vxe-table--cell-col-status-area"})]):renderEmptyElement(ue)])])}}});