vxe-table
Version:
一个基于 vue 的 PC 端表格组件,支持增删改查、虚拟树、拖拽排序,懒加载、快捷菜单、数据校验、树形结构、打印、导入导出、自定义模板、渲染器、JSON 配置式...
1 lines • 6.77 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");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}let{renderer,renderEmptyElement}=_ui.VxeUI,renderType="header";var _default=exports.default=(0,_vue.defineComponent)({name:"VxeTableHeader",props:{tableData:Array,tableColumn:Array,tableGroupColumn:Array,fixedColumn:Array,fixedType:{type:String,default:null}},setup(m){let le=(0,_vue.inject)("$xeTable",{}),{xID:b,props:C,reactData:y,internalData:w}=le,{computeColumnOpts:D,computeColumnDragOpts:ae,computeCellOpts:l,computeMouseOpts:H,computeHeaderCellOpts:a,computeDefaultRowHeight:r,computeVirtualXOpts:t}=le.getComputeMaps(),E=(0,_vue.ref)([]),S=(0,_vue.ref)(),M=(0,_vue.ref)(),O=(0,_vue.ref)(),T=(0,_vue.ref)(),U=(0,_vue.ref)(),k=(0,_vue.ref)(),i=(0,_vue.ref)(),n=()=>{var e=y.isGroup;E.value=e?(0,_util.convertHeaderColumnToRows)(m.tableGroupColumn):[]},I=(H,E,S,M)=>{let O=le.xeGrid,T=m.fixedType,{resizable:U,columnKey:k,headerCellClassName:I,headerCellStyle:z,showHeaderOverflow:R,headerAlign:$,align:F,mouseConfig:A}=C,{currentColumn:q,dragCol:G,scrollXLoad:L,scrollYLoad:X,overflowX:j}=y,{fullColumnIdData:N,scrollXStore:V}=w,W=t.value,B=D.value,K=ae.value,P=l.value;var e=r.value;let Y=a.value,J=(0,_util.getCellHeight)(Y.height||P.height)||e,{disabledMethod:Q,isCrossDrag:Z,isPeerDrag:ee}=K;return S.map((e,l)=>{var{type:a,showHeaderOverflow:r,headerAlign:t,align:i,filters:n,headerClassName:o,editRender:d,cellRender:u}=e,s=e.id,c=N[s]||{},d=d||u,u=d?renderer.get(d.name):null,d=e.children&&e.children.length,v=T?e.fixed!==T&&!d:!!e.fixed&&j,p=(_xeUtils.default.isBoolean(Y.padding)?Y:P).padding,r=_xeUtils.default.eqNull(r)?R:r,t=t||(u?u.tableHeaderCellAlign:"")||$||i||(u?u.tableCellAlign:"")||F;let x="ellipsis"===r;i="title"===r,u=!0===r||"tooltip"===r;let h=i||u||x,g=!1,f=null;n&&(f=n[0],g=n.some(e=>e.checked));r=c.index,c=c._index;let _={$table:le,$grid:O,$rowIndex:M,column:e,columnIndex:r,$columnIndex:l,_columnIndex:c,firstFilterOption:f,fixed:T,type:renderType,isHidden:v,hasFilter:g};var r={colid:s,colspan:1<e.colSpan?e.colSpan:null,rowspan:1<e.rowSpan?e.rowSpan:null},m={onClick:e=>le.triggerHeaderCellClickEvent(e,_),onDblclick:e=>le.triggerHeaderCellDblclickEvent(e,_)},b=(L&&!h&&(x=h=!0),B.drag&&"cell"===K.trigger);let C=!1;b&&(C=!(!Q||!Q(_))),(A||b)&&(m.onMousedown=e=>le.triggerHeaderCellMousedownEvent(e,_)),B.drag&&(m.onDragstart=le.handleHeaderCellDragDragstartEvent,m.onDragend=le.handleHeaderCellDragDragendEvent,m.onDragover=le.handleHeaderCellDragDragoverEvent,b)&&(m.onMouseup=le.handleHeaderCellDragMouseupEvent);var b=l===S.length-1,y=_xeUtils.default.isBoolean(e.resizable)?e.resizable:B.resizable||U,w=!e.resizeWidth&&("auto"===e.minWidth||"auto"===e.width);let D=!1;H||G&&G.id===s||L&&!e.fixed&&!W.immediate&&(c<V.visibleStartIndex-V.preloadSize||c>V.visibleEndIndex+V.preloadSize)&&(D=!0);c={};return h?c.height=J+"px":c.minHeight=J+"px",(0,_vue.h)("th",Object.assign(Object.assign(Object.assign({class:["vxe-header--column",s,{["col--"+t]:t,["col--"+a]:a,"col--last":b,"col--fixed":e.fixed,"col--group":d,"col--ellipsis":h,"fixed--width":!w,"fixed--hidden":v,"is--padding":p,"is--sortable":e.sortable,"col--filter":!!n,"is--filter-active":g,"is--drag-active":B.drag&&!e.fixed&&!C&&(Z||ee||!e.parentId),"is--drag-disabled":B.drag&&C,"col--current":q===e},o?_xeUtils.default.isFunction(o)?o(_):o:"",I?_xeUtils.default.isFunction(I)?I(_):I:""],style:z?_xeUtils.default.isFunction(z)?z(_):z:null},r),m),{key:k||L||X||B.useKey||B.drag||d?s:l}),[(0,_vue.h)("div",{class:["vxe-cell",{"c--title":i,"c--tooltip":u,"c--ellipsis":x}],style:c},D||E&&v?[]:[(0,_vue.h)("div",{colid:s,class:"vxe-cell--wrapper"},e.renderHeader(_))]),!v&&y?(0,_vue.h)("div",{class:"vxe-cell--col-resizable",onMousedown:e=>le.handleColResizeMousedownEvent(e,T,_),onDblclick:e=>le.handleColResizeDblclickEvent(e,_)}):renderEmptyElement(le)])})};return(0,_vue.watch)(()=>m.tableColumn,n),(0,_vue.onMounted)(()=>{(0,_vue.nextTick)(()=>{var e=m.fixedType,l=le.internalData,l=l.elemStore,e=`${e||"main"}-header-`;l[e+"wrapper"]=S,l[e+"scroll"]=M,l[e+"table"]=O,l[e+"colgroup"]=T,l[e+"list"]=U,l[e+"xSpace"]=k,l[e+"repair"]=i,n()})}),(0,_vue.onUnmounted)(()=>{var e=m.fixedType,l=le.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}=m;var{mouseConfig:r,showHeaderOverflow:t,spanMethod:i,footerSpanMethod:n}=C,{isGroup:o,isColLoading:d,overflowX:u,scrollXLoad:s,scrollYLoad:c,dragCol:v}=y,{visibleColumn:p,fullColumnIdData:x}=w,h=H.value;let g=E.value,f=a,_=!1;return o?f=p:(!(s||c||t)||i||n||(_=!0),d||!l&&u||(f=p),l&&_&&(f=e||[]),g=[f]),l||o||s&&v&&2<f.length&&(c=x[v.id])&&(t=c._index,i=f[0],n=f[f.length-1],d=x[i.id],u=x[n.id],d)&&u&&(p=d._index,s=u._index,t<p?(f=[v].concat(f),g=[[v].concat(g[0])].concat(g.slice(1))):s<t&&(f=f.concat([v]),g=[g[0].concat([v])].concat(g.slice(1)))),(0,_vue.h)("div",{ref:S,class:["vxe-table--header-wrapper",l?`fixed-${l}--wrapper`:"body--wrapper"],xid:b},[(0,_vue.h)("div",{ref:M,class:"vxe-table--header-inner-wrapper",onScroll(e){le.triggerHeaderScrollEvent(e,l)}},[l?renderEmptyElement(le):(0,_vue.h)("div",{ref:k,class:"vxe-body--x-space"}),(0,_vue.h)("table",{ref:O,class:"vxe-table--header",xid:b,cellspacing:0,cellpadding:0,border:0},[(0,_vue.h)("colgroup",{ref:T},f.map((e,l)=>(0,_vue.h)("col",{name:e.id,key:l,style:{width:e.renderWidth+"px"}}))),(0,_vue.h)("thead",{ref:U},((r,t,e)=>{let i=m.fixedType,{headerRowClassName:n,headerRowStyle:o}=C,{isColLoading:d,isDragColMove:u}=y,s=D.value,c=ae.value;return e.map((e,l)=>{var a={$table:le,$rowIndex:l,fixed:i,type:renderType};return!d&&s.drag&&c.animation?(0,_vue.h)(_vue.TransitionGroup,{key:l,name:"vxe-header--col-list"+(u?"":"-disabled"),tag:"tr",class:["vxe-header--row",n?_xeUtils.default.isFunction(n)?n(a):n:""],style:o?_xeUtils.default.isFunction(o)?o(a):o:null},{default:()=>I(r,t,e,l)}):(0,_vue.h)("tr",{key:l,class:["vxe-header--row",n?_xeUtils.default.isFunction(n)?n(a):n:""],style:o?_xeUtils.default.isFunction(o)?o(a):o:null},I(r,t,e,l))})})(o,_,g))]),r&&h.area?(0,_vue.h)("div",{class:"vxe-table--cell-area"},[(0,_vue.h)("span",{class:"vxe-table--cell-main-area"}),(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"}),(0,_vue.h)("span",{class:"vxe-table--cell-col-status-area"})]):renderEmptyElement(le)])])}}});