vxe-table 3.11.38 → 3.12.0-beta.0

package/lib/table/src/header.js

@@ -11,7 +11,8 @@ var _dom = require("../../ui/src/dom");
 var _util = require("./util");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const {
-  renderer
+  renderer,
+  renderEmptyElement
 } = _ui.VxeUI;
 const cellType = 'header';
 const renderRows = (h, _vm, cols, $rowIndex) => {
@@ -124,6 +125,7 @@ const renderRows = (h, _vm, cols, $rowIndex) => {
         'is--sortable': column.sortable,
         'col--filter': !!column.filters,
         'is--filter-active': hasFilter,
+        'is--drag-active': !column.fixed && !isDisabledDrag,
         'is--drag-disabled': isDisabledDrag,
         'col--current': currentColumn === column
       }, (0, _utils.getClass)(headerClassName, params), (0, _utils.getClass)(headerCellClassName, params)],
@@ -252,41 +254,92 @@ var _default = exports.default = {
     elemStore[`${prefix}repair`] = null;
   },
   render(h) {
+    const props = this;
+    const $xeTable = this.$parent;
+    const tableProps = $xeTable;
+    const tableReactData = $xeTable;
+    const tableInternalData = $xeTable;
+    const {
+      tId
+    } = $xeTable;
     const {
-      _e,
-      $parent: $xetable,
       fixedType,
-      headerColumn,
-      tableColumn,
-      fixedColumn
+      fixedColumn,
+      tableColumn
+    } = props;
+    const {
+      headerColumn
     } = this;
     const {
-      tId,
-      isGroup,
-      visibleColumn,
       showHeaderOverflow: allColumnHeaderOverflow,
+      spanMethod,
+      footerSpanMethod
+    } = tableProps;
+    const {
+      isGroup,
       scrollXLoad,
-      scrollbarWidth
-    } = $xetable;
-    let headerGroups = headerColumn;
+      scrollYLoad,
+      scrollbarWidth,
+      dragCol
+    } = tableReactData;
+    const {
+      visibleColumn,
+      fullColumnIdData
+    } = tableInternalData;
+    let renderHeaderList = headerColumn;
     let renderColumnList = tableColumn;
     if (isGroup) {
       renderColumnList = visibleColumn;
     } else {
-      // 如果是使用优化模式
       if (fixedType) {
-        if (scrollXLoad || allColumnHeaderOverflow) {
-          renderColumnList = fixedColumn;
+        // 如果是使用优化模式
+        if (scrollXLoad || scrollYLoad || allColumnHeaderOverflow) {
+          // 如果不支持优化模式
+          if (spanMethod || footerSpanMethod) {
+            renderColumnList = visibleColumn;
+          } else {
+            renderColumnList = fixedColumn || [];
+          }
+        } else {
+          renderColumnList = visibleColumn;
+        }
+      }
+      renderHeaderList = [renderColumnList];
+    }
+    if (!fixedType) {
+      // 列拖拽
+      if (scrollXLoad && dragCol) {
+        if (renderColumnList.length > 2) {
+          const dCowRest = fullColumnIdData[dragCol.id];
+          if (dCowRest) {
+            const dcIndex = dCowRest._index;
+            const firstCol = renderColumnList[0];
+            const lastCol = renderColumnList[renderColumnList.length - 1];
+            const firstColRest = fullColumnIdData[firstCol.id];
+            const lastColRest = fullColumnIdData[lastCol.id];
+            if (firstColRest && lastColRest) {
+              const fcIndex = firstColRest._index;
+              const lcIndex = lastColRest._index;
+              console.log(dragCol.id, dcIndex, fcIndex, lcIndex, renderColumnList.length);
+              if (dcIndex < fcIndex) {
+                renderColumnList = [dragCol].concat(renderColumnList);
+                renderHeaderList = [[dragCol].concat(renderHeaderList[0])].concat(renderHeaderList.slice(1));
+              } else if (dcIndex > lcIndex) {
+                renderColumnList = renderColumnList.concat([dragCol]);
+                renderHeaderList = [renderHeaderList[0].concat([dragCol])].concat(renderHeaderList.slice(1));
+              }
+              console.log(renderColumnList.length);
+            }
+          }
         }
       }
-      headerGroups = [renderColumnList];
     }
     return h('div', {
       class: ['vxe-table--header-wrapper', fixedType ? `fixed-${fixedType}--wrapper` : 'body--wrapper'],
       attrs: {
         xid: tId
       }
-    }, [fixedType ? _e() : h('div', {
+    }, [fixedType ? renderEmptyElement($xeTable) : h('div', {
       class: 'vxe-body--x-space',
       ref: 'xSpace'
     }), h('table', {
@@ -321,7 +374,7 @@ var _default = exports.default = {
      */
     h('thead', {
       ref: 'thead'
-    }, renderHeads(h, this, headerGroups))]),
+    }, renderHeads(h, this, renderHeaderList))]),
     /**
      * 其他
      */

package/lib/table/src/header.min.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_utils=require("../../ui/src/utils"),_dom=require("../../ui/src/dom"),_util=require("./util");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}let renderer=_ui.VxeUI.renderer,cellType="header",renderRows=(v,C,b,y)=>{let _=C.$parent,w=_.xegrid,$=C.fixedType,{resizable:z,border:W,columnKey:H,headerCellClassName:M,headerCellStyle:D,showHeaderOverflow:R,headerAlign:S,align:T,currentColumn:O,scrollXLoad:k,scrollYLoad:E,overflowX:U,scrollbarWidth:e,mouseConfig:A,columnOpts:I}=_,q=_.computeColumnDragOpts,L=q.disabledMethod;return b.map((e,l)=>{var{type:t,showHeaderOverflow:r,headerAlign:a,align:i,headerClassName:o,editRender:n,cellRender:d}=e,s=e.id,n=n||d,d=n?renderer.get(n.name):null,n=e.children&&e.children.length,u=$?e.fixed!==$&&!n:e.fixed&&U,r=_xeUtils.default.isUndefined(r)||_xeUtils.default.isNull(r)?R:r,a=a||(d?d.tableHeaderCellAlign:"")||S||i||(d?d.tableCellAlign:"")||T;let c="ellipsis"===r;i="title"===r,d=!0===r||"tooltip"===r;let p=i||d||c;var r=e.filters&&e.filters.some(e=>e.checked),h=_.getColumnIndex(e),m=_.getVTColumnIndex(e);let f={$table:_,$grid:w,$rowIndex:y,column:e,columnIndex:h,$columnIndex:l,_columnIndex:m,fixed:$,type:cellType,isHidden:u,hasFilter:r};var h={colid:s,colspan:1<e.colSpan?e.colSpan:null,rowspan:1<e.rowSpan?e.rowSpan:null},m={click:e=>_.triggerHeaderCellClickEvent(e,f),dblclick:e=>_.triggerHeaderCellDblclickEvent(e,f)},g=(k&&!p&&(c=p=!0),I.drag&&"cell"===q.trigger);let x=!1;g&&(x=!(!L||!L(f))),(A||g)&&(m.mousedown=e=>_.triggerHeaderCellMousedownEvent(e,f)),I.drag&&(m.dragstart=_.handleHeaderCellDragDragstartEvent,m.dragend=_.handleHeaderCellDragDragendEvent,m.dragover=_.handleHeaderCellDragDragoverEvent,g)&&(m.mouseup=_.handleHeaderCellDragMouseupEvent);g=!e.resizeWidth&&("auto"===e.minWidth||"auto"===e.width);return v("th",{class:["vxe-header--column",s,{["col--"+a]:a,["col--"+t]:t,"col--last":l===b.length-1,"col--fixed":e.fixed,"col--group":n,"col--ellipsis":p,"fixed--width":!g,"fixed--hidden":u,"is--sortable":e.sortable,"col--filter":!!e.filters,"is--filter-active":r,"is--drag-disabled":x,"col--current":O===e},(0,_utils.getClass)(o,f),(0,_utils.getClass)(M,f)],attrs:h,style:D?_xeUtils.default.isFunction(D)?D(f):D:null,on:m,key:H||k||E||I.useKey||I.drag||n?s:l},[v("div",{class:["vxe-cell",{"c--title":i,"c--tooltip":d,"c--ellipsis":c}]},e.renderHeader(v,f)),u||n||!(_xeUtils.default.isBoolean(e.resizable)?e.resizable:I.resizable||z)?null:v("div",{class:["vxe-resizable",{"is--line":!W||"none"===W}],on:{mousedown:e=>C.resizeMousedown(e,f)}})])}).concat(e?[v("th",{key:"gr"+y,class:"vxe-header--gutter col--gutter"})]:[])};function renderHeads(r,a,e){let i=a.$parent;var l=i;let o=a.fixedType,n=i.computeColumnOpts,d=i.computeColumnDragOpts,{headerRowClassName:s,headerRowStyle:u}=l,c=i.isDragColMove;return e.map((e,l)=>{var t={$table:i,$rowIndex:l,fixed:o,type:cellType};return n.drag&&d.animation?r("transition-group",{key:l,props:{tag:"tr",name:"vxe-header--col-list"+(c?"":"-disabled"),class:["vxe-header--row",s?_xeUtils.default.isFunction(s)?s(t):s:""],style:u?_xeUtils.default.isFunction(u)?u(t):u:null}},renderRows(r,a,e,l)):r("tr",{key:l,class:["vxe-header--row",s?_xeUtils.default.isFunction(s)?s(t):s:""],style:u?_xeUtils.default.isFunction(u)?u(t):u:null},renderRows(r,a,e,l))})}var _default=exports.default={name:"VxeTableHeader",props:{tableData:Array,tableColumn:Array,tableGroupColumn:Array,fixedColumn:Array,size:String,fixedType:String},data(){return{headerColumn:[]}},watch:{tableColumn(){this.uploadColumn()}},created(){this.uploadColumn()},mounted(){var{$parent:e,$el:l,$refs:t,fixedType:r}=this,e=e.elemStore,r=`${r||"main"}-header-`;e[r+"wrapper"]=l,e[r+"table"]=t.table,e[r+"colgroup"]=t.colgroup,e[r+"list"]=t.thead,e[r+"xSpace"]=t.xSpace,e[r+"repair"]=t.repair},destroyed(){var{$parent:e,fixedType:l}=this,e=e.elemStore,l=`${l||"main"}-header-`;e[l+"wrapper"]=null,e[l+"table"]=null,e[l+"colgroup"]=null,e[l+"list"]=null,e[l+"xSpace"]=null,e[l+"repair"]=null},render(t){var{_e:e,$parent:l,fixedType:r,headerColumn:a,tableColumn:i,fixedColumn:o}=this,{tId:l,isGroup:n,visibleColumn:d,showHeaderOverflow:s,scrollXLoad:u,scrollbarWidth:c}=l;let p=a,h=i;return n?h=d:(r&&(u||s)&&(h=o),p=[h]),t("div",{class:["vxe-table--header-wrapper",r?`fixed-${r}--wrapper`:"body--wrapper"],attrs:{xid:l}},[r?e():t("div",{class:"vxe-body--x-space",ref:"xSpace"}),t("table",{class:"vxe-table--header",attrs:{xid:l,cellspacing:0,cellpadding:0,border:0},ref:"table"},[t("colgroup",{ref:"colgroup"},h.map((e,l)=>t("col",{attrs:{name:e.id},key:l})).concat(c?[t("col",{attrs:{name:"col_gutter"}})]:[])),t("thead",{ref:"thead"},renderHeads(t,this,p))]),t("div",{class:"vxe-table--header-border-line",ref:"repair"})])},methods:{uploadColumn(){var e=this.$parent;this.headerColumn=e.isGroup?(0,_util.convertHeaderColumnToRows)(this.tableGroupColumn):[]},resizeMousedown(e,t){var l=this.$parent;let d=t.column,{$parent:r,fixedType:s}=this,a=l.visibleColumn,{tableBody:i,leftContainer:u,rightContainer:c}=r.$refs,p=l.$el,h=r.$refs.resizeBar,m=r.$refs.refCellResizeTip,f=this.$el,{target:o,clientX:g}=e,x=t.cell=o.parentNode,v=l.computeResizableOpts,C=0,b=i.$el;var l=(0,_dom.getOffsetPos)(o,p),n=o.clientWidth,y=Math.floor(n/2);let _=(0,_util.getColReMinWidth)(t)-y,w=l.left-x.clientWidth+n+_,$=l.left+y,z=document.onmousemove,W=document.onmouseup,H="left"===s,M="right"===s,D=0;if(H||M){var R=H?"nextElementSibling":"previousElementSibling";let e=x[R];for(;e&&!(0,_dom.hasClass)(e,"fixed--hidden");)(0,_dom.hasClass)(e,"col--group")||(D+=e.offsetWidth),e=e[R];M&&c&&($=c.offsetLeft+D)}function S(l){l.stopPropagation(),l.preventDefault();var t=l.clientX-g;let e=$+t;if(t=s?0:b.scrollLeft,H?e=Math.min(e,(c?c.offsetLeft:b.clientWidth)-D-_):M?(w=(u?u.clientWidth:0)+D+_,e=Math.min(e,$+x.clientWidth-_)):w=Math.max(b.scrollLeft,w),t=(C=Math.max(e,w))-t,h.style.left=t+"px",v.showDragTip&&m){var r=p.clientWidth,a=f.getBoundingClientRect(),i=h.clientWidth,o=m.clientWidth,n=m.clientHeight;let e=-o;t<o+i?e=o+i-t:r<t&&(e+=r-t),m.style.left=e+"px",m.style.top=Math.min(p.clientHeight-n,Math.max(0,l.clientY-a.y-n/2))+"px",m.textContent=d.renderWidth+(M?$-C:C-$)+"px"}}r._isResize=!0,(0,_dom.addClass)(r.$el,"drag--resize"),h.style.display="block",document.onmousemove=S,document.onmouseup=function(e){document.onmousemove=z,document.onmouseup=W;let l=d.renderWidth+(M?$-C:C-$);d.resizeWidth=l,"fixed"===v.dragMode&&a.forEach(e=>{e.id===d.id||e.resizeWidth||(e.resizeWidth=e.renderWidth)}),h.style.display="none",r._isResize=!1,r._lastResizeTime=Date.now(),r.analyColumnWidth(),r.recalculate(!0).then(()=>{r.saveCustomStore("update:visible"),r.updateCellAreas(),r.emitEvent("resizable-change",Object.assign(Object.assign({},t),{resizeWidth:l}),e),setTimeout(()=>r.recalculate(!0),300)}),(0,_dom.removeClass)(r.$el,"drag--resize")},S(e),r.closeMenu()}}};
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_utils=require("../../ui/src/utils"),_dom=require("../../ui/src/dom"),_util=require("./util");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}let{renderer,renderEmptyElement}=_ui.VxeUI,cellType="header",renderRows=(v,C,b,y)=>{let _=C.$parent,w=_.xegrid,$=C.fixedType,{resizable:z,border:W,columnKey:M,headerCellClassName:H,headerCellStyle:D,showHeaderOverflow:S,headerAlign:R,align:T,currentColumn:E,scrollXLoad:O,scrollYLoad:k,overflowX:U,scrollbarWidth:e,mouseConfig:I,columnOpts:A}=_,L=_.computeColumnDragOpts,q=L.disabledMethod;return b.map((e,l)=>{var{type:t,showHeaderOverflow:r,headerAlign:a,align:i,headerClassName:o,editRender:n,cellRender:d}=e,s=e.id,n=n||d,d=n?renderer.get(n.name):null,n=e.children&&e.children.length,u=$?e.fixed!==$&&!n:e.fixed&&U,r=_xeUtils.default.isUndefined(r)||_xeUtils.default.isNull(r)?S:r,a=a||(d?d.tableHeaderCellAlign:"")||R||i||(d?d.tableCellAlign:"")||T;let c="ellipsis"===r;i="title"===r,d=!0===r||"tooltip"===r;let p=i||d||c;var r=e.filters&&e.filters.some(e=>e.checked),h=_.getColumnIndex(e),m=_.getVTColumnIndex(e);let f={$table:_,$grid:w,$rowIndex:y,column:e,columnIndex:h,$columnIndex:l,_columnIndex:m,fixed:$,type:cellType,isHidden:u,hasFilter:r};var h={colid:s,colspan:1<e.colSpan?e.colSpan:null,rowspan:1<e.rowSpan?e.rowSpan:null},m={click:e=>_.triggerHeaderCellClickEvent(e,f),dblclick:e=>_.triggerHeaderCellDblclickEvent(e,f)},g=(O&&!p&&(c=p=!0),A.drag&&"cell"===L.trigger);let x=!1;g&&(x=!(!q||!q(f))),(I||g)&&(m.mousedown=e=>_.triggerHeaderCellMousedownEvent(e,f)),A.drag&&(m.dragstart=_.handleHeaderCellDragDragstartEvent,m.dragend=_.handleHeaderCellDragDragendEvent,m.dragover=_.handleHeaderCellDragDragoverEvent,g)&&(m.mouseup=_.handleHeaderCellDragMouseupEvent);g=!e.resizeWidth&&("auto"===e.minWidth||"auto"===e.width);return v("th",{class:["vxe-header--column",s,{["col--"+a]:a,["col--"+t]:t,"col--last":l===b.length-1,"col--fixed":e.fixed,"col--group":n,"col--ellipsis":p,"fixed--width":!g,"fixed--hidden":u,"is--sortable":e.sortable,"col--filter":!!e.filters,"is--filter-active":r,"is--drag-active":!e.fixed&&!x,"is--drag-disabled":x,"col--current":E===e},(0,_utils.getClass)(o,f),(0,_utils.getClass)(H,f)],attrs:h,style:D?_xeUtils.default.isFunction(D)?D(f):D:null,on:m,key:M||O||k||A.useKey||A.drag||n?s:l},[v("div",{class:["vxe-cell",{"c--title":i,"c--tooltip":d,"c--ellipsis":c}]},e.renderHeader(v,f)),u||n||!(_xeUtils.default.isBoolean(e.resizable)?e.resizable:A.resizable||z)?null:v("div",{class:["vxe-resizable",{"is--line":!W||"none"===W}],on:{mousedown:e=>C.resizeMousedown(e,f)}})])}).concat(e?[v("th",{key:"gr"+y,class:"vxe-header--gutter col--gutter"})]:[])};function renderHeads(r,a,e){let i=a.$parent;var l=i;let o=a.fixedType,n=i.computeColumnOpts,d=i.computeColumnDragOpts,{headerRowClassName:s,headerRowStyle:u}=l,c=i.isDragColMove;return e.map((e,l)=>{var t={$table:i,$rowIndex:l,fixed:o,type:cellType};return n.drag&&d.animation?r("transition-group",{key:l,props:{tag:"tr",name:"vxe-header--col-list"+(c?"":"-disabled"),class:["vxe-header--row",s?_xeUtils.default.isFunction(s)?s(t):s:""],style:u?_xeUtils.default.isFunction(u)?u(t):u:null}},renderRows(r,a,e,l)):r("tr",{key:l,class:["vxe-header--row",s?_xeUtils.default.isFunction(s)?s(t):s:""],style:u?_xeUtils.default.isFunction(u)?u(t):u:null},renderRows(r,a,e,l))})}var _default=exports.default={name:"VxeTableHeader",props:{tableData:Array,tableColumn:Array,tableGroupColumn:Array,fixedColumn:Array,size:String,fixedType:String},data(){return{headerColumn:[]}},watch:{tableColumn(){this.uploadColumn()}},created(){this.uploadColumn()},mounted(){var{$parent:e,$el:l,$refs:t,fixedType:r}=this,e=e.elemStore,r=`${r||"main"}-header-`;e[r+"wrapper"]=l,e[r+"table"]=t.table,e[r+"colgroup"]=t.colgroup,e[r+"list"]=t.thead,e[r+"xSpace"]=t.xSpace,e[r+"repair"]=t.repair},destroyed(){var{$parent:e,fixedType:l}=this,e=e.elemStore,l=`${l||"main"}-header-`;e[l+"wrapper"]=null,e[l+"table"]=null,e[l+"colgroup"]=null,e[l+"list"]=null,e[l+"xSpace"]=null,e[l+"repair"]=null},render(t){var e=this.$parent,l=e.tId,{fixedType:r,fixedColumn:a,tableColumn:i}=this,o=this.headerColumn,{showHeaderOverflow:n,spanMethod:d,footerSpanMethod:s}=e,{isGroup:u,scrollXLoad:c,scrollYLoad:p,scrollbarWidth:h,dragCol:m}=e,{visibleColumn:f,fullColumnIdData:g}=e;let x=o,v=i;return u?v=f:(r&&(v=!(c||p||n)||d||s?f:a||[]),x=[v]),r||c&&m&&2<v.length&&(o=g[m.id])&&(i=o._index,u=v[0],p=v[v.length-1],n=g[u.id],d=g[p.id],n)&&d&&(s=n._index,f=d._index,console.log(m.id,i,s,f,v.length),i<s?(v=[m].concat(v),x=[[m].concat(x[0])].concat(x.slice(1))):f<i&&(v=v.concat([m]),x=[x[0].concat([m])].concat(x.slice(1))),console.log(v.length)),t("div",{class:["vxe-table--header-wrapper",r?`fixed-${r}--wrapper`:"body--wrapper"],attrs:{xid:l}},[r?renderEmptyElement(e):t("div",{class:"vxe-body--x-space",ref:"xSpace"}),t("table",{class:"vxe-table--header",attrs:{xid:l,cellspacing:0,cellpadding:0,border:0},ref:"table"},[t("colgroup",{ref:"colgroup"},v.map((e,l)=>t("col",{attrs:{name:e.id},key:l})).concat(h?[t("col",{attrs:{name:"col_gutter"}})]:[])),t("thead",{ref:"thead"},renderHeads(t,this,x))]),t("div",{class:"vxe-table--header-border-line",ref:"repair"})])},methods:{uploadColumn(){var e=this.$parent;this.headerColumn=e.isGroup?(0,_util.convertHeaderColumnToRows)(this.tableGroupColumn):[]},resizeMousedown(e,t){var l=this.$parent;let d=t.column,{$parent:r,fixedType:s}=this,a=l.visibleColumn,{tableBody:i,leftContainer:u,rightContainer:c}=r.$refs,p=l.$el,h=r.$refs.resizeBar,m=r.$refs.refCellResizeTip,f=this.$el,{target:o,clientX:g}=e,x=t.cell=o.parentNode,v=l.computeResizableOpts,C=0,b=i.$el;var l=(0,_dom.getOffsetPos)(o,p),n=o.clientWidth,y=Math.floor(n/2);let _=(0,_util.getColReMinWidth)(t)-y,w=l.left-x.clientWidth+n+_,$=l.left+y,z=document.onmousemove,W=document.onmouseup,M="left"===s,H="right"===s,D=0;if(M||H){var S=M?"nextElementSibling":"previousElementSibling";let e=x[S];for(;e&&!(0,_dom.hasClass)(e,"fixed--hidden");)(0,_dom.hasClass)(e,"col--group")||(D+=e.offsetWidth),e=e[S];H&&c&&($=c.offsetLeft+D)}function R(l){l.stopPropagation(),l.preventDefault();var t=l.clientX-g;let e=$+t;if(t=s?0:b.scrollLeft,M?e=Math.min(e,(c?c.offsetLeft:b.clientWidth)-D-_):H?(w=(u?u.clientWidth:0)+D+_,e=Math.min(e,$+x.clientWidth-_)):w=Math.max(b.scrollLeft,w),t=(C=Math.max(e,w))-t,h.style.left=t+"px",v.showDragTip&&m){var r=p.clientWidth,a=f.getBoundingClientRect(),i=h.clientWidth,o=m.clientWidth,n=m.clientHeight;let e=-o;t<o+i?e=o+i-t:r<t&&(e+=r-t),m.style.left=e+"px",m.style.top=Math.min(p.clientHeight-n,Math.max(0,l.clientY-a.y-n/2))+"px",m.textContent=d.renderWidth+(H?$-C:C-$)+"px"}}r._isResize=!0,(0,_dom.addClass)(r.$el,"drag--resize"),h.style.display="block",document.onmousemove=R,document.onmouseup=function(e){document.onmousemove=z,document.onmouseup=W;let l=d.renderWidth+(H?$-C:C-$);d.resizeWidth=l,"fixed"===v.dragMode&&a.forEach(e=>{e.id===d.id||e.resizeWidth||(e.resizeWidth=e.renderWidth)}),h.style.display="none",r._isResize=!1,r._lastResizeTime=Date.now(),r.analyColumnWidth(),r.recalculate(!0).then(()=>{r.saveCustomStore("update:visible"),r.updateCellAreas(),r.emitEvent("resizable-change",Object.assign(Object.assign({},t),{resizeWidth:l}),e),setTimeout(()=>r.recalculate(!0),300)}),(0,_dom.removeClass)(r.$el,"drag--resize")},R(e),r.closeMenu()}}};

package/lib/table/src/methods.js

@@ -21,8 +21,6 @@ const {
   interceptor,
   createEvent
 } = _ui.VxeUI;
-// const isWebkit = browse['-webkit'] && !browse.edge
-// const debounceScrollYDuration = browse.msie ? 80 : 20
 const customStorageKey = 'VXE_CUSTOM_STORE';
 // 获取所有的列，排除分组
 const getColumnList = columns => {
@@ -356,7 +354,7 @@ const calcCellHeight = $xeTable => {
   const {
     fullAllDataRowIdData
   } = internalData;
-  const el = $xeTable.$el;
+  const el = $xeTable.$refs.refElem;
   if (!showOverflow && (scrollXLoad || scrollYLoad) && el) {
     let paddingTop = 0;
     let paddingBottom = 0;
@@ -364,28 +362,27 @@ const calcCellHeight = $xeTable => {
     tableData.forEach(row => {
       const rowid = (0, _util.getRowid)($xeTable, row);
       const rowRest = fullAllDataRowIdData[rowid];
-      const trList = el.querySelectorAll(`.vxe-body--row[rowid="${rowid}"]`);
-      if (rowRest && trList.length) {
+      const cellList = el.querySelectorAll(`.vxe-body--row[rowid="${rowid}"]>.vxe-body--column>.vxe-cell`);
+      if (rowRest && cellList.length) {
         let height = 0;
-        for (let i = 0; i < trList.length; i++) {
-          const trEl = trList[i];
-          const tdList = trEl.children;
-          for (let j = 0; j < tdList.length; j++) {
-            const tdEl = tdList[j];
-            const cellElem = tdEl.querySelector('.vxe-cell');
-            if (!calcPadding) {
-              paddingTop = _xeUtils.default.toNumber(getComputedStyle(tdEl).paddingTop);
-              paddingBottom = _xeUtils.default.toNumber(getComputedStyle(tdEl).paddingBottom);
-              calcPadding = true;
-            }
-            let cellHeight = paddingTop + paddingBottom;
-            if (cellElem) {
-              cellHeight += cellElem.offsetHeight;
-            }
-            height = Math.max(height, cellHeight);
+        for (let i = 0; i < cellList.length; i++) {
+          const cellElem = cellList[i];
+          const tdEl = cellElem.parentElement;
+          if (!tdEl || !tdEl.clientWidth) {
+            break;
           }
+          if (!calcPadding) {
+            paddingTop = _xeUtils.default.toNumber(getComputedStyle(tdEl).paddingTop);
+            paddingBottom = _xeUtils.default.toNumber(getComputedStyle(tdEl).paddingBottom);
+            calcPadding = true;
+          }
+          let cellHeight = paddingTop + paddingBottom;
+          if (cellElem) {
+            cellHeight += cellElem.clientHeight;
+          }
+          height = Math.max(height, cellHeight);
         }
-        rowRest.height = height;
+        rowRest.height = scrollXLoad ? Math.max(rowRest.height, height) : height;
       }
     });
   }
@@ -516,15 +513,22 @@ function showDropTip($xeTable, evnt, trEl, thEl, showLine, dragPos) {
     prevDragToChild
   } = internalData;
   const wrapperRect = el.getBoundingClientRect();
+  const tableWidth = el.clientWidth;
+  const tableHeight = el.clientHeight;
   if (trEl) {
     const rdLineEl = $xeTable.$refs.refDragRowLineElem;
     if (rdLineEl) {
       if (showLine) {
         const trRect = trEl.getBoundingClientRect();
+        let trHeight = trEl.clientHeight;
+        const offsetTop = Math.max(1, trRect.y - wrapperRect.y);
+        if (offsetTop + trHeight > tableHeight - scrollbarHeight) {
+          trHeight = tableHeight - offsetTop - scrollbarHeight;
+        }
         rdLineEl.style.display = 'block';
-        rdLineEl.style.top = `${Math.max(1, trRect.y - wrapperRect.y)}px`;
-        rdLineEl.style.height = `${trRect.height}px`;
-        rdLineEl.style.width = `${wrapperRect.width - scrollbarWidth}px`;
+        rdLineEl.style.top = `${offsetTop}px`;
+        rdLineEl.style.height = `${trHeight}px`;
+        rdLineEl.style.width = `${tableWidth - scrollbarWidth}px`;
         rdLineEl.setAttribute('drag-pos', dragPos);
         rdLineEl.setAttribute('drag-to-child', prevDragToChild ? 'y' : 'n');
       } else {
@@ -535,16 +539,31 @@ function showDropTip($xeTable, evnt, trEl, thEl, showLine, dragPos) {
     const cdLineEl = $xeTable.$refs.refDragColLineElem;
     if (cdLineEl) {
       if (showLine) {
+        const leftContainerElem = $xeTable.$refs.leftContainer;
+        const leftContainerWidth = leftContainerElem ? leftContainerElem.clientWidth : 0;
+        const rightContainerElem = $xeTable.$refs.rightContainer;
+        const rightContainerWidth = rightContainerElem ? rightContainerElem.clientWidth : 0;
         const thRect = thEl.getBoundingClientRect();
+        let thWidth = thEl.clientWidth;
         const offsetTop = Math.max(0, thRect.y - wrapperRect.y);
+        const startX = leftContainerWidth;
+        let offsetLeft = thRect.x - wrapperRect.x;
+        if (offsetLeft < startX) {
+          thWidth -= startX - offsetLeft;
+          offsetLeft = startX;
+        }
+        const endX = tableWidth - rightContainerWidth - (rightContainerWidth ? 0 : scrollbarWidth);
+        if (offsetLeft + thWidth > endX) {
+          thWidth = endX - offsetLeft;
+        }
         cdLineEl.style.display = 'block';
         cdLineEl.style.top = `${offsetTop}px`;
-        cdLineEl.style.left = `${Math.max(1, thRect.x - wrapperRect.x)}px`;
-        cdLineEl.style.width = `${thRect.width}px`;
+        cdLineEl.style.left = `${offsetLeft}px`;
+        cdLineEl.style.width = `${thWidth}px`;
         if (prevDragToChild) {
           cdLineEl.style.height = `${thRect.height}px`;
         } else {
-          cdLineEl.style.height = `${wrapperRect.height - offsetTop - scrollbarHeight}px`;
+          cdLineEl.style.height = `${tableHeight - offsetTop - scrollbarHeight}px`;
         }
         cdLineEl.setAttribute('drag-pos', dragPos);
         cdLineEl.setAttribute('drag-to-child', prevDragToChild ? 'y' : 'n');
@@ -1030,7 +1049,7 @@ const Methods = {
     return Promise.resolve(this.restoreCustomStorage()).then(() => {
       this._isLoading = false;
       this.cacheColumnMap();
-      this.parseColumns().then(() => {
+      this.parseColumns(true).then(() => {
         if (this.scrollXLoad) {
           this.loadScrollXData(true);
         }
@@ -2902,15 +2921,11 @@ const Methods = {
   /**
    * 刷新列配置
    */
-  refreshColumn(initOrder) {
-    if (initOrder) {
-      const columnList = _xeUtils.default.orderBy(this.collectColumn, 'renderSortNumber');
-      this.collectColumn = columnList;
-      const tableFullColumn = getColumnList(columnList);
-      this.tableFullColumn = tableFullColumn;
-      this.cacheColumnMap();
+  refreshColumn(initSort) {
+    if (initSort) {
+      this.handleUpdateColumn();
     }
-    return this.parseColumns().then(() => {
+    return this.parseColumns(true).then(() => {
       return this.refreshScroll();
     }).then(() => {
       return this.recalculate();
@@ -2920,7 +2935,7 @@ const Methods = {
    * 刷新列信息
    * 将固定的列左边、右边分别靠边
    */
-  parseColumns() {
+  parseColumns(isReset) {
     const $xeTable = this;
     const props = $xeTable;
     const internalData = $xeTable;
@@ -3024,12 +3039,14 @@ const Methods = {
           (0, _log.warnLog)('vxe.error.scrollErrProp', ['footer-span-method']);
         }
       }
-      const {
-        visibleSize
-      } = handleVirtualXVisible(this);
-      scrollXStore.startIndex = 0;
-      scrollXStore.endIndex = visibleSize;
-      scrollXStore.visibleSize = visibleSize;
+      if (isReset) {
+        const {
+          visibleSize
+        } = handleVirtualXVisible(this);
+        scrollXStore.startIndex = 0;
+        scrollXStore.endIndex = visibleSize;
+        scrollXStore.visibleSize = visibleSize;
+      }
     }
     // 如果列被显示/隐藏，则清除合并状态
     // 如果列被设置为固定，则清除合并状态
@@ -3047,12 +3064,15 @@ const Methods = {
     });
     this.visibleColumn = visibleColumn;
     this.handleTableColumn();
-    return this.updateFooter().then(() => {
-      return this.recalculate();
-    }).then(() => {
-      this.updateCellAreas();
-      return this.recalculate();
-    });
+    if (isReset) {
+      return this.updateFooter().then(() => {
+        return this.recalculate();
+      }).then(() => {
+        this.updateCellAreas();
+        return this.recalculate();
+      });
+    }
+    return this.updateFooter();
   },
   /**
    * 指定列宽的列进行拆分
@@ -3383,56 +3403,6 @@ const Methods = {
       this.checkScrolling();
     }
   },
-  calcCellHeight() {
-    const $xeTable = this;
-    const props = $xeTable;
-    const reactData = $xeTable;
-    const internalData = $xeTable;
-    const {
-      showOverflow
-    } = props;
-    const {
-      tableData,
-      scrollXLoad,
-      scrollYLoad
-    } = reactData;
-    const {
-      fullAllDataRowIdData
-    } = internalData;
-    const el = $xeTable.$el;
-    if (!showOverflow && (scrollXLoad || scrollYLoad) && el) {
-      let paddingTop = 0;
-      let paddingBottom = 0;
-      let calcPadding = false;
-      tableData.forEach(row => {
-        const rowid = (0, _util.getRowid)($xeTable, row);
-        const rowRest = fullAllDataRowIdData[rowid];
-        const trList = el.querySelectorAll(`.vxe-body--row[rowid="${rowid}"]`);
-        if (rowRest && trList.length) {
-          let height = 0;
-          for (let i = 0; i < trList.length; i++) {
-            const trEl = trList[i];
-            const tdList = trEl.children;
-            for (let j = 0; j < tdList.length; j++) {
-              const tdEl = tdList[j];
-              const cellElem = tdEl.querySelector('.vxe-cell');
-              if (!calcPadding) {
-                paddingTop = _xeUtils.default.toNumber(getComputedStyle(tdEl).paddingTop);
-                paddingBottom = _xeUtils.default.toNumber(getComputedStyle(tdEl).paddingBottom);
-                calcPadding = true;
-              }
-              let cellHeight = paddingTop + paddingBottom;
-              if (cellElem) {
-                cellHeight += cellElem.offsetHeight;
-              }
-              height = Math.max(height, cellHeight);
-            }
-          }
-          rowRest.height = scrollXLoad ? Math.max(rowRest.height, height) : height;
-        }
-      });
-    }
-  },
   updateHeight() {
     this.customHeight = calcTableHeight(this, 'height');
     this.customMinHeight = calcTableHeight(this, 'minHeight');
@@ -3468,11 +3438,8 @@ const Methods = {
       editStore,
       currentRow,
       mouseConfig,
-      keyboardConfig,
-      keyboardOpts,
       spanMethod,
-      mergeList,
-      mergeFooterList,
+      expandColumn,
       footerSpanMethod,
       isAllOverflow,
       visibleColumn
@@ -3529,10 +3496,17 @@ const Methods = {
           if (isGroup) {
             renderColumnList = visibleColumn;
           } else {
-            // 如果是使用优化模式
             if (fixedType) {
-              if (scrollXLoad || allColumnHeaderOverflow) {
-                renderColumnList = fixedColumn;
+              // 如果是使用优化模式
+              if (scrollXLoad || scrollYLoad || allColumnHeaderOverflow) {
+                // 如果不支持优化模式
+                if (spanMethod || footerSpanMethod) {
+                  renderColumnList = visibleColumn;
+                } else {
+                  renderColumnList = fixedColumn || [];
+                }
+              } else {
+                renderColumnList = visibleColumn;
               }
             }
           }
@@ -3619,14 +3593,14 @@ const Methods = {
           }
           let tWidth = tableWidth;
           let renderColumnList = tableColumn;
-          // 如果是使用优化模式
           if (fixedType) {
-            // 如果存在展开行使用全量渲染
-            if (!this.expandColumn && (scrollXLoad || scrollYLoad || (allColumnOverflow ? isAllOverflow : allColumnOverflow))) {
-              if (!mergeList.length && !spanMethod && !(keyboardConfig && keyboardOpts.isMerge)) {
-                renderColumnList = fixedColumn;
-              } else {
+            // 如果是使用优化模式
+            if (scrollXLoad || scrollYLoad || allColumnOverflow && isAllOverflow) {
+              // 如果不支持优化模式
+              if (expandColumn || spanMethod || footerSpanMethod) {
                 renderColumnList = visibleColumn;
+              } else {
+                renderColumnList = fixedColumn || [];
               }
             } else {
               renderColumnList = visibleColumn;
@@ -3644,14 +3618,14 @@ const Methods = {
         } else if (layout === 'footer') {
           let tWidth = tableWidth;
           let renderColumnList = tableColumn;
-          // 如果是使用优化模式
           if (fixedType) {
-            // 如果存在展开行使用全量渲染
-            if (!this.expandColumn && (scrollXLoad || allColumnFooterOverflow)) {
-              if (!mergeFooterList.length || !footerSpanMethod) {
-                renderColumnList = fixedColumn;
-              } else {
+            // 如果是使用优化模式
+            if (scrollXLoad || scrollYLoad || allColumnFooterOverflow) {
+              // 如果不支持优化模式
+              if (spanMethod || footerSpanMethod) {
                 renderColumnList = visibleColumn;
+              } else {
+                renderColumnList = fixedColumn || [];
               }
             } else {
               renderColumnList = visibleColumn;
@@ -6097,7 +6071,10 @@ const Methods = {
     const triggerFilter = (0, _dom.getEventTargetNode)(evnt, cell, 'vxe-cell--filter').flag;
     let triggerDrag = false;
     if (!(triggerInput || triggerCheckbox || triggerSort || triggerFilter)) {
-      if (columnOpts.drag && trigger === 'cell' && !(disabledMethod && disabledMethod(params))) {
+      const {
+        column
+      } = params;
+      if (columnOpts.drag && !column.fixed && trigger === 'cell' && !(disabledMethod && disabledMethod(params))) {
         triggerDrag = true;
         $xeTable.handleHeaderCellDragMousedownEvent(evnt, params);
       }
@@ -6474,7 +6451,7 @@ const Methods = {
       evnt.dataTransfer.setDragImage(img, 0, 0);
     }
   },
-  handleHeaderCellDragDragendEvent(evnt) {
+  handleColDragSwapEvent(evnt, isSyncColumn, dragCol, prevDragCol, prevDragPos, prevDragToChild) {
     const $xeTable = this;
     const props = $xeTable;
     const reactData = $xeTable;
@@ -6490,13 +6467,7 @@ const Methods = {
       dragEndMethod
     } = columnDragOpts;
     const {
-      dragCol
-    } = reactData;
-    const {
-      collectColumn,
-      prevDragCol,
-      prevDragPos,
-      prevDragToChild
+      collectColumn
     } = internalData;
     const dragOffsetIndex = prevDragPos === 'right' ? 1 : 0;
     if (prevDragCol && dragCol) {
@@ -6504,7 +6475,7 @@ const Methods = {
       if (prevDragCol !== dragCol) {
         const oldColumn = dragCol;
         const newColumn = prevDragCol;
-        Promise.resolve(dragEndMethod ? dragEndMethod({
+        return Promise.resolve(dragEndMethod ? dragEndMethod({
           oldColumn,
           newColumn,
           dragPos: prevDragPos,
@@ -6625,9 +6596,6 @@ const Methods = {
               $xeTable.clearCopyCellArea();
             }
           }
-          $xeTable.refreshColumn(true).then(() => {
-            $xeTable.updateCellAreas();
-          });
           $xeTable.dispatchEvent('column-dragend', {
             oldColumn,
             newColumn,
@@ -6638,10 +6606,31 @@ const Methods = {
               oldIndex: oafIndex
             }
           }, evnt);
-          $xeTable.saveCustomStore('update:sort');
+          if (isSyncColumn) {
+            $xeTable.handleUpdateColumn();
+            $xeTable.parseColumns(false).then(() => {
+              $xeTable.updateCellAreas();
+              return $xeTable.saveCustomStore('update:sort');
+            });
+          }
         }).catch(() => {});
       }
     }
+    return Promise.resolve();
+  },
+  handleHeaderCellDragDragendEvent(evnt) {
+    const $xeTable = this;
+    const reactData = $xeTable;
+    const internalData = $xeTable;
+    const {
+      dragCol
+    } = reactData;
+    const {
+      prevDragCol,
+      prevDragPos,
+      prevDragToChild
+    } = internalData;
+    $xeTable.handleColDragSwapEvent(evnt, true, dragCol, prevDragCol, prevDragPos, prevDragToChild);
     hideDropTip($xeTable);
     clearColDropOrigin($xeTable);
     internalData.prevDragToChild = false;
@@ -6649,6 +6638,9 @@ const Methods = {
     reactData.dragCol = null;
     setTimeout(() => {
       reactData.isDragColMove = false;
+      $xeTable.recalculate().then(() => {
+        $xeTable.loadScrollXData();
+      });
     }, 500);
   },
   handleHeaderCellDragDragoverEvent(evnt) {
@@ -6674,11 +6666,11 @@ const Methods = {
     if (column) {
       evnt.preventDefault();
       const {
-        dragCol
-      } = reactData;
-      const offsetX = evnt.clientX - thEl.getBoundingClientRect().x;
+        clientX
+      } = evnt;
+      const offsetX = clientX - thEl.getBoundingClientRect().x;
       const dragPos = offsetX < thEl.clientWidth / 2 ? 'left' : 'right';
-      if (dragCol && dragCol.id === column.id || !isCrossDrag && column.parentId) {
+      if (column.fixed || dragCol && dragCol.id === column.id || !isCrossDrag && column.parentId) {
         showDropTip($xeTable, evnt, null, thEl, false, dragPos);
         return;
       }
@@ -6691,6 +6683,35 @@ const Methods = {
         targetColumn: column,
         dragPos
       }, evnt);
+      // 边缘滚动
+      const el = $xeTable.$refs.refElem;
+      if (!el) {
+        return;
+      }
+      const xHandleEl = $xeTable.$refs.refScrollXHandleElem;
+      const tableBody = $xeTable.$refs.tableBody;
+      const tableBodyElem = tableBody ? tableBody.$el : null;
+      const scrollTargetEl = xHandleEl || tableBodyElem;
+      if (scrollTargetEl) {
+        const wrapperRect = el.getBoundingClientRect();
+        const tableWidth = el.clientWidth;
+        const leftContainerElem = $xeTable.$refs.leftContainer;
+        const leftContainerWidth = leftContainerElem ? leftContainerElem.clientWidth : 0;
+        const rightContainerElem = $xeTable.$refs.rightContainer;
+        const rightContainerWidth = rightContainerElem ? rightContainerElem.clientWidth : 0;
+        const srartX = wrapperRect.x + leftContainerWidth;
+        const endX = wrapperRect.x + tableWidth - rightContainerWidth;
+        const distSize = 28;
+        const startDistSize = clientX - srartX;
+        const endDistSize = endX - clientX;
+        if (startDistSize > 0 && startDistSize <= distSize) {
+          const scrollRatio = Math.floor(tableWidth / (startDistSize > distSize / 2 ? 240 : 120));
+          scrollTargetEl.scrollLeft -= scrollRatio * (distSize - startDistSize);
+        } else if (endDistSize > 0 && endDistSize <= distSize) {
+          const scrollRatio = Math.floor(tableWidth / (endDistSize > distSize / 2 ? 240 : 120));
+          scrollTargetEl.scrollLeft += scrollRatio * (distSize - endDistSize);
+        }
+      }
     }
   },
   handleHeaderCellDragMousedownEvent(evnt, params) {
@@ -8242,6 +8263,15 @@ const Methods = {
     });
     this.tableColumn = tableColumn;
   },
+  handleUpdateColumn() {
+    const $xeTable = this;
+    const internalData = $xeTable;
+    const columnList = _xeUtils.default.orderBy(internalData.collectColumn, 'renderSortNumber');
+    internalData.collectColumn = columnList;
+    const tableFullColumn = getColumnList(columnList);
+    internalData.tableFullColumn = tableFullColumn;
+    $xeTable.cacheColumnMap();
+  },
   updateScrollXData() {
     const $xeTable = this;
     const props = $xeTable;