vxe-table 3.10.1 → 3.10.2

package/es/table/src/cell.js

@@ -4,7 +4,7 @@ import { getFuncText, isEnableConf, formatText, eqEmptyValue } from '../../ui/sr
 import { updateCellTitle } from '../../ui/src/dom';
 import { createColumn, getRowid } from './util';
 import { getSlotVNs } from '../../ui/src/vn';
-const { getI18n, getIcon, renderer, formats } = VxeUI;
+const { getI18n, getIcon, renderer, formats, renderEmptyElement } = VxeUI;
 function renderTitlePrefixIcon(h, params) {
     const { $table, column } = params;
     const titlePrefix = column.titlePrefix || column.titleHelp;
@@ -43,6 +43,34 @@ function renderTitleSuffixIcon(h, params) {
         ]
         : [];
 }
+function renderCellDragIcon(h, params) {
+    const { $table } = params;
+    return h('span', {
+        key: 'dg',
+        class: 'vxe-cell--drag-handle',
+        on: {
+            mousedown(evnt) {
+                $table.handleCellDragMousedownEvent(evnt, params);
+            },
+            mouseup: $table.handleCellDragMouseupEvent
+        }
+    }, [
+        h('i', {
+            class: 'vxe-table-icon-drag-handle'
+        })
+    ]);
+}
+function renderCellBaseVNs(h, params, content) {
+    const { $table, column } = params;
+    const { dragSort } = column;
+    const vns = XEUtils.isArray(content) ? content : [content];
+    const rowOpts = $table.computeRowOpts;
+    const dragOpts = $table.computeDragOpts;
+    if (dragSort && rowOpts.drag && dragOpts.showIcon) {
+        vns.unshift(renderCellDragIcon(h, params));
+    }
+    return vns;
+}
 function renderTitleContent(h, params, content) {
     const { $table, column } = params;
     const { type, showHeaderOverflow } = column;
@@ -231,7 +259,7 @@ export const Cell = {
         const { slots, editRender, cellRender } = column;
         const renderOpts = editRender || cellRender;
         if (slots && slots.default) {
-            return $table.callSlot(slots.default, params, h);
+            return renderCellBaseVNs(h, params, $table.callSlot(slots.default, params, h));
         }
         if (renderOpts) {
             const compConf = renderer.get(renderOpts.name);
@@ -239,12 +267,12 @@ export const Cell = {
             const rtCell = compConf ? (compConf.renderTableCell || compConf.renderCell) : null;
             const renderFn = editRender ? rtCell : rtDefault;
             if (renderFn) {
-                return getSlotVNs(renderFn.call($table, h, renderOpts, Object.assign({ $type: editRender ? 'edit' : 'cell' }, params)));
+                return renderCellBaseVNs(h, params, getSlotVNs(renderFn.call($table, h, renderOpts, Object.assign({ $type: editRender ? 'edit' : 'cell' }, params))));
             }
         }
         const cellValue = $table.getCellLabel(row, column);
         const cellPlaceholder = editRender ? editRender.placeholder : '';
-        return [
+        return renderCellBaseVNs(h, params, [
             h('span', {
                 class: 'vxe-cell--label'
             }, [
@@ -255,7 +283,7 @@ export const Cell = {
                     }, formatText(getFuncText(cellPlaceholder), 1))
                     : h('span', formatText(cellValue, 1))
             ])
-        ];
+        ]);
     },
     renderTreeCell(h, params) {
         return Cell.renderTreeIcon(h, params, Cell.renderDefaultCell.call(this, h, params));
@@ -343,11 +371,13 @@ export const Cell = {
         const { treeConfig, seqOpts } = $table;
         const { slots } = column;
         if (slots && slots.default) {
-            return $table.callSlot(slots.default, params, h);
+            return renderCellBaseVNs(h, params, $table.callSlot(slots.default, params, h));
         }
         const { seq } = params;
         const seqMethod = seqOpts.seqMethod;
-        return [formatText(seqMethod ? seqMethod(params) : treeConfig ? seq : (seqOpts.startIndex || 0) + seq, 1)];
+        return renderCellBaseVNs(h, params, [
+            h('span', `${formatText(seqMethod ? seqMethod(params) : treeConfig ? seq : (seqOpts.startIndex || 0) + seq, 1)}`)
+        ]);
     },
     renderTreeIndexCell(h, params) {
         return Cell.renderTreeIcon(h, params, Cell.renderSeqCell(h, params));
@@ -394,7 +424,7 @@ export const Cell = {
         }
         const radioParams = Object.assign(Object.assign({}, params), { checked: isChecked, disabled: isDisabled, visible: isVisible });
         if (radioSlot) {
-            return $table.callSlot(radioSlot, radioParams, h);
+            return renderCellBaseVNs(h, params, $table.callSlot(radioSlot, radioParams, h));
         }
         const radioVNs = [];
         if (isVisible) {
@@ -407,7 +437,7 @@ export const Cell = {
                 class: 'vxe-radio--label'
             }, defaultSlot ? $table.callSlot(defaultSlot, radioParams, h) : XEUtils.get(row, labelField)));
         }
-        return [
+        return renderCellBaseVNs(h, params, [
             h('span', {
                 class: ['vxe-cell--radio', {
                         'is--checked': isChecked,
@@ -415,7 +445,7 @@ export const Cell = {
                     }],
                 on
             }, radioVNs)
-        ];
+        ]);
     },
     renderTreeRadioCell(h, params) {
         return Cell.renderTreeIcon(h, params, Cell.renderRadioCell(h, params));
@@ -507,7 +537,7 @@ export const Cell = {
         }
         const checkboxParams = Object.assign(Object.assign({}, params), { checked: isChecked, disabled: isDisabled, visible: isVisible, indeterminate });
         if (checkboxSlot) {
-            return $table.callSlot(checkboxSlot, checkboxParams, h);
+            return renderCellBaseVNs(h, params, $table.callSlot(checkboxSlot, checkboxParams, h));
         }
         const checkVNs = [];
         if (isVisible) {
@@ -520,7 +550,7 @@ export const Cell = {
                 class: 'vxe-checkbox--label'
             }, defaultSlot ? $table.callSlot(defaultSlot, checkboxParams, h) : XEUtils.get(row, labelField)));
         }
-        return [
+        return renderCellBaseVNs(h, params, [
             h('span', {
                 class: ['vxe-cell--checkbox', {
                         'is--checked': isChecked,
@@ -530,7 +560,7 @@ export const Cell = {
                     }],
                 on
             }, checkVNs)
-        ];
+        ]);
     },
     renderTreeSelectionCell(h, params) {
         return Cell.renderTreeIcon(h, params, Cell.renderCheckboxCell(h, params));
@@ -567,7 +597,7 @@ export const Cell = {
         }
         const checkboxParams = Object.assign(Object.assign({}, params), { checked: isChecked, disabled: isDisabled, visible: isVisible, indeterminate: isIndeterminate });
         if (checkboxSlot) {
-            return $table.callSlot(checkboxSlot, checkboxParams, h);
+            return renderCellBaseVNs(h, params, $table.callSlot(checkboxSlot, checkboxParams, h));
         }
         const checkVNs = [];
         if (isVisible) {
@@ -580,7 +610,7 @@ export const Cell = {
                 class: 'vxe-checkbox--label'
             }, defaultSlot ? $table.callSlot(defaultSlot, checkboxParams, h) : XEUtils.get(row, labelField)));
         }
-        return [
+        return renderCellBaseVNs(h, params, [
             h('span', {
                 class: ['vxe-cell--checkbox', {
                         'is--checked': isChecked,
@@ -590,7 +620,7 @@ export const Cell = {
                     }],
                 on
             }, checkVNs)
-        ];
+        ]);
     },
     renderTreeSelectionCellByProp(h, params) {
         return Cell.renderTreeIcon(h, params, Cell.renderCheckboxCellByProp(h, params));
@@ -607,7 +637,7 @@ export const Cell = {
         let isAceived = false;
         let isLazyLoading = false;
         if (slots && slots.icon) {
-            return $table.callSlot(slots.icon, params, h);
+            return renderCellBaseVNs(h, params, $table.callSlot(slots.icon, params, h));
         }
         if (!isHidden) {
             const rowid = getRowid($table, row);
@@ -616,7 +646,7 @@ export const Cell = {
                 isLazyLoading = !!rowExpandLazyLoadedMaps[rowid];
             }
         }
-        return [
+        return renderCellBaseVNs(h, params, [
             showIcon && (!visibleMethod || visibleMethod(params))
                 ? h('span', {
                     class: ['vxe-table--expanded', {
@@ -632,13 +662,13 @@ export const Cell = {
                         class: ['vxe-table--expand-btn', isLazyLoading ? (iconLoaded || getIcon().TABLE_EXPAND_LOADED) : (isAceived ? (iconOpen || getIcon().TABLE_EXPAND_OPEN) : (iconClose || getIcon().TABLE_EXPAND_CLOSE))]
                     })
                 ])
-                : null,
+                : renderEmptyElement($table),
             defaultSlot || labelField
                 ? h('span', {
                     class: 'vxe-table--expand-label'
                 }, defaultSlot ? $table.callSlot(defaultSlot, params, h) : XEUtils.get(row, labelField))
-                : null
-        ];
+                : renderEmptyElement($table)
+        ]);
     },
     renderExpandData(h, params) {
         const { $table, column } = params;
@@ -662,16 +692,16 @@ export const Cell = {
         const { $table, column } = params;
         const { slots } = column;
         if (slots && slots.default) {
-            return $table.callSlot(slots.default, params, h);
+            return renderCellBaseVNs(h, params, $table.callSlot(slots.default, params, h));
         }
-        return [
+        return renderCellBaseVNs(h, params, [
             h('span', {
                 class: 'vxe-cell--html',
                 domProps: {
                     innerHTML: getDefaultCellLabel(params)
                 }
             })
-        ];
+        ]);
     },
     renderTreeHTMLCell(h, params) {
         return Cell.renderTreeIcon(h, params, Cell.renderHTMLCell(h, params));

package/es/table/src/column.js

@@ -63,8 +63,10 @@ const props = {
     filterRecoverMethod: Function,
     // 筛选模板配置项
     filterRender: Object,
-    // 指定为树节点
+    // 设置为树节点
     treeNode: Boolean,
+    // 设置为拖拽排序
+    dragSort: Boolean,
     // 是否可视
     visible: { type: Boolean, default: null },
     // 表头单元格数据导出方法

package/es/table/src/columnInfo.js

@@ -85,6 +85,7 @@ export class ColumnInfo {
             filterRecoverMethod: _vm.filterRecoverMethod,
             filterRender: _vm.filterRender,
             treeNode: _vm.treeNode,
+            dragSort: _vm.dragSort,
             cellType: _vm.cellType,
             cellRender: _vm.cellRender,
             editRender: _vm.editRender,

package/es/table/src/methods.js

@@ -311,6 +311,51 @@ function getOrderField(_vm, column) {
         return cellValue;
     };
 }
+function clearRowDropOrigin($xeTable) {
+    const el = $xeTable.$el;
+    if (el) {
+        const clss = 'row--drag-origin';
+        XEUtils.arrayEach(el.querySelectorAll(`.${clss}`), (elem) => {
+            elem.draggable = false;
+            removeClass(elem, clss);
+        });
+    }
+}
+function clearRowDropTarget($xeTable) {
+    const el = $xeTable.$el;
+    if (el) {
+        const clss = 'row--drag-active-target';
+        XEUtils.arrayEach(el.querySelectorAll(`.${clss}`), (elem) => {
+            removeClass(elem, clss);
+        });
+    }
+}
+function showRowDropTip(evnt, $xeTable) {
+    const rdTipEl = $xeTable.$refs.refRowDragTipElem;
+    if (!rdTipEl) {
+        return;
+    }
+    const el = $xeTable.$el;
+    if (!el) {
+        return;
+    }
+    if (rdTipEl) {
+        const wrapperRect = el.getBoundingClientRect();
+        rdTipEl.style.display = 'block';
+        rdTipEl.style.top = `${Math.min(el.clientHeight - el.scrollTop - rdTipEl.clientHeight, evnt.clientY - wrapperRect.y)}px`;
+        rdTipEl.style.left = `${Math.min(el.clientWidth - el.scrollLeft - rdTipEl.clientWidth - 16, evnt.clientX - wrapperRect.x)}px`;
+    }
+}
+const hideRowDropTip = ($xeTable) => {
+    const rdTipEl = $xeTable.$refs.refRowDragTipElem;
+    if (rdTipEl) {
+        rdTipEl.style.display = '';
+    }
+};
+const updateRowDropTipContent = ($xeTable, tdEl) => {
+    const reactData = $xeTable;
+    reactData.dragTipText = tdEl.textContent || '';
+};
 const Methods = {
     callSlot(slotFunc, params, h, vNodes) {
         if (slotFunc) {
@@ -4577,6 +4622,145 @@ const Methods = {
             this.emitEvent('sort-change', params, evnt);
         }
     },
+    handleRowDragDragstartEvent(evnt) {
+        const img = new Image();
+        if (evnt.dataTransfer) {
+            evnt.dataTransfer.setDragImage(img, 0, 0);
+        }
+    },
+    handleRowDragDragendEvent(evnt) {
+        const $xeTable = this;
+        const props = $xeTable;
+        const reactData = $xeTable;
+        const internalData = $xeTable;
+        const { treeConfig } = props;
+        const rowOpts = $xeTable.computeRowOpts;
+        const { dragEndMethod } = rowOpts;
+        const treeOpts = $xeTable.computeTreeOpts;
+        const { transform } = treeOpts;
+        const { dragRow } = reactData;
+        const { afterFullData, tableFullData, prevDragRow, prevDragPos } = internalData;
+        if (prevDragRow && dragRow) {
+            // 判断是否有拖动
+            if (prevDragRow !== dragRow) {
+                Promise.resolve(dragEndMethod
+                    ? dragEndMethod({
+                        oldRow: dragRow,
+                        newRow: prevDragRow
+                    })
+                    : true).then((status) => {
+                    if (!status) {
+                        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);
+                    reactData.isDragRowMove = true;
+                    $xeTable.cacheRowMap();
+                    $xeTable.updateScrollYStatus();
+                    $xeTable.handleTableData(treeConfig && transform);
+                    if (!(treeConfig && transform)) {
+                        $xeTable.updateAfterDataIndex();
+                    }
+                    $xeTable.updateFooter();
+                    $xeTable.checkSelectionStatus();
+                    if (reactData.scrollYLoad) {
+                        $xeTable.updateScrollYSpace();
+                    }
+                    $xeTable.$nextTick().then(() => {
+                        $xeTable.updateCellAreas();
+                        return $xeTable.recalculate();
+                    });
+                    $xeTable.dispatchEvent('row-dragend', {
+                        oldRow: dragRow,
+                        newRow: prevDragRow,
+                        _index: {
+                            newIndex: nafIndex,
+                            oldIndex: oafIndex
+                        }
+                    }, evnt);
+                }).catch(() => {
+                });
+            }
+        }
+        hideRowDropTip($xeTable);
+        clearRowDropOrigin($xeTable);
+        clearRowDropTarget($xeTable);
+        reactData.dragRow = null;
+        setTimeout(() => {
+            reactData.isDragRowMove = false;
+        }, 500);
+    },
+    handleRowDragDragoverEvent(evnt) {
+        const $xeTable = this;
+        const internalData = $xeTable;
+        const reactData = $xeTable;
+        const trEl = evnt.currentTarget;
+        const rowid = trEl.getAttribute('rowid');
+        const row = $xeTable.getRowById(rowid);
+        clearRowDropTarget($xeTable);
+        if (row) {
+            evnt.preventDefault();
+            evnt.preventDefault();
+            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);
+            internalData.prevDragRow = row;
+            internalData.prevDragPos = dragPos;
+            $xeTable.dispatchEvent('row-dragover', {
+                oldRow: dragRow,
+                targetRow: row,
+                dragPos
+            }, evnt);
+        }
+        showRowDropTip(evnt, $xeTable);
+    },
+    handleCellDragMousedownEvent(evnt, params) {
+        var _a;
+        const $xeTable = this;
+        const reactData = $xeTable;
+        evnt.stopPropagation();
+        const rowOpts = $xeTable.computeRowOpts;
+        const { dragStartMethod } = rowOpts;
+        const { row } = params;
+        const dragEl = evnt.currentTarget;
+        const tdEl = (_a = dragEl.parentNode) === null || _a === void 0 ? void 0 : _a.parentNode;
+        const trEl = tdEl.parentNode;
+        reactData.isDragRowMove = false;
+        clearRowDropOrigin($xeTable);
+        if (dragStartMethod && !dragStartMethod(params)) {
+            trEl.draggable = false;
+            reactData.dragRow = null;
+            hideRowDropTip($xeTable);
+            return;
+        }
+        reactData.dragRow = row;
+        trEl.draggable = true;
+        addClass(trEl, 'row--drag-origin');
+        showRowDropTip(evnt, $xeTable);
+        updateRowDropTipContent($xeTable, tdEl);
+        $xeTable.dispatchEvent('row-dragstart', params, evnt);
+    },
+    handleCellDragMouseupEvent() {
+        const $xeTable = this;
+        const reactData = $xeTable;
+        clearRowDropOrigin($xeTable);
+        hideRowDropTip($xeTable);
+        reactData.dragRow = null;
+        reactData.isDragRowMove = false;
+    },
     setPendingRow(rows, status) {
         const pendingMaps = Object.assign({}, this.pendingRowMaps);
         const pendingList = [...this.pendingRowList];
@@ -5436,10 +5620,11 @@ const Methods = {
         const bodyWidth = bodyElem ? bodyElem.clientWidth : 0;
         const scrollHeight = bodyElem ? bodyElem.scrollHeight : 0;
         const scrollWidth = bodyElem ? bodyElem.scrollWidth : 0;
-        $xeTable.dispatchEvent('scroll', Object.assign({ bodyHeight,
+        const evntParams = Object.assign({ bodyHeight,
             bodyWidth,
             scrollHeight,
-            scrollWidth, isX: isRollX, isY: isRollY }, params), evnt);
+            scrollWidth, isX: isRollX, isY: isRollY }, params);
+        $xeTable.dispatchEvent('scroll', evntParams, evnt);
     },
     /**
      * 纵向 Y 可视渲染事件处理
@@ -5459,23 +5644,29 @@ const Methods = {
     debounceScrollYData: XEUtils.debounce(function () {
         this.loadScrollYData();
     }, debounceScrollYDuration, { leading: false, trailing: true }),
-    scrollXEvent(evnt) {
+    handleSyncScrollX(scrollLeft) {
         const $xeTable = this;
-        const wrapperEl = evnt.currentTarget;
         const tableHeader = $xeTable.$refs.tableHeader;
         const tableBody = $xeTable.$refs.tableBody;
         const tableFooter = $xeTable.$refs.tableFooter;
         const bodyElem = tableBody.$el;
         const headerElem = tableHeader ? tableHeader.$el : null;
         const footerElem = tableFooter ? tableFooter.$el : null;
-        const { scrollTop, scrollLeft } = wrapperEl;
-        const isRollX = true;
-        const isRollY = false;
         $xeTable.lastScrollLeft = scrollLeft;
         $xeTable.lastScrollTime = Date.now();
         setScrollLeft(bodyElem, scrollLeft);
         setScrollLeft(headerElem, scrollLeft);
         setScrollLeft(footerElem, scrollLeft);
+    },
+    scrollXEvent(evnt) {
+        const $xeTable = this;
+        const wrapperEl = evnt.currentTarget;
+        const { scrollTop, scrollLeft } = wrapperEl;
+        const isRollX = true;
+        const isRollY = false;
+        $xeTable.lastScrollLeft = scrollLeft;
+        $xeTable.lastScrollTime = Date.now();
+        $xeTable.handleSyncScrollX(scrollLeft);
         $xeTable.triggerScrollXEvent(evnt);
         $xeTable.handleScrollEvent(evnt, isRollY, isRollX, {
             type: 'table',
@@ -5487,23 +5678,29 @@ const Methods = {
     debounceScrollYCalculate: XEUtils.debounce(function () {
         this.updateScrollYSpace();
     }, 1000, { leading: false, trailing: true }),
-    scrollYEvent(evnt) {
+    handleSyncScrollY(scrollTop) {
         const $xeTable = this;
-        const wrapperEl = evnt.currentTarget;
         const tableBody = $xeTable.$refs.tableBody;
         const leftBody = $xeTable.$refs.leftBody;
         const rightBody = $xeTable.$refs.rightBody;
         const bodyElem = tableBody.$el;
         const leftElem = leftBody ? leftBody.$el : null;
         const rightElem = rightBody ? rightBody.$el : null;
-        const { scrollTop, scrollLeft } = wrapperEl;
-        const isRollX = false;
-        const isRollY = true;
         $xeTable.lastScrollTop = scrollTop;
         $xeTable.lastScrollTime = Date.now();
         setScrollTop(bodyElem, scrollTop);
         setScrollTop(leftElem, scrollTop);
         setScrollTop(rightElem, scrollTop);
+    },
+    scrollYEvent(evnt) {
+        const $xeTable = this;
+        const wrapperEl = evnt.currentTarget;
+        const { scrollTop, scrollLeft } = wrapperEl;
+        const isRollX = false;
+        const isRollY = true;
+        $xeTable.lastScrollTop = scrollTop;
+        $xeTable.lastScrollTime = Date.now();
+        $xeTable.handleSyncScrollY(scrollTop);
         $xeTable.triggerScrollYEvent(evnt);
         $xeTable.handleScrollEvent(evnt, isRollY, isRollX, {
             type: 'table',
@@ -5589,7 +5786,7 @@ const Methods = {
     },
     updateScrollXData() {
         // this.tableColumn = []
-        this.$nextTick(() => {
+        return this.$nextTick().then(() => {
             this.handleTableColumn();
             this.updateScrollXSpace();
         });
@@ -5638,7 +5835,7 @@ const Methods = {
     updateScrollYData() {
         const $xeTable = this;
         // this.tableData = []
-        this.$nextTick(() => {
+        return this.$nextTick().then(() => {
             this.handleTableData();
             calcCellHeight($xeTable);
             this.updateScrollYSpace();

package/es/table/src/props.js

@@ -159,6 +159,8 @@ export default {
     cellConfig: Object,
     // 行配置信息
     rowConfig: Object,
+    // 可拖拽配置项
+    dragConfig: Object,
     // 列调整配置项
     resizableConfig: Object,
     // 序号配置项

package/es/table/src/table.js

@@ -345,6 +345,9 @@ export default {
                 isHeader: false,
                 isFooter: false
             },
+            isDragRowMove: false,
+            dragRow: null,
+            dragTipText: '',
             _isLoading: false
         };
     },
@@ -399,6 +402,9 @@ export default {
         computeRowOpts() {
             return Object.assign({}, getConfig().table.rowConfig, this.rowConfig);
         },
+        computeDragOpts() {
+            return Object.assign({}, getConfig().table.dragConfig, this.dragConfig);
+        },
         resizeOpts() {
             return this.computeResizeOpts;
         },
@@ -1263,9 +1269,18 @@ export default {
                     }
                 })
                 : _e(),
+            /**
+               * 拖拽提示
+               */
+            rowOpts.drag
+                ? h('div', {
+                    ref: 'refRowDragTipElem',
+                    class: 'vxe-table--row-drag-hint'
+                }, getI18n('vxe.table.dragTip', [this.dragTipText]))
+                : _e(),
             h('div', {}, [
                 /**
-                 * 通用提示
+                 * 提示相关
                  */
                 VxeUITooltipComponent
                     ? h(VxeUITooltipComponent, {