@blueking/vxe-table
Version:
一个基于 vue 的 PC 端表格组件,支持增删改查、虚拟树、列拖拽,懒加载、快捷菜单、数据校验、树形结构、打印、导入导出、自定义模板、渲染器、JSON 配置式...
1 lines • 12.5 kB
JavaScript
Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_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,_vue.defineComponent)({name:"VxeTableBody",props:{tableData:Array,tableColumn:Array,fixedColumn:Array,fixedType:{type:String,default:""}},setup(S){let Ee=(0,_vue.inject)("$xeTable",{}),{xID:M,props:De,context:$,reactData:Oe,internalData:Re}=Ee,{computeEditOpts:Ie,computeMouseOpts:Te,computeAreaOpts:Se,computeDefaultRowHeight:Me,computeEmptyOpts:k,computeTooltipOpts:$e,computeRadioOpts:e,computeExpandOpts:G,computeTreeOpts:u,computeCheckboxOpts:ke,computeCellOpts:Ae,computeValidOpts:je,computeRowOpts:qe,computeColumnOpts:Ue,computeRowDragOpts:Le,computeColumnDragOpts:l,computeLeftFixedWidth:A,computeRightFixedWidth:j}=Ee.getComputeMaps(),q=(0,_vue.ref)(),U=(0,_vue.ref)(),L=(0,_vue.ref)(),B=(0,_vue.ref)(),F=(0,_vue.ref)(),N=(0,_vue.ref)(),H=(0,_vue.ref)(),W=(0,_vue.ref)(),Be=(0,_vue.computed)(()=>Boolean(Ee.context.slots.settingColumn)&&"left"!==S.fixedType),Fe=()=>{var e=De.delayHover,{lastScrollTime:l,_isResize:t}=Oe;return!!(t||l&&Date.now()<l+e)},Ne=e=>{var{row:l,column:t}=e,a=Re.afterFullData,r=De.treeConfig,o=u.value,{slots:t,treeNode:i}=t,n=Re.fullAllDataRowIdData;if(t&&t.line)return Ee.callSlot(t.line,e);t=n[(0,_util.getRowid)(Ee,l)];let s=0,d=null;t&&(s=t.level,d=t.items[t._index-1]);n=Ee.eqRow(a[0],l);return r&&i&&(o.showLine||o.line)?[(0,_vue.h)("div",{class:"vxe-tree--line-wrapper"},[(0,_vue.h)("div",{class:"vxe-tree--line",style:{height:`${n?1:(0,_util.calcTreeLine)(e,d)}px`,left:s*o.indent+(s?2-(0,_util.getOffsetSize)(Ee):0)+16+"px"}})])]:[]},Q=(e,l,t,q,U,a,r,o,i,n,s,L,d)=>{var B=Re.fullAllDataRowIdData,{columnKey:F,height:u,showOverflow:c,cellClassName:N,cellStyle:v,align:H,spanMethod:W,mouseConfig:P,editConfig:K,editRules:p,tooltipConfig:V}=De,{tableData:g,overflowX:x,currentColumn:z,scrollXLoad:X,scrollYLoad:Y,isCalcCellHeight:G,mergeList:h,editStore:J,isAllOverflow:Q,validErrorMaps:m}=Oe,{afterFullData:w,scrollXStore:Z,scrollYStore:ee}=Re,le=Ae.value,_=je.value,te=ke.value,ae=Ie.value,f=$e.value,re=qe.value,y=Le.value,b=Me.value,{disabledMethod:oe,isCrossDrag:ie,isPeerDrag:ne}=y,se=Ue.value,de=Te.value,ue=Se.value.selectCellToRow,{type:ce,cellRender:ve,editRender:pe,align:ge,showOverflow:C,className:xe,treeNode:he,slots:me}=n,le=le.verticalAlign,J=J.actived,E=re.height,D=n.id,O=pe||ve,O=O?renderer.get(O.name):null,we=O?O.tableCellClassName||O.cellClassName:null,_e=O?O.tableCellStyle||O.cellStyle:"";let R=f.showAll;var f=Ee.getColumnIndex(n),I=Ee.getVTColumnIndex(n),fe=(0,_utils.isEnableConf)(pe);let T=t?n.fixed!==t:n.fixed&&x;x=_xeUtils.default.isUndefined(C)||_xeUtils.default.isNull(C)?c:C,C="ellipsis"===x;let S="title"===x,M=!0===x||"tooltip"===x;x=c||S||M||C;let ye;var $={},B=B[l],ge=ge||(O?O.tableCellAlign:"")||H,O=m[l+":"+D],H=p&&_.showMessage&&("default"===_.message?u||1<g.length:"inline"===_.message),m={colid:D};let k={$table:Ee,$grid:Ee.xegrid,isEdit:!1,seq:e,rowid:l,row:a,rowIndex:r,$rowIndex:o,_rowIndex:i,column:n,columnIndex:f,$columnIndex:s,_columnIndex:I,fixed:t,type:renderType,isHidden:!!T,level:U,visibleData:w,data:g,items:d},A=!1,be=!1;if((A=re.drag?"row"===y.trigger||n.dragSort&&"cell"===y.trigger:A)&&(be=!(!oe||!oe(k))),(S||M||R||V)&&($.onMouseenter=e=>{Fe()||(S?(0,_dom.updateCellTitle)(e.currentTarget,n):(M||R)&&Ee.triggerBodyTooltipEvent(e,k),Ee.dispatchEvent("cell-mouseenter",Object.assign({cell:e.currentTarget},k),e))}),(M||R||V)&&($.onMouseleave=e=>{Fe()||((M||R)&&Ee.handleTargetLeaveEvent(e),Ee.dispatchEvent("cell-mouseleave",Object.assign({cell:e.currentTarget},k),e))}),(A||te.range||P)&&($.onMousedown=e=>{Ee.triggerCellMousedownEvent(e,k)}),A&&($.onMouseup=Ee.triggerCellMouseupEvent),$.onClick=e=>{Ee.triggerCellClickEvent(e,k)},$.onDblclick=e=>{Ee.triggerCellDblclickEvent(e,k)},h.length){p=(0,_util.mergeBodyMethod)(h,i,I);if(p){var{rowspan:u,colspan:e}=p;if(!u||!e)return null;1<u&&(m.rowspan=u),1<e&&(m.colspan=e)}}else if(W){var{rowspan:l=1,colspan:r=1}=W(k)||{};if(!l||!r)return null;1<l&&(m.rowspan=l),1<r&&(m.colspan=r)}!(T=T&&h&&(1<m.colspan||1<m.rowspan)?!1:T)&&K&&(pe||ve)&&(ae.showStatus||ae.showUpdateStatus)&&(ye=Ee.isUpdateByRow(a,n.field));o=[];T&&c&&Q?o.push((0,_vue.h)("div",{class:["vxe-cell",{"c--title":S,"c--tooltip":M,"c--ellipsis":C}],style:{maxHeight:x&&(E||b)?`${E||b}px`:""}})):(o.push(...Ne(k),(0,_vue.h)("div",{class:["vxe-cell",{"c--title":S,"c--tooltip":M,"c--ellipsis":C}],style:{maxHeight:x&&(E||b)?`${E||b}px`:""},title:S?Ee.getCellLabel(a,n):null},n.renderCell(k))),H&&O&&(f=O.rule,t=me?me.valid:null,w=Object.assign(Object.assign(Object.assign({},k),O),{rule:O}),o.push((0,_vue.h)("div",{class:["vxe-cell--valid-error-tip",(0,_dom.getPropClass)(_.className,w)],style:f&&f.maxWidth?{width:f.maxWidth+"px"}:null},[(0,_vue.h)("div",{class:"vxe-cell--valid-error-wrapper vxe-cell--valid-error-theme-"+(_.theme||"normal")},[t?Ee.callSlot(t,w):[(0,_vue.h)("span",{class:"vxe-cell--valid-error-msg"},O.content)]])]))));let j="";g=G?B.height:0,x?E?j=E+"px":Q||(j=`${g||b||18}px`):j=`${g||b||18}px`,P&&de.area&&ue&&((s||!0!==ue)&&ue!==n.field||o.push((0,_vue.h)("div",{class:"vxe-cell--area-status"}))),d=s===L.length-1,y=!n.resizeWidth&&("auto"===n.minWidth||"auto"===n.width);let Ce=!1;return(Y&&(i<ee.visibleStartIndex||i>ee.visibleEndIndex)||X&&!n.fixed&&(I<Z.visibleStartIndex||I>Z.visibleEndIndex))&&(Ce=!0),(0,_vue.h)("td",Object.assign(Object.assign(Object.assign({colspan:Be.value&&s===L.length-1?2:null,class:["vxe-body--column",D,{["col--"+ge]:ge,["col--vertical-"+le]:le,["col--"+ce]:ce,"col--last":d,"col--tree-node":he,"col--edit":fe,"col--ellipsis":x,"fixed--width":!y,"fixed--hidden":T,"is--drag-cell":A&&(ie||ne||!U),"is--drag-disabled":be,"col--dirty":ye,"col--active":K&&fe&&J.row===a&&(J.column===n||"row"===ae.mode),"col--valid-error":!!O,"col--current":z===n},(0,_dom.getPropClass)(we,k),(0,_dom.getPropClass)(xe,k),(0,_dom.getPropClass)(N,k)],key:F||X||Y||se.useKey||re.useKey||se.drag?D:s},m),{style:Object.assign({height:j},_xeUtils.default.isFunction(_e)?_e(k):_e,_xeUtils.default.isFunction(v)?v(k):v)}),$),Ce||q&&T?[]:o)},J=(m,w,_,f)=>{let{stripe:y,rowKey:b,highlightHoverRow:C,rowClassName:E,rowStyle:D,showOverflow:O,editConfig:R,treeConfig:I}=De,{hasFixedColumn:T,treeExpandedMaps:S,scrollXLoad:M,scrollYLoad:$,rowExpandedMaps:k,expandColumn:A,selectRadioRow:j,pendingRowMaps:q,isDragColMove:U}=Oe,L=Re.fullAllDataRowIdData,B=ke.value,F=e.value,N=u.value,H=Ie.value,W=qe.value,P=Ue.value,K=l.value,{transform:V,seqMode:z}=N,X=N.children||N.childrenField,Y=[];return _.forEach((t,a)=>{var e={};let r,o=(r=Ee.getRowIndex(t),(W.isHover||C)&&(e.onMouseenter=e=>{Fe()||Ee.triggerHoverEvent(e,{row:t,rowIndex:r})},e.onMouseleave=()=>{Fe()||Ee.clearHoverRow()}),(0,_util.getRowid)(Ee,t));var l=L[o];let i=0,n=-1,s=0;l&&(i=l.level,n=I&&V&&"increasing"===z?l._index+1:l.seq,s=l._index);var l={$table:Ee,seq:n,rowid:o,fixed:m,type:renderType,level:i,row:t,rowIndex:r,$rowIndex:a,_rowIndex:s},d=A&&!!k[o];let u=!1,c=[],v=!1;R&&(v=Ee.isInsertByRow(t)),!I||$||V||(c=t[X],u=c&&0<c.length&&!!S[o]),!W.drag||I&&!V||(e.onDragstart=Ee.handleRowDragDragstartEvent,e.onDragend=Ee.handleRowDragDragendEvent,e.onDragover=Ee.handleRowDragDragoverEvent);var p,g,x=["vxe-body--row",I?"row--level-"+i:"",{"row--stripe":y&&(s+1)%2==0,"is--new":v,"is--expand-row":d,"is--expand-tree":u,"row--new":v&&(H.showStatus||H.showInsertStatus),"row--radio":F.highlight&&Ee.eqRow(j,t),"row--checked":B.highlight&&Ee.isCheckedByCheckboxRow(t),"row--pending":!!q[o]},(0,_dom.getPropClass)(E,l)];let h=f.map((e,l)=>Q(n,o,m,w,i,t,r,a,s,e,l,f,_));Y.push(P.drag&&K.animation?(0,_vue.h)(_vue.TransitionGroup,Object.assign({name:"vxe-header--col-list"+(U?"":"-disabled"),tag:"tr",class:x,rowid:o,style:D?_xeUtils.default.isFunction(D)?D(l):D:null,key:b||M||$||W.useKey||W.drag||P.drag||I?o:a},e),{default:()=>h}):(0,_vue.h)("tr",Object.assign({class:x,rowid:o,style:D?_xeUtils.default.isFunction(D)?D(l):D:null,key:b||M||$||W.useKey||W.drag||P.drag||I?o:a},e),h)),d&&({height:x,padding:l}=G.value,d={},p=(x&&(d.height=x+"px"),I&&(d.paddingLeft=i*N.indent+30+"px"),A).showOverflow,p=_xeUtils.default.isUndefined(p)||_xeUtils.default.isNull(p)?O:p,g={$table:Ee,seq:n,column:A,fixed:m,type:renderType,level:i,row:t,rowIndex:r,$rowIndex:a,_rowIndex:s},Y.push((0,_vue.h)("tr",Object.assign({class:["vxe-body--expanded-row",{"is--padding":l}],key:"expand_"+o,style:D?_xeUtils.default.isFunction(D)?D(g):D:null},e),[(0,_vue.h)("td",{class:{"vxe-body--expanded-column":1,"fixed--hidden":m&&!T,"col--ellipsis":p},colspan:f.length},[(0,_vue.h)("div",{class:{"vxe-body--expanded-cell":1,"is--ellipsis":x},style:d},[A.renderData(g)])])]))),u&&Y.push(...J(m,w,c,f))}),Y};(0,_vue.onMounted)(()=>{(0,_vue.nextTick)(()=>{var e=S.fixedType,l=Re.elemStore,e=`${e||"main"}-body-`;l[e+"wrapper"]=q,l[e+"scroll"]=U,l[e+"table"]=L,l[e+"colgroup"]=B,l[e+"list"]=F,l[e+"xSpace"]=N,l[e+"ySpace"]=H,l[e+"emptyBlock"]=W})}),(0,_vue.onUnmounted)(()=>{var e=S.fixedType,l=Re.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=$.slots;let{fixedColumn:l,fixedType:t,tableColumn:a}=S;var{showOverflow:r,spanMethod:o,footerSpanMethod:i,mouseConfig:n}=De,{isGroup:s,tableData:d,scrollXLoad:u,scrollYLoad:c,isAllOverflow:v,isDragRowMove:p,expandColumn:g,dragRow:x,dragCol:h}=Oe,{visibleColumn:m,fullAllDataRowIdData:w,fullColumnIdData:_}=Re,f=qe.value,y=k.value,b=Te.value,C=Le.value,E=A.value,D=j.value;let O=d,R=a,I=!(u||c||r&&v)||g||o||i?!1:!0;t&&(R=m,I)&&(R=l||[]),c&&x&&2<O.length&&(d=w[(0,_util.getRowid)(Ee,x)])&&(r=d._index,v=O[0],g=O[O.length-1],o=w[(0,_util.getRowid)(Ee,v)],i=w[(0,_util.getRowid)(Ee,g)],o)&&i&&(m=o._index,d=i._index,r<m?O=[x].concat(O):d<r&&(O=O.concat([x]))),t||s||u&&h&&2<R.length&&(v=_[h.id])&&(w=v._index,g=R[0],o=R[R.length-1],i=_[g.id],m=_[o.id],i)&&m&&(d=i._index,r=m._index,w<d?R=[h].concat(R):r<w&&(R=R.concat([h])));let T;x=e?e.empty:null,T=x?Ee.callSlot(x,{$table:Ee,$grid:Ee.xegrid}):(u=(s=y.name?renderer.get(y.name):null)?s.renderTableEmpty||s.renderTableEmptyView||s.renderEmpty:null)?(0,_vn.getSlotVNs)(u(y,{$table:Ee})):De.emptyText||getI18n("vxe.table.emptyText"),v={onScroll(e){Ee.triggerBodyScrollEvent(e,t)}};return(c||E||D)&&(v.onWheel=Ee.triggerBodyWheelEvent),(0,_vue.h)("div",{ref:q,class:["vxe-table--body-wrapper",t?`fixed-${t}--wrapper`:"body--wrapper"],xid:M},[(0,_vue.h)("div",Object.assign({ref:U,class:"vxe-table--body-inner-wrapper"},v),[t?renderEmptyElement(Ee):(0,_vue.h)("div",{ref:N,class:"vxe-body--x-space"}),(0,_vue.h)("div",{ref:H,class:"vxe-body--y-space"}),(0,_vue.h)("table",{ref:L,class:"vxe-table--body",xid:M,cellspacing:0,cellpadding:0,border:0},[(0,_vue.h)("colgroup",{ref:B},R.map((e,l)=>(0,_vue.h)("col",{name:e.id,key:l})).concat(Be.value?(0,_vue.h)("col",{name:"col_setting"}):[])),f.drag&&C.animation?(0,_vue.h)(_vue.TransitionGroup,{ref:F,name:"vxe-body--row-list"+(p?"":"-disabled"),tag:"tbody"},{default:()=>J(t,I,O,R)}):(0,_vue.h)("tbody",{ref:F},J(t,I,O,R))]),(0,_vue.h)("div",{class:"vxe-table--checkbox-range"}),n&&b.area?(0,_vue.h)("div",{class:"vxe-table--cell-area"},[(0,_vue.h)("span",{class:"vxe-table--cell-main-area"},b.extension?[(0,_vue.h)("span",{class:"vxe-table--cell-main-area-btn",onMousedown(e){Ee.triggerCellAreaExtendMousedownEvent&&Ee.triggerCellAreaExtendMousedownEvent(e,{$table:Ee,fixed:t,type:renderType})}})]:[]),(0,_vue.h)("span",{class:"vxe-table--cell-copy-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"})]):renderEmptyElement(Ee),t?renderEmptyElement(Ee):(0,_vue.h)("div",{class:"vxe-table--empty-block",ref:W},[(0,_vue.h)("div",{class:"vxe-table--empty-content"},T)]),(g={position:"relative",zIndex:9},S.fixedType&&Object.assign(g,{visibility:"hidden",zIndex:-1,pointerEvents:"none",backgroundColor:"inhert"}),Ee.context.slots.bodyAppend?(0,_vue.h)("div",{class:"vxe-table--boyd-append-wrapper",style:g},Ee.callSlot(Ee.context.slots.bodyAppend,{})):null)])])}}});