vxe-table-ro-test/lib/table/src/header.min.js

一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟树、列拖拽，懒加载、快捷菜单、数据校验、树形结构、打印、导入导出、自定义模板、渲染器、JSON 配置式...

"use strict";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");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const renderer=_ui.VxeUI["renderer"],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(H){const I=(0,_vue.inject)("$xeTable",{}),{xID:s,props:d,reactData:U,internalData:k}=I,{refElem:M,refTableBody:z,refLeftContainer:R,refRightContainer:S,refCellResizeBar:$}=I.getRefMaps(),c=I.getComputeMaps()["computeColumnOpts"],f=(0,_vue.ref)([]),A=(0,_vue.ref)(),p=(0,_vue.ref)(),v=(0,_vue.ref)(),m=(0,_vue.ref)(),h=(0,_vue.ref)(),x=(0,_vue.ref)(),t=()=>{var e=U["isGroup"];f.value=e?(0,_util.convertHeaderColumnToRows)(H.tableGroupColumn):[]},O=(e,t)=>{const r=t["column"],a=H["fixedType"];var l=z.value;const n=R.value,o=S.value,i=$.value,u=e["clientX"];var s=A.value,d=e.target;const c=t.cell=d.parentNode;let f=0;const p=l.$el;l=(0,_dom.getOffsetPos)(d,s),s=d.clientWidth,d=Math.floor(s/2);const v=(0,_util.getColReMinWidth)(t)-d;let m=l.left-c.clientWidth+s+v,h=l.left+d;const x=document.onmousemove,_=document.onmouseup,g="left"===a,b="right"===a,C=M.value;let y=0;if(g||b){var w=g?"nextElementSibling":"previousElementSibling";let e=c[w];for(;e&&!(0,_dom.hasClass)(e,"fixed--hidden");)(0,_dom.hasClass)(e,"col--group")||(y+=e.offsetWidth),e=e[w];b&&o&&(h=o.offsetLeft+y)}function T(e){e.stopPropagation(),e.preventDefault(),e=e.clientX-u;let l=h+e;e=a?0:p.scrollLeft,g?l=Math.min(l,(o?o.offsetLeft:p.clientWidth)-y-v):b?(m=(n?n.clientWidth:0)+y+v,l=Math.min(l,h+c.clientWidth-v)):m=Math.max(p.scrollLeft,m),f=Math.max(l,m),i.style.left=f-e+"px"}U._isResize=!0,(0,_dom.addClass)(C,"drag--resize"),i.style.display="block",document.onmousemove=T,document.onmouseup=function(e){document.onmousemove=x,document.onmouseup=_;const l=r.renderWidth+(b?h-f:f-h);r.resizeWidth=l,i.style.display="none",U._isResize=!1,k._lastResizeTime=Date.now(),I.analyColumnWidth(),I.recalculate(!0).then(()=>{I.saveCustomStore("update:visible"),I.updateCellAreas(),I.dispatchEvent("resizable-change",Object.assign(Object.assign({},t),{resizeWidth:l}),e),setTimeout(()=>I.recalculate(!0),300)}),(0,_dom.removeClass)(C,"drag--resize")},T(e),I.closeMenu&&I.closeMenu()};(0,_vue.watch)(()=>H.tableColumn,t),(0,_vue.onMounted)(()=>{(0,_vue.nextTick)(()=>{var e=H["fixedType"],l=I["internalData"],l=l["elemStore"],e=`${e||"main"}-header-`;l[e+"wrapper"]=A,l[e+"table"]=p,l[e+"colgroup"]=v,l[e+"list"]=m,l[e+"xSpace"]=h,l[e+"repair"]=x,t()})}),(0,_vue.onUnmounted)(()=>{var e=H["fixedType"],l=I["internalData"],l=l["elemStore"],e=`${e||"main"}-header-`;l[e+"wrapper"]=null,l[e+"table"]=null,l[e+"colgroup"]=null,l[e+"list"]=null,l[e+"xSpace"]=null,l[e+"repair"]=null});return()=>{const{fixedType:_,fixedColumn:e,tableColumn:l}=H,{resizable:g,border:b,columnKey:C,headerRowClassName:t,headerCellClassName:y,headerRowStyle:r,headerCellStyle:w,showHeaderOverflow:T,headerAlign:M,align:z,mouseConfig:R}=d,{isGroup:a,currentColumn:S,scrollXLoad:$,overflowX:D,scrollbarWidth:n}=U;var o=k["visibleColumn"];const W=c.value;let i=f.value,u=l;return a?u=o:(_&&($||T)&&(u=e),i=[u]),(0,_vue.h)("div",{ref:A,class:["vxe-table--header-wrapper",_?`fixed-${_}--wrapper`:"body--wrapper"],xid:s},[_?(0,_vue.createCommentVNode)():(0,_vue.h)("div",{ref:h,class:"vxe-body--x-space"}),(0,_vue.h)("table",{ref:p,class:"vxe-table--header",xid:s,cellspacing:0,cellpadding:0,border:0},[(0,_vue.h)("colgroup",{ref:v},u.map((e,l)=>(0,_vue.h)("col",{name:e.id,key:l})).concat(n?[(0,_vue.h)("col",{name:"col_gutter"})]:[])),(0,_vue.h)("thead",{ref:m},i.map((h,x)=>(0,_vue.h)("tr",{class:["vxe-header--row",t?_xeUtils.default.isFunction(t)?t({$table:I,$rowIndex:x,fixed:_,type:renderType}):t:""],style:r?_xeUtils.default.isFunction(r)?r({$table:I,$rowIndex:x,fixed:_,type:renderType}):r:null},h.map((e,l)=>{var{type:t,showHeaderOverflow:r,headerAlign:a,align:n,headerClassName:o,editRender:i,cellRender:u}=e,s=e.id,i=i||u,u=i?renderer.get(i.name):null,i=e.children&&e.children.length,d=_?e.fixed!==_&&!i:!!e.fixed&&D,r=_xeUtils.default.eqNull(r)?T:r,a=a||(u?u.tableHeaderCellAlign:"")||M||n||(u?u.tableCellAlign:"")||z;let c="ellipsis"===r;n="title"===r,u=!0===r||"tooltip"===r;let f=n||u||c;var r=e.filters&&e.filters.some(e=>e.checked),p=I.getColumnIndex(e),v=I.getVTColumnIndex(e);const m={$table:I,$grid:I.xegrid,$rowIndex:x,column:e,columnIndex:p,$columnIndex:l,_columnIndex:v,fixed:_,type:renderType,isHidden:d,hasFilter:r};p={onClick:e=>I.triggerHeaderCellClickEvent(e,m),onDblclick:e=>I.triggerHeaderCellDblclickEvent(e,m)};return $&&!f&&(c=f=!0),R&&(p.onMousedown=e=>I.triggerHeaderCellMousedownEvent(e,m)),(0,_vue.h)("th",Object.assign(Object.assign({class:["vxe-header--column",s,{["col--"+a]:a,["col--"+t]:t,"col--last":l===h.length-1,"col--fixed":e.fixed,"col--group":i,"col--ellipsis":f,"fixed--hidden":d,"is--sortable":e.sortable,"col--filter":!!e.filters,"is--filter-active":r,"col--current":S===e},o?_xeUtils.default.isFunction(o)?o(m):o:"",y?_xeUtils.default.isFunction(y)?y(m):y:""],colid:s,colspan:1<e.colSpan?e.colSpan:null,rowspan:1<e.rowSpan?e.rowSpan:null,style:w?_xeUtils.default.isFunction(w)?w(m):w:null},p),{key:C||W.useKey||i?s:l}),[(0,_vue.h)("div",{class:["vxe-cell",{"c--title":n,"c--tooltip":u,"c--ellipsis":c}]},e.renderHeader(m)),d||i||!(_xeUtils.default.isBoolean(e.resizable)?e.resizable:W.resizable||g)?null:(0,_vue.h)("div",{class:["vxe-resizable",{"is--line":!b||"none"===b}],onMousedown:e=>O(e,m)})])}).concat(n?[(0,_vue.h)("th",{class:"vxe-header--gutter col--gutter"})]:[]))))]),(0,_vue.h)("div",{ref:x,class:"vxe-table--header-border-line"})])}}});