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 • 14 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"),_util=require("./util"),_dom=require("../../ui/src/dom"),_utils=require("../../ui/src/utils"),_vn=require("../../ui/src/vn");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}let{getI18n,renderer,renderEmptyElement}=_ui.VxeUI,renderType="body";var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeTableBody",props:{tableData:Array,tableColumn:Array,fixedColumn:Array,fixedType:{type:String,default:""}},setup(O){let Ke=(0,_vue.inject)("$xeTable",{}),{xID:S,props:Je,context:M,reactData:Qe,internalData:Ze}=Ke,{computeEditOpts:el,computeMouseOpts:ll,computeCellOffsetWidth:tl,computeAreaOpts:al,computeDefaultRowHeight:rl,computeEmptyOpts:T,computeTooltipOpts:ol,computeRadioOpts:e,computeExpandOpts:te,computeTreeOpts:c,computeCheckboxOpts:il,computeCellOpts:sl,computeValidOpts:nl,computeRowOpts:dl,computeColumnOpts:ul,computeRowDragOpts:cl,computeResizableOpts:pl,computeVirtualXOpts:vl,computeVirtualYOpts:gl}=Ke.getComputeMaps(),k=(0,_vue.ref)(),z=(0,_vue.ref)(),$=(0,_vue.ref)(),q=(0,_vue.ref)(),A=(0,_vue.ref)(),H=(0,_vue.ref)(),F=(0,_vue.ref)(),j=(0,_vue.ref)(),xl=()=>{var e=Je.delayHover,{lastScrollTime:l,isDragResize:t}=Qe;return!!(t||l&&Date.now()<l+e)},hl=(e,l,t)=>{var a=l.column,r=Ze.afterFullData,o=Je.treeConfig,i=c.value,{slots:a,treeNode:s}=a,n=Ze.fullAllDataRowIdData;if(a&&a.line)return Ke.callSlot(a.line,l);a=n[e];let d=0,u=null;return a&&(d=a.level,u=a.items[a.treeIndex-1]),o&&s&&(i.showLine||i.line)?[(0,_vue.h)("div",{key:"tl",class:"vxe-tree--line-wrapper"},[(0,_vue.h)("div",{class:"vxe-tree--line",style:{height:`${(0,_util.getRowid)(Ke,r[0])===e?1:(0,_util.calcTreeLine)(l,u)}px`,bottom:`-${Math.floor(t/2)}px`,left:d*i.indent+(d?2-(0,_util.getOffsetSize)(Ke):0)+16+"px"}})])]:[]},re=(e,l,t,A,H,a,F,j,r,o,L,N,U)=>{var i=Ke.xeGrid,{columnKey:B,resizable:s,showOverflow:n,border:W,height:d,treeConfig:V,cellClassName:G,cellStyle:P,align:u,spanMethod:X,mouseConfig:Y,editConfig:K,editRules:c,tooltipConfig:p,padding:v}=Je,{tableData:J,tableColumn:Q,dragRow:Z,overflowX:ee,overflowY:le,currentColumn:te,scrollXLoad:ae,scrollYLoad:re,mergeBodyFlag:g,calcCellHeightFlag:x,resizeHeightFlag:h,resizeWidthFlag:oe,editStore:ie,isAllOverflow:se,validErrorMaps:ne}=Qe,{fullAllDataRowIdData:de,fullColumnIdData:m,mergeBodyCellMaps:ue,visibleColumn:ce,afterFullData:pe,mergeBodyList:ve,scrollXStore:ge,scrollYStore:xe}=Ze,w=sl.value,_=nl.value,f=il.value,he=el.value,b=ol.value,me=pl.value,we=vl.value,_e=gl.value,{isAllColumnDrag:me,isAllRowDrag:fe}=me,y=dl.value,C=cl.value,be=rl.value,x=x?w.height||y.height:0,{disabledMethod:E,isCrossDrag:ye,isPeerDrag:Ce}=C,Ee=ul.value,Re=ll.value,De=al.value,Ie=tl.value,De=De.selectCellToRow,{type:Oe,cellRender:Se,editRender:Me,align:Te,showOverflow:R,className:ke,treeNode:ze,rowResize:$e,padding:D,verticalAlign:I,slots:qe}=o,Ae=w.verticalAlign,ie=ie.actived,He=de[l]||{},O=o.id,m=m[O]||{},S=Me||Se,S=S?renderer.get(S.name):null,Fe=S?S.tableCellClassName||S.cellClassName:null,je=S?S.tableCellStyle||S.cellStyle:"";let Le=b.showAll;var Ne=m.index,b=m._index,m=(0,_utils.isEnableConf)(Me),h=h?He.resizeHeight:0;let M=ee&&(t?o.fixed!==t:!!o.fixed);v=_xeUtils.default.eqNull(D)?null===v?w.padding:v:D,D=_xeUtils.default.eqNull(R)?n:R,n="ellipsis"===D;let T="title"===D,k=!0===D||"tooltip"===D;R=se||T||k||n,D=_xeUtils.default.isBoolean(o.resizable)?o.resizable:Ee.resizable||s,s=!!x,x=0<h;let Ue;h={},Te=Te||(S?S.tableCellAlign:"")||u,S=_xeUtils.default.eqNull(I)?Ae:I,u=ne[l+":"+O],Ae=c&&_.showMessage&&("default"===_.message?d||1<J.length:"inline"===_.message),I={colid:O};let z={$table:Ke,$grid:i,isEdit:!1,seq:e,rowid:l,row:a,rowIndex:F,$rowIndex:j,_rowIndex:r,column:o,columnIndex:Ne,$columnIndex:L,_columnIndex:b,fixed:t,type:renderType,isHidden:!!M,level:H,visibleData:pe,data:J,items:U},$=!1,Be=!1,q=(($=y.drag?"row"===C.trigger||o.dragSort&&"cell"===C.trigger:$)&&(Be=!(!E||!E(z))),(T||k||Le||p)&&(h.onMouseenter=e=>{xl()||(T?(0,_dom.updateCellTitle)(e.currentTarget,o):(k||Le)&&Ke.triggerBodyTooltipEvent(e,z),Ke.dispatchEvent("cell-mouseenter",Object.assign({cell:e.currentTarget},z),e))}),(k||Le||p)&&(h.onMouseleave=e=>{xl()||((k||Le)&&Ke.handleTargetLeaveEvent(e),Ke.dispatchEvent("cell-mouseleave",Object.assign({cell:e.currentTarget},z),e))}),($||f.range||Y)&&(h.onMousedown=e=>{Ke.triggerCellMousedownEvent(e,z)}),$&&(h.onMouseup=Ke.triggerCellMouseupEvent),h.onClick=e=>{Ke.triggerCellClickEvent(e,z)},!(h.onDblclick=e=>{Ke.triggerCellDblclickEvent(e,z)})),We=1,Ve=1;if(g&&ve.length){ne=ue[r+":"+b];if(ne){var{rowspan:c,colspan:d}=ne;if(!c||!d)return renderEmptyElement(Ke);1<c&&(q=!0,Ve=c,I.rowspan=c),1<d&&(q=!0,We=d,I.colspan=d)}}else if(X){var{rowspan:i=1,colspan:e=1}=X(z)||{};if(!i||!e)return renderEmptyElement(Ke);1<i&&(q=!0,Ve=i,I.rowspan=i),1<e&&(q=!0,We=e,I.colspan=e)}!(M=M&&q&&(1<I.colspan||1<I.rowspan)?!1:M)&&K&&(Me||Se)&&(he.showStatus||he.showUpdateStatus)&&(Ue=Ke.isUpdateByRow(a,o.field));F=!R&&(re||ae);let Ge=(0,_util.getCellRestHeight)(He,w,y,be);j=L===N.length-1,U=!o.resizeWidth&&("auto"===o.minWidth||"auto"===o.width);let Pe=!1;q||Z&&(0,_util.getRowid)(Ke,Z)===l||(le&&re&&16<J.length&&!V&&!_e.immediate&&(r<xe.visibleStartIndex-xe.preloadSize||r>xe.visibleEndIndex+xe.preloadSize)||ee&&ae&&10<Q.length&&!we.immediate&&!o.fixed&&(b<ge.visibleStartIndex-ge.preloadSize||b>ge.visibleEndIndex+ge.preloadSize))&&(Pe=!0),1<Ve&&(C=pe[r+Ve-1])&&(E=de[(0,_util.getRowid)(Ke,C)])&&(Ge+=E.oTop+(0,_util.getCellRestHeight)(E,w,y,be)-He.oTop-(0,_util.getCellRestHeight)(He,w,y,be));p={};if(R&&oe){let l=0;if(1<We)for(let e=1;e<We;e++){var Xe=ce[Ne+e];Xe&&(l+=Xe.renderWidth)}p.width=o.renderWidth+l-Ie+"px"}re||ae||R||s||x?p.height=Ge+"px":p.minHeight=Ge+"px";f=[];M&&se?f.push((0,_vue.h)("div",{key:"tc",class:["vxe-cell",{"c--title":T,"c--tooltip":k,"c--ellipsis":n}],style:p})):(V&&f.push(...hl(l,z,Ge)),f.push((0,_vue.h)("div",{key:"tc",class:["vxe-cell",{"c--title":T,"c--tooltip":k,"c--ellipsis":n}],style:p,title:T?Ke.getCellLabel(a,o):null},Pe?[]:[(0,_vue.h)("div",{colid:O,rowid:l,class:"vxe-cell--wrapper vxe-body-cell--wrapper"},o.renderCell(z))])),Ae&&u&&(g=u.rule,ve=qe?qe.valid:null,ue=Object.assign(Object.assign(Object.assign({},z),u),{rule:u}),f.push((0,_vue.h)("div",{key:"tcv",class:["vxe-cell--valid-error-tip",(0,_dom.getPropClass)(_.className,ue)],style:g&&g.maxWidth?{width:g.maxWidth+"px"}:null},[(0,_vue.h)("div",{class:"vxe-cell--valid-error-wrapper vxe-cell--valid-error-theme-"+(_.theme||"normal")},[ve?Ke.callSlot(ve,ue):[(0,_vue.h)("span",{class:"vxe-cell--valid-error-msg"},u.content)]])]))));let Ye=!1;return Y&&Re.area&&!b&&De&&(Ye=!0),!M&&D&&me&&f.push((0,_vue.h)("div",{key:"tcc",class:["vxe-cell--col-resizable",{"is--line":!W||"none"===W}],onMousedown:e=>Ke.handleColResizeMousedownEvent(e,t,z),onDblclick:e=>Ke.handleColResizeDblclickEvent(e,z)})),($e||fe)&&y.resizable&&f.push((0,_vue.h)("div",{key:"tcr",class:"vxe-cell--row-resizable",onMousedown:e=>Ke.handleRowResizeMousedownEvent(e,z),onDblclick:e=>Ke.handleRowResizeDblclickEvent(e,z)})),(0,_vue.h)("td",Object.assign(Object.assign(Object.assign({class:["vxe-table--column vxe-body--column",O,S?"col--vertical-"+S:"",Te?"col--"+Te:"",Oe?"col--"+Oe:"",{"col--last":j,"col--tree-node":ze,"col--edit":m,"col--ellipsis":R,"col--cs-height":s,"col--rs-height":x,"col--to-row":Ye,"col--auto-height":F,"fixed--width":!U,"fixed--hidden":M,"is--padding":v,"is--progress":M&&se||Pe,"is--drag-cell":$&&(ye||Ce||!H),"is--drag-disabled":Be,"col--dirty":Ue,"col--active":K&&m&&ie.row===a&&(ie.column===o||"row"===he.mode),"col--valid-error":!!u,"col--current":te===o},(0,_dom.getPropClass)(Fe,z),(0,_dom.getPropClass)(ke,z),(0,_dom.getPropClass)(G,z)],key:B||ae||re||Ee.useKey||y.useKey||Ee.drag?O:L},I),{style:Object.assign({},_xeUtils.default.isFunction(je)?je(z):je,_xeUtils.default.isFunction(P)?P(z):P)}),h),A&&M?[]:f)},ae=(h,m,w,_)=>{let f=Ke.xeGrid,{stripe:b,rowKey:y,highlightHoverRow:C,rowClassName:E,rowStyle:R,editConfig:D,treeConfig:I}=Je,{hasFixedColumn:O,treeExpandedFlag:S,scrollXLoad:M,scrollYLoad:T,isAllOverflow:k,rowExpandedFlag:z,expandColumn:$,selectRadioRow:q,pendingRowFlag:A,rowExpandHeightFlag:H,isRowGroupStatus:F}=Qe,{fullAllDataRowIdData:j,fullColumnIdData:L,treeExpandedMaps:N,pendingRowMaps:U,rowExpandedMaps:B}=Ze,W=il.value,V=e.value,G=c.value,P=el.value,X=dl.value,Q=ul.value,{transform:Y,seqMode:K}=G,Z=G.children||G.childrenField,J=[],ee=(0,_util.createHandleGetRowId)(Ke).handleGetRowId,le=I||F;return w.forEach((a,r)=>{let o=ee(a);var i=j[o]||{};let s=r,n=0,d=-1,u=-1;var c=F&&a.isAggregate,p={},v=((X.isHover||C)&&(p.onMouseenter=e=>{xl()||Ke.triggerHoverEvent(e,{row:a,rowIndex:s})},p.onMouseleave=()=>{xl()||Ke.clearHoverRow()}),i&&(s=i.index,u=i._index,n=i.level,d=i.seq,c||I&&Y&&"increasing"===K?d=i._index+1:I&&"fixed"===K&&(d=i._tIndex+1)),{$table:Ke,seq:d,rowid:o,fixed:h,type:renderType,level:n,row:a,rowIndex:s,$rowIndex:r,_rowIndex:u}),g=$&&!!z&&!!B[o];let e=!1,l=[],t=!1;D&&(t=Ke.isInsertByRow(a)),!I||T||Y||(l=a[Z],e=!!S&&l&&0<l.length&&!!N[o]),!X.drag||F||I&&!Y||(p.onDragstart=Ke.handleRowDragDragstartEvent,p.onDragend=Ke.handleRowDragDragendEvent,p.onDragover=Ke.handleRowDragDragoverEvent);var c=["vxe-body--row",le?"row--level-"+n:"",{"row--stripe":b&&(u+1)%2==0,"is--new":t,"is--expand-row":g,"is--expand-tree":e,"row--new":t&&(P.showStatus||P.showInsertStatus),"row--radio":V.highlight&&Ke.eqRow(q,a),"row--checked":W.highlight&&Ke.isCheckedByCheckboxRow(a),"row--pending":!!A&&!!U[o],"row--group":c},(0,_dom.getPropClass)(E,v)],x=_.map((e,l)=>re(d,o,h,m,n,a,s,r,u,e,l,_,w));if(J.push((0,_vue.h)("tr",Object.assign({class:c,rowid:o,style:R?_xeUtils.default.isFunction(R)?R(v):R:null,key:y||M||T||X.useKey||X.drag||Q.drag||F||I?o:r},p),x)),g){var{height:c,padding:v,mode:p}=te.value;if("fixed"===p)J.push((0,_vue.h)("tr",{class:"vxe-body--row-expanded-place",key:"expand_"+o,rowid:o},[(0,_vue.h)("td",{class:"vxe-body--row-expanded-place-column",colspan:_.length,style:{height:`${H?i.expandHeight||c:0}px`}})]));else{x={},g=(c&&(x.height=c+"px"),I&&(x.paddingLeft=n*G.indent+30+"px"),$||{}).showOverflow,p=$.id,i=L[p]||{},p=_xeUtils.default.eqNull(g)?k:g;let e=-1,l=-1,t=-1;i&&(e=i.index,l=i.$index,t=i._index);g={$grid:f,$table:Ke,seq:d,column:$,columnIndex:e,$columnIndex:l,_columnIndex:t,fixed:h,type:renderType,level:n,row:a,rowid:o,rowIndex:s,$rowIndex:r,_rowIndex:u,isHidden:!1,isEdit:!1,visibleData:[],data:[],items:[]};J.push((0,_vue.h)("tr",{class:["vxe-body--expanded-row",{"is--padding":v}],key:"expand_"+o},[(0,_vue.h)("td",{class:["vxe-body--expanded-column",{"fixed--hidden":h&&!O,"col--ellipsis":p}],colspan:_.length},[(0,_vue.h)("div",{class:["vxe-body--expanded-cell",{"is--ellipsis":c}],style:x},[$.renderData(g)])])]))}}e&&J.push(...ae(h,m,l,_))}),J};(0,_vue.onMounted)(()=>{(0,_vue.nextTick)(()=>{var e=O.fixedType,l=Ze.elemStore,e=`${e||"main"}-body-`;l[e+"wrapper"]=k,l[e+"scroll"]=z,l[e+"table"]=$,l[e+"colgroup"]=q,l[e+"list"]=A,l[e+"xSpace"]=H,l[e+"ySpace"]=F,l[e+"emptyBlock"]=j})}),(0,_vue.onUnmounted)(()=>{var e=O.fixedType,l=Ze.elemStore,e=`${e||"main"}-body-`;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+"ySpace"]=null,l[e+"emptyBlock"]=null});return()=>{var e=M.slots,l=Ke.xeGrid;let{fixedColumn:t,fixedType:a,tableColumn:r}=O;var{spanMethod:o,footerSpanMethod:i,mouseConfig:s}=Je,{isGroup:n,tableData:d,isColLoading:u,overflowX:c,scrollXLoad:p,scrollYLoad:v,isAllOverflow:g,expandColumn:x,dragRow:h,dragCol:m}=Qe,{visibleColumn:w,fullAllDataRowIdData:_,fullColumnIdData:f}=Ze,b=T.value,y=ll.value,C=te.value;let E=d,R=r,D=!1;!(p||v||g)||x&&"fixed"!==C.mode||o||i||(D=!0),u||!a&&c||(R=w),a&&D&&(R=t||[]),v&&h&&2<E.length&&(d=_[(0,_util.getRowid)(Ke,h)])&&(g=d._index,x=E[0],C=E[E.length-1],o=_[(0,_util.getRowid)(Ke,x)],i=_[(0,_util.getRowid)(Ke,C)],o)&&i&&(u=o._index,c=i._index,g<u?E=[h].concat(E):c<g&&(E=E.concat([h]))),a||n||p&&m&&2<R.length&&(w=f[m.id])&&(v=w._index,d=R[0],x=R[R.length-1],_=f[d.id],C=f[x.id],_)&&C&&(o=_._index,i=C._index,v<o?R=[m].concat(R):i<v&&(R=R.concat([m])));let I;u=e?e.empty:null,c={$table:Ke,$grid:l},I=u?Ke.callSlot(u,c):(h=(g=b.name?renderer.get(b.name):null)?g.renderTableEmpty||g.renderTableEmptyView||g.renderEmpty:null)?(0,_vn.getSlotVNs)(h(b,c)):Je.emptyText||getI18n("vxe.table.emptyText"),n={onScroll(e){Ke.triggerBodyScrollEvent(e,a)}};return(0,_vue.h)("div",{ref:k,class:["vxe-table--body-wrapper",a?`fixed-${a}--wrapper`:"body--wrapper"],xid:S},[(0,_vue.h)("div",Object.assign({ref:z,class:"vxe-table--body-inner-wrapper"},n),[a?renderEmptyElement(Ke):(0,_vue.h)("div",{ref:H,class:"vxe-body--x-space"}),(0,_vue.h)("div",{ref:F,class:"vxe-body--y-space"}),(0,_vue.h)("table",{ref:$,class:"vxe-table--body",xid:S,cellspacing:0,cellpadding:0,border:0,xvm:D?"1":null},[(0,_vue.h)("colgroup",{ref:q},R.map((e,l)=>(0,_vue.h)("col",{name:e.id,key:l,style:{width:e.renderWidth+"px"}}))),(0,_vue.h)("tbody",{ref:A},ae(a,D,E,R))]),(0,_vue.h)("div",{class:"vxe-table--checkbox-range"}),s&&y.area?(0,_vue.h)("div",{class:"vxe-table--cell-area"},[(0,_vue.h)("span",{class:"vxe-table--cell-main-area"},y.extension?[(0,_vue.h)("span",{class:"vxe-table--cell-main-area-btn",onMousedown(e){Ke.triggerCellAreaExtendMousedownEvent&&Ke.triggerCellAreaExtendMousedownEvent(e,{$table:Ke,fixed:a,type:renderType})}})]:[]),(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-row-status-area"})]):renderEmptyElement(Ke),a?renderEmptyElement(Ke):(0,_vue.h)("div",{class:"vxe-table--empty-block",ref:j},[(0,_vue.h)("div",{class:"vxe-table--empty-content"},I)])])])}}});