vxe-table 3.10.6 → 3.10.8

package/es/table/src/methods.js

@@ -321,6 +321,16 @@ function clearRowDropOrigin($xeTable) {
         });
     }
 }
+function updateRowDropOrigin($xeTable, row) {
+    const el = $xeTable.$el;
+    if (el) {
+        const clss = 'row--drag-origin';
+        const rowid = getRowid($xeTable, row);
+        XEUtils.arrayEach(el.querySelectorAll(`[rowid="${rowid}"]`), (elem) => {
+            addClass(elem, clss);
+        });
+    }
+}
 function clearRowDropTarget($xeTable) {
     const el = $xeTable.$el;
     if (el) {
@@ -330,6 +340,17 @@ function clearRowDropTarget($xeTable) {
         });
     }
 }
+function updateRowDropTarget($xeTable, row, dragPos) {
+    const el = $xeTable.$el;
+    if (el) {
+        const clss = 'row--drag-active-target';
+        const rowid = getRowid($xeTable, row);
+        XEUtils.arrayEach(el.querySelectorAll(`[rowid="${rowid}"]`), (elem) => {
+            addClass(elem, clss);
+            elem.setAttribute('drag-pos', dragPos);
+        });
+    }
+}
 function showRowDropTip(evnt, $xeTable) {
     const rdTipEl = $xeTable.$refs.refRowDragTipElem;
     if (!rdTipEl) {
@@ -354,7 +375,19 @@ const hideRowDropTip = ($xeTable) => {
 };
 const updateRowDropTipContent = ($xeTable, tdEl) => {
     const reactData = $xeTable;
-    reactData.dragTipText = tdEl.textContent || '';
+    const { dragRow } = reactData;
+    const dragOpts = $xeTable.computeDragOpts;
+    const { rowTooltipMethod } = dragOpts;
+    let tipContent = '';
+    if (rowTooltipMethod) {
+        tipContent = `${rowTooltipMethod({
+            row: dragRow
+        }) || ''}`;
+    }
+    else {
+        tipContent = getI18n('vxe.table.dragTip', [tdEl.textContent || '']);
+    }
+    reactData.dragTipText = tipContent;
 };
 const Methods = {
     callSlot(slotFunc, params, h, vNodes) {
@@ -4616,7 +4649,7 @@ const Methods = {
         const treeOpts = $xeTable.computeTreeOpts;
         const { transform } = treeOpts;
         const { dragRow } = reactData;
-        const { afterFullData, tableFullData, prevDragRow, prevDragPos } = internalData;
+        const { afterFullData, afterTreeFullData, tableFullData, tableFullTreeData, prevDragRow, prevDragPos } = internalData;
         if (prevDragRow && dragRow) {
             // 判断是否有拖动
             if (prevDragRow !== dragRow) {
@@ -4630,18 +4663,36 @@ const Methods = {
                         return;
                     }
                     const dragOffsetIndex = prevDragPos === 'bottom' ? 1 : 0;
-                    // 移出源位置
-                    const oafIndex = $xeTable.findRowIndexOf(afterFullData, dragRow);
-                    const otfIndex = $xeTable.findRowIndexOf(tableFullData, dragRow);
-                    afterFullData.splice(oafIndex, 1);
-                    tableFullData.splice(otfIndex, 1);
-                    // 插新位置
-                    const pafIndex = $xeTable.findRowIndexOf(afterFullData, prevDragRow);
-                    const ptfIndex = $xeTable.findRowIndexOf(tableFullData, prevDragRow);
-                    const nafIndex = pafIndex + dragOffsetIndex;
-                    const ntfIndex = ptfIndex + dragOffsetIndex;
-                    afterFullData.splice(nafIndex, 0, dragRow);
-                    tableFullData.splice(ntfIndex, 0, dragRow);
+                    let oafIndex = -1;
+                    let nafIndex = -1;
+                    if (treeConfig) {
+                        // 移出源位置
+                        oafIndex = $xeTable.findRowIndexOf(afterTreeFullData, dragRow);
+                        const otfIndex = $xeTable.findRowIndexOf(tableFullTreeData, dragRow);
+                        afterTreeFullData.splice(oafIndex, 1);
+                        tableFullTreeData.splice(otfIndex, 1);
+                        // 插新位置
+                        const pafIndex = $xeTable.findRowIndexOf(afterTreeFullData, prevDragRow);
+                        const ptfIndex = $xeTable.findRowIndexOf(tableFullTreeData, prevDragRow);
+                        nafIndex = pafIndex + dragOffsetIndex;
+                        const ntfIndex = ptfIndex + dragOffsetIndex;
+                        afterTreeFullData.splice(nafIndex, 0, dragRow);
+                        tableFullTreeData.splice(ntfIndex, 0, dragRow);
+                    }
+                    else {
+                        // 移出源位置
+                        oafIndex = $xeTable.findRowIndexOf(afterFullData, dragRow);
+                        const otfIndex = $xeTable.findRowIndexOf(tableFullData, dragRow);
+                        afterFullData.splice(oafIndex, 1);
+                        tableFullData.splice(otfIndex, 1);
+                        // 插新位置
+                        const pafIndex = $xeTable.findRowIndexOf(afterFullData, prevDragRow);
+                        const ptfIndex = $xeTable.findRowIndexOf(tableFullData, prevDragRow);
+                        nafIndex = pafIndex + dragOffsetIndex;
+                        const ntfIndex = ptfIndex + dragOffsetIndex;
+                        afterFullData.splice(nafIndex, 0, dragRow);
+                        tableFullData.splice(ntfIndex, 0, dragRow);
+                    }
                     reactData.isDragRowMove = true;
                     $xeTable.cacheRowMap();
                     $xeTable.updateScrollYStatus();
@@ -4692,8 +4743,7 @@ const Methods = {
             const { dragRow } = reactData;
             const offsetY = evnt.clientY - trEl.getBoundingClientRect().y;
             const dragPos = offsetY < trEl.clientHeight / 2 ? 'top' : 'bottom';
-            addClass(trEl, 'row--drag-active-target');
-            trEl.setAttribute('drag-pos', dragPos);
+            updateRowDropTarget($xeTable, row, dragPos);
             internalData.prevDragRow = row;
             internalData.prevDragPos = dragPos;
             $xeTable.dispatchEvent('row-dragover', {
@@ -4725,7 +4775,7 @@ const Methods = {
         }
         reactData.dragRow = row;
         trEl.draggable = true;
-        addClass(trEl, 'row--drag-origin');
+        updateRowDropOrigin($xeTable, row);
         showRowDropTip(evnt, $xeTable);
         updateRowDropTipContent($xeTable, tdEl);
         $xeTable.dispatchEvent('row-dragstart', params, evnt);

package/es/table/src/table.js

@@ -1021,11 +1021,16 @@ export default {
         const VxeUILoadingComponent = VxeUI.getComponent('VxeLoading');
         const VxeUITooltipComponent = VxeUI.getComponent('VxeTooltip');
         const $xeTable = this;
+        const reactData = $xeTable;
         const { _e, $scopedSlots, tId, isCalcColumn, tableData, tableColumn, tableGroupColumn, isGroup, loading, stripe, showHeader, height, tableBorder, treeOpts, treeConfig, mouseConfig, mouseOpts, computeSize, validOpts, showFooter, overflowX, overflowY, scrollXLoad, scrollYLoad, scrollbarHeight, highlightCell, highlightHoverRow, highlightHoverColumn, editConfig, validTipOpts, initStore, columnStore, filterStore, customStore, ctxMenuStore, ctxMenuOpts, footerTableData, columnOpts, rowOpts, checkboxOpts, loadingOpts, editRules } = $xeTable;
+        const { dragRow, dragTipText } = reactData;
         const { leftList, rightList } = columnStore;
         const currLoading = this._isLoading || loading;
         const vSize = computeSize;
+        const dragOpts = $xeTable.computeDragOpts;
         const virtualScrollBars = $xeTable.computeVirtualScrollBars;
+        const dragSlots = dragOpts.slots || {};
+        const rowTipSlot = dragSlots.rowTip;
         return h('div', {
             class: ['vxe-table', 'vxe-table--render-default', `tid_${tId}`, vSize ? `size--${vSize}` : '', `border--${tableBorder}`, {
                     [`valid-msg--${validOpts.msgMode}`]: !!editRules,
@@ -1272,11 +1277,13 @@ export default {
             /**
                * 拖拽提示
                */
-            rowOpts.drag
+            rowOpts.drag && (dragRow || dragTipText)
                 ? h('div', {
                     ref: 'refRowDragTipElem',
-                    class: 'vxe-table--row-drag-hint'
-                }, getI18n('vxe.table.dragTip', [this.dragTipText]))
+                    class: 'vxe-table--row-drag-tip'
+                }, rowTipSlot
+                    ? (dragRow ? this.callSlot(rowTipSlot, { row: dragRow }, h) : [renderEmptyElement($xeTable)])
+                    : (dragTipText ? [h('span', dragTipText)] : [renderEmptyElement($xeTable)]))
                 : _e(),
             h('div', {}, [
                 /**

package/es/table/style.css

@@ -1074,7 +1074,7 @@
 .vxe-table-custom-popup--column-item.col--sort, .vxe-table-custom-popup--column-item.col--visible, .vxe-table-custom-popup--column-item.col--resizable, .vxe-table-custom-popup--column-item.col--fixed {
   text-align: center;
 }
-.vxe-table-custom-popup--column-item.col--resizable > .vxe-input {
+.vxe-table-custom-popup--column-item.col--resizable > .vxe-input, .vxe-table-custom-popup--column-item.col--resizable > .vxe-number-input {
   width: 100%;
 }
 
@@ -2652,7 +2652,7 @@
 .vxe-table--render-default .vxe-body--row-list-move {
   transition: transform 0.35s;
 }
-.vxe-table--render-default .vxe-table--row-drag-hint {
+.vxe-table--render-default .vxe-table--row-drag-tip {
   display: none;
   position: absolute;
   top: 0;
@@ -2736,10 +2736,7 @@
 .vxe-table--render-default .vxe-body--column.col--selected {
   box-shadow: inset 0px 0px 0px 2px var(--vxe-ui-font-primary-color);
 }
-.vxe-table--render-default .vxe-body--column.col--active, .vxe-table--render-default .vxe-body--column.col--selected {
-  position: relative;
-}
-.vxe-table--render-default .vxe-body--column.col--valid-error .vxe-cell--valid-error-hint {
+.vxe-table--render-default .vxe-body--column .vxe-cell--valid-error-tip {
   width: 100%;
   position: absolute;
   left: 50%;
@@ -2751,12 +2748,25 @@
   padding-left: var(--vxe-ui-table-cell-padding-left);
   padding-right: var(--vxe-ui-table-cell-padding-right);
 }
-.vxe-table--render-default .vxe-body--column.col--valid-error .vxe-cell--valid-error-hint .vxe-cell--valid-error-msg {
+.vxe-table--render-default .vxe-body--column .vxe-cell--valid-error-wrapper {
   display: inline-block;
   border-radius: var(--vxe-ui-border-radius);
+  pointer-events: auto;
+}
+.vxe-table--render-default .vxe-body--column .vxe-cell--valid-error-theme-beautify {
+  padding: 0.4em 0.8em;
+  color: #fff;
+  background-color: #f56c6c;
+}
+.vxe-table--render-default .vxe-body--column .vxe-cell--valid-error-theme-beautify .vxe-cell--valid-error-msg {
+  background: transparent;
+}
+.vxe-table--render-default .vxe-body--column .vxe-cell--valid-error-theme-normal {
   color: var(--vxe-ui-table-validate-error-color);
   background-color: var(--vxe-ui-table-validate-error-background-color);
-  pointer-events: auto;
+}
+.vxe-table--render-default .vxe-body--column.col--active, .vxe-table--render-default .vxe-body--column.col--selected {
+  position: relative;
 }
 .vxe-table--render-default .vxe-body--column.col--valid-error .vxe-default-input,
 .vxe-table--render-default .vxe-body--column.col--valid-error .vxe-default-textarea,
@@ -2767,16 +2777,16 @@
 .vxe-table--render-default .vxe-body--column.col--valid-error .vxe-ico-picker {
   border-color: var(--vxe-ui-table-validate-error-color);
 }
-.vxe-table--render-default.valid-msg--single .vxe-body--row:last-child .vxe-cell--valid-error-hint {
+.vxe-table--render-default.valid-msg--single .vxe-body--row:last-child .vxe-cell--valid-error-tip {
   bottom: 100%;
 }
-.vxe-table--render-default.valid-msg--single .vxe-body--row:last-child:first-child .vxe-cell--valid-error-hint {
+.vxe-table--render-default.valid-msg--single .vxe-body--row:last-child:first-child .vxe-cell--valid-error-tip {
   bottom: auto;
 }
-.vxe-table--render-default.valid-msg--full .vxe-body--row:last-child .vxe-cell--valid-error-hint {
+.vxe-table--render-default.valid-msg--full .vxe-body--row:last-child .vxe-cell--valid-error-tip {
   top: calc(100% - 1.3em);
 }
-.vxe-table--render-default.old-cell-valid .vxe-body--column.col--valid-error .vxe-cell--valid-error-hint {
+.vxe-table--render-default.old-cell-valid .vxe-body--column.col--valid-error .vxe-cell--valid-error-tip {
   width: 320px;
   position: absolute;
   bottom: calc(100% + 4px);
@@ -2786,7 +2796,7 @@
   pointer-events: none;
   z-index: 4;
 }
-.vxe-table--render-default.old-cell-valid .vxe-body--column.col--valid-error .vxe-cell--valid-error-hint .vxe-cell--valid-error-msg {
+.vxe-table--render-default.old-cell-valid .vxe-body--column.col--valid-error .vxe-cell--valid-error-tip .vxe-cell--valid-error-msg {
   display: inline-block;
   border-radius: -var(-vxe-border-radius);
   padding: 8px 12px;
@@ -2794,11 +2804,11 @@
   background-color: #f56c6c;
   pointer-events: auto;
 }
-.vxe-table--render-default.old-cell-valid .vxe-body--row:first-child .vxe-cell--valid-error-hint {
+.vxe-table--render-default.old-cell-valid .vxe-body--row:first-child .vxe-cell--valid-error-tip {
   bottom: auto;
   top: calc(100% + 4px);
 }
-.vxe-table--render-default.old-cell-valid .vxe-body--column:first-child .vxe-cell--valid-error-hint {
+.vxe-table--render-default.old-cell-valid .vxe-body--column:first-child .vxe-cell--valid-error-tip {
   left: 10px;
   transform: translateX(0);
   text-align: left;