vxe-table 4.8.16 → 4.9.1

package/lib/table/src/header.js

@@ -153,59 +153,15 @@ var _default = exports.default = (0, _vue.defineComponent)({
         $xeTable.closeMenu();
       }
     };
-    (0, _vue.watch)(() => props.tableColumn, uploadColumn);
-    (0, _vue.onMounted)(() => {
-      (0, _vue.nextTick)(() => {
-        const {
-          fixedType
-        } = props;
-        const {
-          internalData
-        } = $xeTable;
-        const {
-          elemStore
-        } = internalData;
-        const prefix = `${fixedType || 'main'}-header-`;
-        elemStore[`${prefix}wrapper`] = refElem;
-        elemStore[`${prefix}table`] = refHeaderTable;
-        elemStore[`${prefix}colgroup`] = refHeaderColgroup;
-        elemStore[`${prefix}list`] = refHeaderTHead;
-        elemStore[`${prefix}xSpace`] = refHeaderXSpace;
-        elemStore[`${prefix}repair`] = refHeaderBorderRepair;
-        uploadColumn();
-      });
-    });
-    (0, _vue.onUnmounted)(() => {
+    const renderRows = (cols, $rowIndex) => {
       const {
         fixedType
       } = props;
-      const {
-        internalData
-      } = $xeTable;
-      const {
-        elemStore
-      } = internalData;
-      const prefix = `${fixedType || 'main'}-header-`;
-      elemStore[`${prefix}wrapper`] = null;
-      elemStore[`${prefix}table`] = null;
-      elemStore[`${prefix}colgroup`] = null;
-      elemStore[`${prefix}list`] = null;
-      elemStore[`${prefix}xSpace`] = null;
-      elemStore[`${prefix}repair`] = null;
-    });
-    const renderVN = () => {
-      const {
-        fixedType,
-        fixedColumn,
-        tableColumn
-      } = props;
       const {
         resizable: allResizable,
         border,
         columnKey,
-        headerRowClassName,
         headerCellClassName,
-        headerRowStyle,
         headerCellStyle,
         showHeaderOverflow: allColumnHeaderOverflow,
         headerAlign: allHeaderAlign,
@@ -213,16 +169,160 @@ var _default = exports.default = (0, _vue.defineComponent)({
         mouseConfig
       } = tableProps;
       const {
-        isGroup,
         currentColumn,
         scrollXLoad,
         overflowX,
         scrollbarWidth
       } = tableReactData;
+      const columnOpts = computeColumnOpts.value;
+      return cols.map((column, $columnIndex) => {
+        const {
+          type,
+          showHeaderOverflow,
+          headerAlign,
+          align,
+          headerClassName,
+          editRender,
+          cellRender
+        } = column;
+        const colid = column.id;
+        const renderOpts = editRender || cellRender;
+        const compConf = renderOpts ? renderer.get(renderOpts.name) : null;
+        const isColGroup = column.children && column.children.length;
+        const fixedHiddenColumn = fixedType ? column.fixed !== fixedType && !isColGroup : !!column.fixed && overflowX;
+        const headOverflow = _xeUtils.default.eqNull(showHeaderOverflow) ? allColumnHeaderOverflow : showHeaderOverflow;
+        const headAlign = headerAlign || (compConf ? compConf.tableHeaderCellAlign : '') || allHeaderAlign || align || (compConf ? compConf.tableCellAlign : '') || allAlign;
+        let showEllipsis = headOverflow === 'ellipsis';
+        const showTitle = headOverflow === 'title';
+        const showTooltip = headOverflow === true || headOverflow === 'tooltip';
+        let hasEllipsis = showTitle || showTooltip || showEllipsis;
+        const hasFilter = column.filters && column.filters.some(item => item.checked);
+        const columnIndex = $xeTable.getColumnIndex(column);
+        const _columnIndex = $xeTable.getVTColumnIndex(column);
+        const params = {
+          $table: $xeTable,
+          $grid: $xeTable.xegrid,
+          $rowIndex,
+          column,
+          columnIndex,
+          $columnIndex,
+          _columnIndex,
+          fixed: fixedType,
+          type: renderType,
+          isHidden: fixedHiddenColumn,
+          hasFilter
+        };
+        const thOns = {
+          onClick: evnt => $xeTable.triggerHeaderCellClickEvent(evnt, params),
+          onDblclick: evnt => $xeTable.triggerHeaderCellDblclickEvent(evnt, params)
+        };
+        // 横向虚拟滚动不支持动态行高
+        if (scrollXLoad && !hasEllipsis) {
+          showEllipsis = hasEllipsis = true;
+        }
+        // 按下事件处理
+        if (mouseConfig) {
+          thOns.onMousedown = evnt => $xeTable.triggerHeaderCellMousedownEvent(evnt, params);
+        }
+        // 拖拽行事件
+        if (columnOpts.drag && !column.parentId) {
+          thOns.onDragstart = $xeTable.handleHeaderCellDragDragstartEvent;
+          thOns.onDragend = $xeTable.handleHeaderCellDragDragendEvent;
+          thOns.onDragover = $xeTable.handleHeaderCellDragDragoverEvent;
+        }
+        return (0, _vue.h)('th', Object.assign(Object.assign({
+          class: ['vxe-header--column', colid, {
+            [`col--${headAlign}`]: headAlign,
+            [`col--${type}`]: type,
+            'col--last': $columnIndex === cols.length - 1,
+            'col--fixed': column.fixed,
+            'col--group': isColGroup,
+            'col--ellipsis': hasEllipsis,
+            'fixed--hidden': fixedHiddenColumn,
+            'is--sortable': column.sortable,
+            'col--filter': !!column.filters,
+            'is--filter-active': hasFilter,
+            'col--current': currentColumn === column
+          }, headerClassName ? _xeUtils.default.isFunction(headerClassName) ? headerClassName(params) : headerClassName : '', headerCellClassName ? _xeUtils.default.isFunction(headerCellClassName) ? headerCellClassName(params) : headerCellClassName : ''],
+          colid,
+          colspan: column.colSpan > 1 ? column.colSpan : null,
+          rowspan: column.rowSpan > 1 ? column.rowSpan : null,
+          style: headerCellStyle ? _xeUtils.default.isFunction(headerCellStyle) ? headerCellStyle(params) : headerCellStyle : null
+        }, thOns), {
+          key: columnKey || columnOpts.useKey || columnOpts.drag || isColGroup ? colid : $columnIndex
+        }), [(0, _vue.h)('div', {
+          class: ['vxe-cell', {
+            'c--title': showTitle,
+            'c--tooltip': showTooltip,
+            'c--ellipsis': showEllipsis
+          }]
+        }, column.renderHeader(params)),
+        /**
+         * 列宽拖动
+         */
+        !fixedHiddenColumn && !isColGroup && (_xeUtils.default.isBoolean(column.resizable) ? column.resizable : columnOpts.resizable || allResizable) ? (0, _vue.h)('div', {
+          class: ['vxe-resizable', {
+            'is--line': !border || border === 'none'
+          }],
+          onMousedown: evnt => resizeMousedown(evnt, params)
+        }) : null]);
+      }).concat(scrollbarWidth ? [(0, _vue.h)('th', {
+        key: `gr${$rowIndex}`,
+        class: 'vxe-header--gutter col--gutter'
+      })] : []);
+    };
+    const renderHeads = headerGroups => {
+      const {
+        fixedType
+      } = props;
+      const {
+        headerRowClassName,
+        headerRowStyle
+      } = tableProps;
+      const {
+        isDragColMove
+      } = tableReactData;
+      const columnOpts = computeColumnOpts.value;
+      return headerGroups.map((cols, $rowIndex) => {
+        const params = {
+          $table: $xeTable,
+          $rowIndex,
+          fixed: fixedType,
+          type: renderType
+        };
+        if (columnOpts.drag) {
+          return (0, _vue.h)(_vue.TransitionGroup, {
+            name: `vxe-header--col-list${isDragColMove ? '' : '-disabled'}`,
+            tag: 'tr',
+            class: ['vxe-header--row', headerRowClassName ? _xeUtils.default.isFunction(headerRowClassName) ? headerRowClassName(params) : headerRowClassName : ''],
+            style: headerRowStyle ? _xeUtils.default.isFunction(headerRowStyle) ? headerRowStyle(params) : headerRowStyle : null
+          }, {
+            default: () => renderRows(cols, $rowIndex)
+          });
+        }
+        return (0, _vue.h)('tr', {
+          class: ['vxe-header--row', headerRowClassName ? _xeUtils.default.isFunction(headerRowClassName) ? headerRowClassName(params) : headerRowClassName : ''],
+          style: headerRowStyle ? _xeUtils.default.isFunction(headerRowStyle) ? headerRowStyle(params) : headerRowStyle : null
+        }, renderRows(cols, $rowIndex));
+      });
+    };
+    const renderVN = () => {
+      const {
+        fixedType,
+        fixedColumn,
+        tableColumn
+      } = props;
+      const {
+        showHeaderOverflow: allColumnHeaderOverflow
+      } = tableProps;
+      const {
+        isGroup,
+        scrollXLoad,
+        scrollbarWidth
+      } = tableReactData;
       const {
         visibleColumn
       } = tableInternalData;
-      const columnOpts = computeColumnOpts.value;
       let headerGroups = headerColumn.value;
       let renderColumnList = tableColumn;
       if (isGroup) {
@@ -269,109 +369,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
        */
       (0, _vue.h)('thead', {
         ref: refHeaderTHead
-      }, headerGroups.map((cols, $rowIndex) => {
-        return (0, _vue.h)('tr', {
-          class: ['vxe-header--row', headerRowClassName ? _xeUtils.default.isFunction(headerRowClassName) ? headerRowClassName({
-            $table: $xeTable,
-            $rowIndex,
-            fixed: fixedType,
-            type: renderType
-          }) : headerRowClassName : ''],
-          style: headerRowStyle ? _xeUtils.default.isFunction(headerRowStyle) ? headerRowStyle({
-            $table: $xeTable,
-            $rowIndex,
-            fixed: fixedType,
-            type: renderType
-          }) : headerRowStyle : null
-        }, cols.map((column, $columnIndex) => {
-          const {
-            type,
-            showHeaderOverflow,
-            headerAlign,
-            align,
-            headerClassName,
-            editRender,
-            cellRender
-          } = column;
-          const colid = column.id;
-          const renderOpts = editRender || cellRender;
-          const compConf = renderOpts ? renderer.get(renderOpts.name) : null;
-          const isColGroup = column.children && column.children.length;
-          const fixedHiddenColumn = fixedType ? column.fixed !== fixedType && !isColGroup : !!column.fixed && overflowX;
-          const headOverflow = _xeUtils.default.eqNull(showHeaderOverflow) ? allColumnHeaderOverflow : showHeaderOverflow;
-          const headAlign = headerAlign || (compConf ? compConf.tableHeaderCellAlign : '') || allHeaderAlign || align || (compConf ? compConf.tableCellAlign : '') || allAlign;
-          let showEllipsis = headOverflow === 'ellipsis';
-          const showTitle = headOverflow === 'title';
-          const showTooltip = headOverflow === true || headOverflow === 'tooltip';
-          let hasEllipsis = showTitle || showTooltip || showEllipsis;
-          const hasFilter = column.filters && column.filters.some(item => item.checked);
-          const columnIndex = $xeTable.getColumnIndex(column);
-          const _columnIndex = $xeTable.getVTColumnIndex(column);
-          const params = {
-            $table: $xeTable,
-            $grid: $xeTable.xegrid,
-            $rowIndex,
-            column,
-            columnIndex,
-            $columnIndex,
-            _columnIndex,
-            fixed: fixedType,
-            type: renderType,
-            isHidden: fixedHiddenColumn,
-            hasFilter
-          };
-          const thOns = {
-            onClick: evnt => $xeTable.triggerHeaderCellClickEvent(evnt, params),
-            onDblclick: evnt => $xeTable.triggerHeaderCellDblclickEvent(evnt, params)
-          };
-          // 横向虚拟滚动不支持动态行高
-          if (scrollXLoad && !hasEllipsis) {
-            showEllipsis = hasEllipsis = true;
-          }
-          // 按下事件处理
-          if (mouseConfig) {
-            thOns.onMousedown = evnt => $xeTable.triggerHeaderCellMousedownEvent(evnt, params);
-          }
-          return (0, _vue.h)('th', Object.assign(Object.assign({
-            class: ['vxe-header--column', colid, {
-              [`col--${headAlign}`]: headAlign,
-              [`col--${type}`]: type,
-              'col--last': $columnIndex === cols.length - 1,
-              'col--fixed': column.fixed,
-              'col--group': isColGroup,
-              'col--ellipsis': hasEllipsis,
-              'fixed--hidden': fixedHiddenColumn,
-              'is--sortable': column.sortable,
-              'col--filter': !!column.filters,
-              'is--filter-active': hasFilter,
-              'col--current': currentColumn === column
-            }, headerClassName ? _xeUtils.default.isFunction(headerClassName) ? headerClassName(params) : headerClassName : '', headerCellClassName ? _xeUtils.default.isFunction(headerCellClassName) ? headerCellClassName(params) : headerCellClassName : ''],
-            colid,
-            colspan: column.colSpan > 1 ? column.colSpan : null,
-            rowspan: column.rowSpan > 1 ? column.rowSpan : null,
-            style: headerCellStyle ? _xeUtils.default.isFunction(headerCellStyle) ? headerCellStyle(params) : headerCellStyle : null
-          }, thOns), {
-            key: columnKey || columnOpts.useKey || isColGroup ? colid : $columnIndex
-          }), [(0, _vue.h)('div', {
-            class: ['vxe-cell', {
-              'c--title': showTitle,
-              'c--tooltip': showTooltip,
-              'c--ellipsis': showEllipsis
-            }]
-          }, column.renderHeader(params)),
-          /**
-           * 列宽拖动
-           */
-          !fixedHiddenColumn && !isColGroup && (_xeUtils.default.isBoolean(column.resizable) ? column.resizable : columnOpts.resizable || allResizable) ? (0, _vue.h)('div', {
-            class: ['vxe-resizable', {
-              'is--line': !border || border === 'none'
-            }],
-            onMousedown: evnt => resizeMousedown(evnt, params)
-          }) : null]);
-        }).concat(scrollbarWidth ? [(0, _vue.h)('th', {
-          class: 'vxe-header--gutter col--gutter'
-        })] : []));
-      }))]),
+      }, renderHeads(headerGroups))]),
       /**
        * 其他
        */
@@ -380,6 +378,46 @@ var _default = exports.default = (0, _vue.defineComponent)({
         class: 'vxe-table--header-border-line'
       })]);
     };
+    (0, _vue.watch)(() => props.tableColumn, uploadColumn);
+    (0, _vue.onMounted)(() => {
+      (0, _vue.nextTick)(() => {
+        const {
+          fixedType
+        } = props;
+        const {
+          internalData
+        } = $xeTable;
+        const {
+          elemStore
+        } = internalData;
+        const prefix = `${fixedType || 'main'}-header-`;
+        elemStore[`${prefix}wrapper`] = refElem;
+        elemStore[`${prefix}table`] = refHeaderTable;
+        elemStore[`${prefix}colgroup`] = refHeaderColgroup;
+        elemStore[`${prefix}list`] = refHeaderTHead;
+        elemStore[`${prefix}xSpace`] = refHeaderXSpace;
+        elemStore[`${prefix}repair`] = refHeaderBorderRepair;
+        uploadColumn();
+      });
+    });
+    (0, _vue.onUnmounted)(() => {
+      const {
+        fixedType
+      } = props;
+      const {
+        internalData
+      } = $xeTable;
+      const {
+        elemStore
+      } = internalData;
+      const prefix = `${fixedType || 'main'}-header-`;
+      elemStore[`${prefix}wrapper`] = null;
+      elemStore[`${prefix}table`] = null;
+      elemStore[`${prefix}colgroup`] = null;
+      elemStore[`${prefix}list`] = null;
+      elemStore[`${prefix}xSpace`] = null;
+      elemStore[`${prefix}repair`] = null;
+    });
     return renderVN;
   }
 });

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

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

package/lib/table/src/props.js

@@ -188,8 +188,12 @@ var _default = exports.default = {
   cellConfig: Object,
   // 行配置信息
   rowConfig: Object,
-  // 可拖拽配置项
+  // 已废弃，被 rowDragConfig 替换
   dragConfig: Object,
+  // 行拖拽排序配置项
+  rowDragConfig: Object,
+  // 列拖拽排序配置项
+  columnDragConfig: Object,
   // 列调整配置项
   resizableConfig: Object,
   // 序号配置项

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _ui=require("../../ui");const getConfig=_ui.VxeUI["getConfig"];var _default=exports.default={id:[String,Function],data:Array,height:[Number,String],minHeight:{type:[Number,String],default:()=>getConfig().table.minHeight},maxHeight:[Number,String],resizable:{type:Boolean,default:()=>getConfig().table.resizable},stripe:{type:Boolean,default:()=>getConfig().table.stripe},border:{type:[Boolean,String],default:()=>getConfig().table.border},padding:{type:Boolean,default:()=>getConfig().table.padding},round:{type:Boolean,default:()=>getConfig().table.round},size:{type:String,default:()=>getConfig().table.size||getConfig().size},fit:{type:Boolean,default:()=>getConfig().table.fit},loading:Boolean,align:{type:String,default:()=>getConfig().table.align},headerAlign:{type:String,default:()=>getConfig().table.headerAlign},footerAlign:{type:String,default:()=>getConfig().table.footerAlign},showHeader:{type:Boolean,default:()=>getConfig().table.showHeader},highlightCurrentRow:{type:Boolean,default:()=>getConfig().table.highlightCurrentRow},highlightHoverRow:{type:Boolean,default:()=>getConfig().table.highlightHoverRow},highlightCurrentColumn:{type:Boolean,default:()=>getConfig().table.highlightCurrentColumn},highlightHoverColumn:{type:Boolean,default:()=>getConfig().table.highlightHoverColumn},highlightCell:Boolean,showFooter:Boolean,footerData:Array,footerMethod:Function,rowClassName:[String,Function],cellClassName:[String,Function],headerRowClassName:[String,Function],headerCellClassName:[String,Function],footerRowClassName:[String,Function],footerCellClassName:[String,Function],cellStyle:[Object,Function],headerCellStyle:[Object,Function],footerCellStyle:[Object,Function],rowStyle:[Object,Function],headerRowStyle:[Object,Function],footerRowStyle:[Object,Function],mergeCells:Array,mergeFooterItems:Array,spanMethod:Function,footerSpanMethod:Function,showOverflow:{type:[Boolean,String],default:()=>getConfig().table.showOverflow},showHeaderOverflow:{type:[Boolean,String],default:()=>getConfig().table.showHeaderOverflow},showFooterOverflow:{type:[Boolean,String],default:()=>getConfig().table.showFooterOverflow},columnKey:Boolean,rowKey:Boolean,rowId:{type:String,default:()=>getConfig().table.rowId},zIndex:Number,emptyText:{type:String,default:()=>getConfig().table.emptyText},keepSource:{type:Boolean,default:()=>getConfig().table.keepSource},autoResize:{type:Boolean,default:()=>getConfig().table.autoResize},syncResize:[Boolean,String,Number],resizeConfig:Object,columnConfig:Object,cellConfig:Object,rowConfig:Object,dragConfig:Object,resizableConfig:Object,seqConfig:Object,sortConfig:Object,filterConfig:Object,radioConfig:Object,checkboxConfig:Object,tooltipConfig:Object,exportConfig:Object,importConfig:Object,printConfig:Object,expandConfig:Object,treeConfig:Object,menuConfig:Object,mouseConfig:Object,areaConfig:Object,keyboardConfig:Object,clipConfig:Object,fnrConfig:Object,editConfig:Object,validConfig:Object,editRules:Object,loadingConfig:Object,emptyRender:Object,customConfig:Object,scrollX:Object,scrollY:Object,animat:{type:Boolean,default:()=>getConfig().table.animat},delayHover:{type:Number,default:()=>getConfig().table.delayHover},params:Object};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _ui=require("../../ui");const getConfig=_ui.VxeUI["getConfig"];var _default=exports.default={id:[String,Function],data:Array,height:[Number,String],minHeight:{type:[Number,String],default:()=>getConfig().table.minHeight},maxHeight:[Number,String],resizable:{type:Boolean,default:()=>getConfig().table.resizable},stripe:{type:Boolean,default:()=>getConfig().table.stripe},border:{type:[Boolean,String],default:()=>getConfig().table.border},padding:{type:Boolean,default:()=>getConfig().table.padding},round:{type:Boolean,default:()=>getConfig().table.round},size:{type:String,default:()=>getConfig().table.size||getConfig().size},fit:{type:Boolean,default:()=>getConfig().table.fit},loading:Boolean,align:{type:String,default:()=>getConfig().table.align},headerAlign:{type:String,default:()=>getConfig().table.headerAlign},footerAlign:{type:String,default:()=>getConfig().table.footerAlign},showHeader:{type:Boolean,default:()=>getConfig().table.showHeader},highlightCurrentRow:{type:Boolean,default:()=>getConfig().table.highlightCurrentRow},highlightHoverRow:{type:Boolean,default:()=>getConfig().table.highlightHoverRow},highlightCurrentColumn:{type:Boolean,default:()=>getConfig().table.highlightCurrentColumn},highlightHoverColumn:{type:Boolean,default:()=>getConfig().table.highlightHoverColumn},highlightCell:Boolean,showFooter:Boolean,footerData:Array,footerMethod:Function,rowClassName:[String,Function],cellClassName:[String,Function],headerRowClassName:[String,Function],headerCellClassName:[String,Function],footerRowClassName:[String,Function],footerCellClassName:[String,Function],cellStyle:[Object,Function],headerCellStyle:[Object,Function],footerCellStyle:[Object,Function],rowStyle:[Object,Function],headerRowStyle:[Object,Function],footerRowStyle:[Object,Function],mergeCells:Array,mergeFooterItems:Array,spanMethod:Function,footerSpanMethod:Function,showOverflow:{type:[Boolean,String],default:()=>getConfig().table.showOverflow},showHeaderOverflow:{type:[Boolean,String],default:()=>getConfig().table.showHeaderOverflow},showFooterOverflow:{type:[Boolean,String],default:()=>getConfig().table.showFooterOverflow},columnKey:Boolean,rowKey:Boolean,rowId:{type:String,default:()=>getConfig().table.rowId},zIndex:Number,emptyText:{type:String,default:()=>getConfig().table.emptyText},keepSource:{type:Boolean,default:()=>getConfig().table.keepSource},autoResize:{type:Boolean,default:()=>getConfig().table.autoResize},syncResize:[Boolean,String,Number],resizeConfig:Object,columnConfig:Object,cellConfig:Object,rowConfig:Object,dragConfig:Object,rowDragConfig:Object,columnDragConfig:Object,resizableConfig:Object,seqConfig:Object,sortConfig:Object,filterConfig:Object,radioConfig:Object,checkboxConfig:Object,tooltipConfig:Object,exportConfig:Object,importConfig:Object,printConfig:Object,expandConfig:Object,treeConfig:Object,menuConfig:Object,mouseConfig:Object,areaConfig:Object,keyboardConfig:Object,clipConfig:Object,fnrConfig:Object,editConfig:Object,validConfig:Object,editRules:Object,loadingConfig:Object,emptyRender:Object,customConfig:Object,scrollX:Object,scrollY:Object,animat:{type:Boolean,default:()=>getConfig().table.animat},delayHover:{type:Number,default:()=>getConfig().table.delayHover},params:Object};