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.38 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(h){let se=(0,_vue.inject)("$xeTable",{}),{xID:g,props:f,reactData:m,internalData:_}=se,{computeColumnOpts:a,computeColumnDragOpts:r,computeCellOpts:t,computeMouseOpts:b,computeHeaderCellOpts:i,computeDefaultRowHeight:n,computeVirtualXOpts:d,computeFloatingFilterOpts:M,computeIsHeaderRenderOptimize:C}=se.getComputeMaps(),w=(0,_vue.ref)([]),y=(0,_vue.ref)(),H=(0,_vue.ref)(),D=(0,_vue.ref)(),T=(0,_vue.ref)(),E=(0,_vue.ref)(),I=(0,_vue.ref)(),o=(0,_vue.ref)(),s=()=>{var e=f.showCustomHeader;let{collectColumn:l,visibleColumn:a}=_;var r=h.tableGroupColumn,t=m.isGroup;let i=t?(0,_util.convertHeaderColumnToRows)(r):[],n=[];e&&1<i.length&&(n=(0,_util.convertHeaderToGridRows)(i),i=n),w.value=i,(0,_vue.nextTick)(()=>{se.dispatchEvent("columns-change",{visibleColgroups:n,collectColumn:l,visibleColumn:a},null)})},S=(T,E,e,I,S)=>{let O=se.xeGrid,k=se.xeGantt,F=h.fixedType,{resizable:R,columnKey:$,showCustomHeader:U,headerCellClassName:M,headerCellStyle:z,showHeaderOverflow:A,headerAlign:q,align:G,mouseConfig:N}=f,{currentColumn:X,dragCol:j,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=I===e.length-1;return S.map((e,l)=>{var{type:a,showHeaderOverflow:r,headerAlign:t,align:i,filters:n,headerClassName:d,editRender:o,cellRender:s}=e,u=e.id,c=P[u]||{},o=o||s,s=o?renderer.get(o.name):null,o=e.children&&e.children.length,p=V&&!o&&(F?e.fixed!==F:!!e.fixed),v=(_xeUtils.default.isBoolean(re.padding)?re:ae).padding,r=_xeUtils.default.eqNull(r)?A:r,t=t||(s?s.tableHeaderCellAlign:"")||q||i||(s?s.tableCellAlign:"")||G,i="ellipsis"===r,s="title"===r,r=!0===r||"tooltip"===r,x=s||r||i;let h=!1,g=null;n&&(g=n[0],h=n.some(e=>e.checked));var f=c.index,c=c._index;let m={$table:se,$grid:O,$gantt:k,rowIndex:I,_rowIndex:I,$rowIndex:I,column:e,columnIndex:f,$columnIndex:l,_columnIndex:c,firstFilterOption:g,fixed:F,source:sourceType,type:renderType,isHidden:p,hasFilter:h};f={colid:u};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[I+":"+(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=>se.triggerHeaderCellClickEvent(e,m),onDblclick:e=>se.triggerHeaderCellDblclickEvent(e,m)},C=ee.drag&&"cell"===le.trigger;let w=!1;C&&(w=!(!ie||!ie(m))),(N||C)&&(b.onMousedown=e=>se.triggerHeaderCellMousedownEvent(e,m)),ee.drag&&(b.onDragstart=se.handleHeaderCellDragDragstartEvent,b.onDragend=se.handleHeaderCellDragDragendEvent,b.onDragover=se.handleHeaderCellDragDragoverEvent,C)&&(b.onMouseup=se.handleHeaderCellDragMouseupEvent);var C=l===S.length-1,y=_xeUtils.default.isBoolean(e.resizable)?e.resizable:ee.resizable||R,H=!e.resizeWidth&&("auto"===e.minWidth||"auto"===e.width);let D=!1;!E||!V||T||_||j&&j.id===u||W&&10<K.length&&!e.fixed&&!Z.immediate&&(c<Y.visibleStartIndex-Y.preloadSize||c>Y.visibleEndIndex+Y.preloadSize)&&(D=!0);c={};if(x?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",u,p?"fixed--hidden":"fixed--visible",{["col--"+t]:t,["col--"+a]:a,"col--last":C,"col--fixed":e.fixed,"col--group":o,"col--ellipsis":x,"fixed--width":!H,"is--padding":v,"is--sortable":e.sortable,"col--filter":!!n,"is--filter-active":h,"is--drag-active":ee.drag&&!e.fixed&&!w&&(de||oe||!e.parentId),"is--drag-disabled":ee.drag&&w,"col--current":X===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?""+u+l:$||W||L||ee.useKey||ee.drag||o?u:l}),[(0,_vue.h)("div",{class:["vxe-cell",{"c--title":s,"c--tooltip":r,"c--ellipsis":i}],style:c},D||E&&p?[]:[(0,_vue.h)("div",{colid:u,class:"vxe-cell--wrapper vxe-header-cell--wrapper"},e.renderHeader(m))]),p||!y||U&&!ne?renderEmptyElement(se):(0,_vue.h)("div",{class:"vxe-cell--col-resizable",onMousedown:e=>se.handleColResizeMousedownEvent(e,F,m),onDblclick:e=>se.handleColResizeDblclickEvent(e,m)})])})},O=(C,w)=>{let y=se.xeGrid,H=se.xeGantt,D=h.fixedType,{showHeaderOverflow:T,headerAlign:E,align:I}=f,{currentColumn:S,overflowX:O}=m,k=_.fullColumnIdData,F=t.value;var e=n.value;let R=i.value,$=M.value.cellClassName,U=(0,_util.getCalcHeight)(R.height)||e;return w.map((e,l)=>{var{type:a,showHeaderOverflow:r,headerAlign:t,align:i,filters:n,editRender:d,cellRender:o,floatingFilters:s,filterRender:u,slots:c}=e,p=e.id,v=k[p]||{},d=d||o,o=c?c.floatingFilter||c["floating-filter"]:null,c=d?renderer.get(d.name):null,d=(0,_utils.isEnableConf)(u)?renderer.get(u.name):null,d=d?d.renderTableFloatingFilter:null,x=O&&(D?e.fixed!==D:!!e.fixed),h=(_xeUtils.default.isBoolean(R.padding)?R:F).padding,r=_xeUtils.default.eqNull(r)?T:r,t=t||(c?c.tableHeaderCellAlign:"")||E||i||(c?c.tableCellAlign:"")||I,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:se,$grid:y,$gantt:H,column:e,columnIndex:n,$columnIndex:l,_columnIndex:v,option:m,fixed:D,source:sourceType,type:renderType,isHidden:x,hasFilter:f},v={colid:p},l=l===w.length-1,_=!e.resizeWidth&&("auto"===e.minWidth||"auto"===e.width),b={};return g?b.height=U+"px":b.minHeight=U+"px",(0,_vue.h)("th",Object.assign({class:["vxe-table--column vxe-header--column is--floating-filters",p,x?"fixed--hidden":"fixed--visible",{["col--"+t]:t,["col--"+a]:a,"col--last":l,"col--fixed":e.fixed,"col--ellipsis":g,"fixed--width":!_,"is--padding":h,"is--sortable":e.sortable,"col--current":S===e}],key:p},v),[(0,_vue.h)("div",{class:["vxe-cell",""+($||""),{"c--title":c,"c--tooltip":r,"c--ellipsis":i}],style:b},C&&x&&!s?[]:[(0,_vue.h)("div",{colid:p,class:"vxe-cell--wrapper vxe-header-cell--wrapper"},o?se.callSlot(o,n):d&&m?(0,_vn.getSlotVNs)(d(u,n)):[])])])})};return(0,_vue.watch)(()=>h.tableColumn,s),(0,_vue.onMounted)(()=>{(0,_vue.nextTick)(()=>{var e=h.fixedType,l=se.internalData,l=l.elemStore,e=`${e||"main"}-header-`;l[e+"wrapper"]=y,l[e+"scroll"]=H,l[e+"table"]=D,l[e+"colgroup"]=T,l[e+"list"]=E,l[e+"xSpace"]=I,l[e+"repair"]=o,s()})}),(0,_vue.onUnmounted)(()=>{var e=h.fixedType,l=se.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}=h;var r=f.mouseConfig,{isGroup:t,isColLoading:i,overflowX:n,scrollXLoad:d,dragCol:o}=m,{visibleColumn:s,fullColumnIdData:u}=_,c=b.value,p=C.value;let v=w.value||[],x=a;return t?x=s:(p&&(i||!l&&n)||(x=s),l&&p&&(x=e||[]),v=[x]),l||t||d&&o&&2<x.length&&(i=u[o.id])&&(n=i._index,s=x[0],d=x[x.length-1],i=u[s.id],s=u[d.id],i)&&s&&(u=i._index,d=s._index,n<u?(x=[o].concat(x),v=[[o].concat(v[0])].concat(v.slice(1))):d<n&&(x=x.concat([o]),v=[v[0].concat([o])].concat(v.slice(1)))),(0,_vue.h)("div",{ref:y,class:["vxe-table--header-wrapper",l?`fixed-${l}--wrapper`:"body--wrapper"],xid:g},[(0,_vue.h)("div",{ref:H,class:"vxe-table--header-inner-wrapper",onScroll(e){se.triggerHeaderScrollEvent(e,l)}},[l?renderEmptyElement(se):(0,_vue.h)("div",{ref:I,class:"vxe-body--x-space"}),(0,_vue.h)("table",{ref:D,class:"vxe-table--header",xid:g,cellspacing:0,cellpadding:0,border:0,xvm:p?"1":null},[(0,_vue.h)("colgroup",{ref:T},x.map((e,l)=>(0,_vue.h)("col",{name:e.id,key:l,style:{width:e.renderWidth+"px"}}))),(0,_vue.h)("thead",{ref:E},((r,t,i,e)=>{let n=h.fixedType,{headerRowClassName:d,headerRowStyle:o}=f;var l=M.value,a=i.map((e,l)=>{var a={$table:se,rowIndex:l,_rowIndex:l,$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},S(r,t,i,l,e))});return l.enabled&&a.push((0,_vue.h)("tr",{key:"ff",class:["vxe-header--row is--floating-filters",""+(l.rowClassName||"")]},O(t,e))),a})(t,p,v,x))]),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(se)])])}}});