vxe-table 4.8.16 → 4.9.1

package/es/table/src/body.js

@@ -1,7 +1,7 @@
 import { createCommentVNode, defineComponent, TransitionGroup, h, ref, inject, nextTick, onBeforeUnmount, onMounted, onUnmounted } from 'vue';
 import XEUtils from 'xe-utils';
 import { VxeUI } from '../../ui';
-import { mergeBodyMethod, getRowid } from './util';
+import { mergeBodyMethod, getRowid, getRefElem } from './util';
 import { updateCellTitle, getPropClass, setScrollTop, setScrollLeft } from '../../ui/src/dom';
 import { isEnableConf } from '../../ui/src/utils';
 import { getSlotVNs } from '../../ui/src/vn';
@@ -338,19 +338,20 @@ export default defineComponent({
                     getPropClass(compCellClassName, params),
                     getPropClass(className, params),
                     getPropClass(allCellClassName, params)
-                ], key: columnKey || columnOpts.useKey || rowOpts.useKey ? colid : $columnIndex }, attrs), { style: Object.assign({
+                ], key: columnKey || columnOpts.useKey || rowOpts.useKey || columnOpts.drag ? colid : $columnIndex }, attrs), { style: Object.assign({
                     height: cellHeight
                 }, XEUtils.isFunction(compCellStyle) ? compCellStyle(params) : compCellStyle, XEUtils.isFunction(cellStyle) ? cellStyle(params) : cellStyle) }), tdOns), tdVNs);
         };
         const renderRows = (fixedType, tableData, tableColumn) => {
             const { stripe, rowKey, highlightHoverRow, rowClassName, rowStyle, showOverflow: allColumnOverflow, editConfig, treeConfig } = tableProps;
-            const { hasFixedColumn, treeExpandedMaps, scrollYLoad, rowExpandedMaps, expandColumn, selectRadioRow, pendingRowMaps, pendingRowList } = tableReactData;
+            const { hasFixedColumn, treeExpandedMaps, scrollYLoad, rowExpandedMaps, expandColumn, selectRadioRow, pendingRowMaps, pendingRowList, isDragColMove } = tableReactData;
             const { fullAllDataRowIdData } = tableInternalData;
             const checkboxOpts = computeCheckboxOpts.value;
             const radioOpts = computeRadioOpts.value;
             const treeOpts = computeTreeOpts.value;
             const editOpts = computeEditOpts.value;
             const rowOpts = computeRowOpts.value;
+            const columnOpts = computeColumnOpts.value;
             const { transform } = treeOpts;
             const childrenField = treeOpts.children || treeOpts.childrenField;
             const rows = [];
@@ -405,23 +406,29 @@ export default defineComponent({
                     rowChildren = row[childrenField];
                     isExpandTree = rowChildren && rowChildren.length > 0 && !!treeExpandedMaps[rowid];
                 }
-                rows.push(h('tr', Object.assign({ class: [
-                        'vxe-body--row',
-                        treeConfig ? `row--level-${rowLevel}` : '',
-                        {
-                            'row--stripe': stripe && ($xeTable.getVTRowIndex(row) + 1) % 2 === 0,
-                            'is--new': isNewRow,
-                            'is--expand-row': isExpandRow,
-                            'is--expand-tree': isExpandTree,
-                            'row--new': isNewRow && (editOpts.showStatus || editOpts.showInsertStatus),
-                            'row--radio': radioOpts.highlight && $xeTable.eqRow(selectRadioRow, row),
-                            'row--checked': checkboxOpts.highlight && $xeTable.isCheckedByCheckboxRow(row),
-                            'row--pending': pendingRowList.length && !!pendingRowMaps[rowid]
-                        },
-                        getPropClass(rowClassName, params)
-                    ], rowid: rowid, style: rowStyle ? (XEUtils.isFunction(rowStyle) ? rowStyle(params) : rowStyle) : null, key: rowKey || rowOpts.useKey || rowOpts.drag || treeConfig ? rowid : $rowIndex }, trOn), tableColumn.map((column, $columnIndex) => {
+                const trClass = [
+                    'vxe-body--row',
+                    treeConfig ? `row--level-${rowLevel}` : '',
+                    {
+                        'row--stripe': stripe && ($xeTable.getVTRowIndex(row) + 1) % 2 === 0,
+                        'is--new': isNewRow,
+                        'is--expand-row': isExpandRow,
+                        'is--expand-tree': isExpandTree,
+                        'row--new': isNewRow && (editOpts.showStatus || editOpts.showInsertStatus),
+                        'row--radio': radioOpts.highlight && $xeTable.eqRow(selectRadioRow, row),
+                        'row--checked': checkboxOpts.highlight && $xeTable.isCheckedByCheckboxRow(row),
+                        'row--pending': pendingRowList.length && !!pendingRowMaps[rowid]
+                    },
+                    getPropClass(rowClassName, params)
+                ];
+                const tdVNs = tableColumn.map((column, $columnIndex) => {
                     return renderColumn(seq, rowid, fixedType, rowLevel, row, rowIndex, $rowIndex, _rowIndex, column, $columnIndex, tableColumn, tableData);
-                })));
+                });
+                rows.push(columnOpts.drag
+                    ? h(TransitionGroup, Object.assign({ name: `vxe-header--col-list${isDragColMove ? '' : '-disabled'}`, tag: 'tr', class: trClass, rowid: rowid, style: rowStyle ? (XEUtils.isFunction(rowStyle) ? rowStyle(params) : rowStyle) : null, key: rowKey || rowOpts.useKey || rowOpts.drag || treeConfig ? rowid : $rowIndex }, trOn), {
+                        default: () => tdVNs
+                    })
+                    : h('tr', Object.assign({ class: trClass, rowid: rowid, style: rowStyle ? (XEUtils.isFunction(rowStyle) ? rowStyle(params) : rowStyle) : null, key: rowKey || rowOpts.useKey || rowOpts.drag || treeConfig ? rowid : $rowIndex }, trOn), tdVNs));
                 // 如果行被展开了
                 if (isExpandRow) {
                     const expandOpts = computeExpandOpts.value;
@@ -538,10 +545,8 @@ export default defineComponent({
             const leftElem = leftBody ? leftBody.$el : null;
             const rightElem = rightBody ? rightBody.$el : null;
             const bodyElem = tableBody.$el;
-            const bodyYRef = elemStore['main-body-ySpace'];
-            const bodyYElem = bodyYRef ? bodyYRef.value : null;
-            const bodyXRef = elemStore['main-body-xSpace'];
-            const bodyXElem = bodyXRef ? bodyXRef.value : null;
+            const bodyYElem = getRefElem(elemStore['main-body-ySpace']);
+            const bodyXElem = getRefElem(elemStore['main-body-xSpace']);
             const bodyHeight = scrollYLoad && bodyYElem ? bodyYElem.clientHeight : bodyElem.clientHeight;
             const bodyWidth = scrollXLoad && bodyXElem ? bodyXElem.clientWidth : bodyElem.clientWidth;
             const remainSize = isPrevWheelTop === isTopWheel ? Math.max(0, wheelYSize - wheelYTotal) : 0;
@@ -664,6 +669,7 @@ export default defineComponent({
             const emptyOpts = computeEmptyOpts.value;
             const keyboardOpts = computeKeyboardOpts.value;
             const mouseOpts = computeMouseOpts.value;
+            const columnOpts = computeColumnOpts.value;
             // const isMergeLeftFixedExceeded = computeIsMergeLeftFixedExceeded.value
             // const isMergeRightFixedExceeded = computeIsMergeRightFixedExceeded.value
             // 如果是使用优化模式
@@ -737,8 +743,9 @@ export default defineComponent({
                     /**
                      * 内容
                      */
-                    rowOpts.drag
+                    rowOpts.drag || columnOpts.drag
                         ? h(TransitionGroup, {
+                            ref: refBodyTBody,
                             name: `vxe-body--row-list${isDragRowMove ? '' : '-disabled'}`,
                             tag: 'tbody'
                         }, {

package/es/table/src/cell.js

@@ -9,43 +9,44 @@ const { getI18n, getIcon, renderer, formats, renderEmptyElement } = VxeUI;
 function renderTitlePrefixIcon(params) {
     const { $table, column } = params;
     const titlePrefix = column.titlePrefix || column.titleHelp;
-    return titlePrefix
-        ? [
-            h('i', {
-                class: ['vxe-cell-title-prefix-icon', titlePrefix.icon || getIcon().TABLE_TITLE_PREFIX],
-                onMouseenter(evnt) {
-                    $table.triggerHeaderTitleEvent(evnt, titlePrefix, params);
-                },
-                onMouseleave(evnt) {
-                    $table.handleTargetLeaveEvent(evnt);
-                }
-            })
-        ]
-        : [];
+    if (titlePrefix) {
+        return h('i', {
+            class: ['vxe-cell-title-prefix-icon', titlePrefix.icon || getIcon().TABLE_TITLE_PREFIX],
+            onMouseenter(evnt) {
+                $table.triggerHeaderTitleEvent(evnt, titlePrefix, params);
+            },
+            onMouseleave(evnt) {
+                $table.handleTargetLeaveEvent(evnt);
+            }
+        });
+    }
+    return renderEmptyElement($table);
 }
 function renderTitleSuffixIcon(params) {
     const { $table, column } = params;
     const titleSuffix = column.titleSuffix;
-    return titleSuffix
-        ? [
-            h('i', {
-                class: ['vxe-cell-title-suffix-icon', titleSuffix.icon || getIcon().TABLE_TITLE_SUFFIX],
-                onMouseenter(evnt) {
-                    $table.triggerHeaderTitleEvent(evnt, titleSuffix, params);
-                },
-                onMouseleave(evnt) {
-                    $table.handleTargetLeaveEvent(evnt);
-                }
-            })
-        ]
-        : [];
+    if (titleSuffix) {
+        h('i', {
+            class: ['vxe-cell-title-suffix-icon', titleSuffix.icon || getIcon().TABLE_TITLE_SUFFIX],
+            onMouseenter(evnt) {
+                $table.triggerHeaderTitleEvent(evnt, titleSuffix, params);
+            },
+            onMouseleave(evnt) {
+                $table.handleTargetLeaveEvent(evnt);
+            }
+        });
+    }
+    return renderEmptyElement($table);
 }
 function renderCellDragIcon(params) {
     const { $table } = params;
-    const { computeDragOpts } = $table.getComputeMaps();
-    const dragOpts = computeDragOpts.value;
-    const { rowIcon, rowDisabledMethod } = dragOpts;
-    const isDisabled = rowDisabledMethod && rowDisabledMethod(params);
+    const tableProps = $table.props;
+    const { dragConfig } = tableProps;
+    const { computeRowDragOpts } = $table.getComputeMaps();
+    const rowDragOpts = computeRowDragOpts.value;
+    const { icon, disabledMethod } = rowDragOpts;
+    const rDisabledMethod = disabledMethod || (dragConfig ? dragConfig.rowDisabledMethod : null);
+    const isDisabled = rDisabledMethod && rDisabledMethod(params);
     return h('span', {
         key: 'dg',
         class: ['vxe-cell--drag-handle', {
@@ -59,7 +60,7 @@ function renderCellDragIcon(params) {
         onMouseup: $table.handleCellDragMouseupEvent
     }, [
         h('i', {
-            class: rowIcon || getIcon().TABLE_DRAG_ROW
+            class: icon || (dragConfig ? dragConfig.rowIcon : '') || getIcon().TABLE_DRAG_ROW
         })
     ]);
 }
@@ -67,19 +68,58 @@ function renderCellBaseVNs(params, content) {
     const { $table, column, level } = params;
     const { dragSort } = column;
     const tableProps = $table.props;
-    const { treeConfig } = tableProps;
-    const { computeRowOpts, computeDragOpts } = $table.getComputeMaps();
+    const { treeConfig, dragConfig } = tableProps;
+    const { computeRowOpts, computeRowDragOpts } = $table.getComputeMaps();
     const rowOpts = computeRowOpts.value;
-    const dragOpts = computeDragOpts.value;
-    const { showRowIcon, rowVisibleMethod } = dragOpts;
+    const rowDragOpts = computeRowDragOpts.value;
+    const { showIcon, visibleMethod } = rowDragOpts;
+    const rVisibleMethod = visibleMethod || (dragConfig ? dragConfig.rowVisibleMethod : null);
     const vns = XEUtils.isArray(content) ? content : [content];
-    if (dragSort && rowOpts.drag && (showRowIcon && (!rowVisibleMethod || rowVisibleMethod(params)))) {
+    if (dragSort && rowOpts.drag && ((showIcon || (dragConfig ? dragConfig.showRowIcon : false)) && (!rVisibleMethod || rVisibleMethod(params)))) {
         if (!treeConfig || !level) {
             vns.unshift(renderCellDragIcon(params));
         }
     }
     return vns;
 }
+function renderHeaderCellDragIcon(params) {
+    const { $table, column } = params;
+    const { computeColumnOpts, computeColumnDragOpts } = $table.getComputeMaps();
+    const columnOpts = computeColumnOpts.value;
+    const columnDragOpts = computeColumnDragOpts.value;
+    const { showIcon, icon, visibleMethod, disabledMethod } = columnDragOpts;
+    const isDisabled = disabledMethod && disabledMethod(params);
+    if (columnOpts.drag && showIcon && (!visibleMethod || visibleMethod(params))) {
+        if (!(column.fixed || column.parentId)) {
+            return h('span', {
+                key: 'dg',
+                class: ['vxe-cell--drag-handle', {
+                        'is--disabled': isDisabled
+                    }],
+                onMousedown(evnt) {
+                    if (!isDisabled) {
+                        $table.handleHeaderCellDragMousedownEvent(evnt, params);
+                    }
+                },
+                onMouseup: $table.handleHeaderCellDragMouseupEvent
+            }, [
+                h('i', {
+                    class: icon || getIcon().TABLE_DRAG_COLUMN
+                })
+            ]);
+        }
+    }
+    return renderEmptyElement($table);
+}
+function renderHeaderCellBaseVNs(params, content) {
+    const vns = [
+        renderTitlePrefixIcon(params),
+        renderHeaderCellDragIcon(params),
+        ...(XEUtils.isArray(content) ? content : [content]),
+        renderTitleSuffixIcon(params)
+    ];
+    return vns;
+}
 function renderTitleContent(params, content) {
     const { $table, column } = params;
     const { props, reactData } = $table;
@@ -243,7 +283,7 @@ export const Cell = {
         return createColumn($xeTable, columnOpts, renConfs);
     },
     /**
-     * 单元格
+     * 列头标题
      */
     renderHeaderTitle(params) {
         const { $table, column } = params;
@@ -265,7 +305,7 @@ export const Cell = {
         return renderTitleContent(params, formatText(column.getTitle(), 1));
     },
     renderDefaultHeader(params) {
-        return renderTitlePrefixIcon(params).concat(Cell.renderHeaderTitle(params)).concat(renderTitleSuffixIcon(params));
+        return renderHeaderCellBaseVNs(params, Cell.renderHeaderTitle(params));
     },
     renderDefaultCell(params) {
         const { $table, row, column } = params;
@@ -377,13 +417,13 @@ export const Cell = {
         ];
     },
     /**
-     * 索引
+     * 序号
      */
     renderSeqHeader(params) {
         const { $table, column } = params;
         const { slots } = column;
         const headerSlot = slots ? slots.header : null;
-        return renderTitleContent(params, headerSlot ? $table.callSlot(headerSlot, params) : formatText(column.getTitle(), 1));
+        return renderHeaderCellBaseVNs(params, renderTitleContent(params, headerSlot ? $table.callSlot(headerSlot, params) : formatText(column.getTitle(), 1)));
     },
     renderSeqCell(params) {
         const { $table, column } = params;
@@ -413,13 +453,13 @@ export const Cell = {
         const { slots } = column;
         const headerSlot = slots ? slots.header : null;
         const titleSlot = slots ? slots.title : null;
-        return renderTitleContent(params, headerSlot
+        return renderHeaderCellBaseVNs(params, renderTitleContent(params, headerSlot
             ? $table.callSlot(headerSlot, params)
             : [
                 h('span', {
                     class: 'vxe-radio--label'
                 }, titleSlot ? $table.callSlot(titleSlot, params) : formatText(column.getTitle(), 1))
-            ]);
+            ]));
     },
     renderRadioCell(params) {
         const { $table, column, isHidden } = params;
@@ -499,16 +539,16 @@ export const Cell = {
         }
         const checkboxParams = Object.assign(Object.assign({}, params), { checked: isAllCheckboxSelected, disabled: isAllCheckboxDisabled, indeterminate: isAllCheckboxIndeterminate });
         if (headerSlot) {
-            return renderTitleContent(checkboxParams, $table.callSlot(headerSlot, checkboxParams));
+            return renderHeaderCellBaseVNs(params, renderTitleContent(checkboxParams, $table.callSlot(headerSlot, checkboxParams)));
         }
         if (checkboxOpts.checkStrictly ? !checkboxOpts.showHeader : checkboxOpts.showHeader === false) {
-            return renderTitleContent(checkboxParams, [
+            return renderHeaderCellBaseVNs(params, renderTitleContent(checkboxParams, [
                 h('span', {
                     class: 'vxe-checkbox--label'
                 }, titleSlot ? $table.callSlot(titleSlot, checkboxParams) : headerTitle)
-            ]);
+            ]));
         }
-        return renderTitleContent(checkboxParams, [
+        return renderHeaderCellBaseVNs(params, renderTitleContent(checkboxParams, [
             h('span', Object.assign({ class: ['vxe-cell--checkbox', {
                         'is--checked': isAllCheckboxSelected,
                         'is--disabled': isAllCheckboxDisabled,
@@ -524,7 +564,7 @@ export const Cell = {
                     }, titleSlot ? $table.callSlot(titleSlot, checkboxParams) : headerTitle)
                 ]
                 : []))
-        ]);
+        ]));
     },
     renderCheckboxCell(params) {
         const { $table, row, column, isHidden } = params;
@@ -736,15 +776,13 @@ export const Cell = {
      * 排序和筛选
      */
     renderSortAndFilterHeader(params) {
-        return Cell.renderDefaultHeader(params)
-            .concat(Cell.renderSortIcon(params))
-            .concat(Cell.renderFilterIcon(params));
+        return renderHeaderCellBaseVNs(params, Cell.renderHeaderTitle(params).concat(Cell.renderSortIcon(params).concat(Cell.renderFilterIcon(params))));
     },
     /**
      * 排序
      */
     renderSortHeader(params) {
-        return Cell.renderDefaultHeader(params).concat(Cell.renderSortIcon(params));
+        return renderHeaderCellBaseVNs(params, Cell.renderHeaderTitle(params).concat(Cell.renderSortIcon(params)));
     },
     renderSortIcon(params) {
         const { $table, column } = params;
@@ -786,7 +824,7 @@ export const Cell = {
      * 筛选
      */
     renderFilterHeader(params) {
-        return Cell.renderDefaultHeader(params).concat(Cell.renderFilterIcon(params));
+        return renderHeaderCellBaseVNs(params, Cell.renderHeaderTitle(params).concat(Cell.renderFilterIcon(params)));
     },
     renderFilterIcon(params) {
         const { $table, column, hasFilter } = params;
@@ -832,22 +870,24 @@ export const Cell = {
                 isRequired = columnRules.some((rule) => rule.required);
             }
         }
-        return (isEnableConf(editConfig)
-            ? [
+        let editIconVNs = [];
+        if (isEnableConf(editConfig)) {
+            editIconVNs = [
                 isRequired && editOpts.showAsterisk
                     ? h('i', {
                         class: 'vxe-cell--required-icon'
                     })
-                    : null,
+                    : renderEmptyElement($table),
                 isEnableConf(editRender) && editOpts.showIcon
                     ? h('i', {
                         class: ['vxe-cell--edit-icon', editOpts.icon || getIcon().TABLE_EDIT]
                     })
-                    : null
-            ]
-            : []).concat(Cell.renderDefaultHeader(params))
+                    : renderEmptyElement($table)
+            ];
+        }
+        return renderHeaderCellBaseVNs(params, editIconVNs.concat(Cell.renderHeaderTitle(params))
             .concat(sortable ? Cell.renderSortIcon(params) : [])
-            .concat(filters ? Cell.renderFilterIcon(params) : []);
+            .concat(filters ? Cell.renderFilterIcon(params) : []));
     },
     // 行格编辑模式
     renderRowEdit(params) {

package/es/table/src/emits.js

@@ -42,6 +42,9 @@ export default [
     'row-dragstart',
     'row-dragover',
     'row-dragend',
+    'column-dragstart',
+    'column-dragover',
+    'column-dragend',
     'edit-actived',
     'edit-activated',
     'edit-disabled',