vxe-table 3.11.38 → 3.12.0-beta.0

package/es/table/src/body.js

@@ -352,15 +352,9 @@ function renderRows(h, _vm, $xeTable, fixedType, tableData, tableColumn) {
         }
         // 拖拽行事件
         if (rowOpts.drag && (!treeConfig || transform)) {
-            trOn.dragstart = (evnt) => {
-                $xeTable.handleRowDragDragstartEvent(evnt);
-            };
-            trOn.dragover = (evnt) => {
-                $xeTable.handleRowDragDragoverEvent(evnt);
-            };
-            trOn.dragend = (evnt) => {
-                $xeTable.handleRowDragDragendEvent(evnt);
-            };
+            trOn.dragstart = $xeTable.handleRowDragDragstartEvent;
+            trOn.dragend = $xeTable.handleRowDragDragendEvent;
+            trOn.dragover = $xeTable.handleRowDragDragoverEvent;
         }
         const trClass = [
             'vxe-body--row',
@@ -498,46 +492,98 @@ export default {
         elemStore[`${prefix}emptyBlock`] = null;
     },
     render(h) {
+        const props = this;
         const $xeTable = this.$parent;
-        const { _e, $parent: $xetable, fixedColumn, fixedType } = this;
+        const tableProps = $xeTable;
+        const tableReactData = $xeTable;
+        const tableInternalData = $xeTable;
+        const { tId, $scopedSlots } = $xeTable;
+        const { fixedColumn, fixedType, tableColumn } = props;
+        const { showOverflow: allColumnOverflow, spanMethod, footerSpanMethod, mouseConfig } = tableProps;
+        const { tableData, scrollXLoad, scrollYLoad, isAllOverflow, isDragRowMove, expandColumn, dragRow, dragCol } = tableReactData;
+        const { visibleColumn, fullAllDataRowIdData, fullColumnIdData } = tableInternalData;
         const rowOpts = $xeTable.computeRowOpts;
+        const sYOpts = $xeTable.computeSYOpts;
+        const emptyOpts = $xeTable.computeEmptyOpts;
+        const mouseOpts = $xeTable.computeMouseOpts;
         const rowDragOpts = $xeTable.computeRowDragOpts;
-        let { $scopedSlots, tId, tableData, tableColumn, visibleColumn, expandColumn, showOverflow: allColumnOverflow, keyboardConfig, keyboardOpts, mergeList, spanMethod, scrollXLoad, scrollYLoad, isAllOverflow, emptyOpts, mouseConfig, mouseOpts, sYOpts, isDragRowMove } = $xetable;
-        // 如果是使用优化模式
+        let renderDataList = tableData;
+        let renderColumnList = tableColumn;
         if (fixedType) {
-            // 如果存在展开行使用全量渲染
-            if (!expandColumn && (scrollXLoad || scrollYLoad || (allColumnOverflow ? isAllOverflow : allColumnOverflow))) {
-                if (!mergeList.length && !spanMethod && !(keyboardConfig && keyboardOpts.isMerge)) {
-                    tableColumn = fixedColumn;
+            // 如果是使用优化模式
+            if (scrollXLoad || scrollYLoad || (allColumnOverflow && isAllOverflow)) {
+                // 如果不支持优化模式
+                if (expandColumn || spanMethod || footerSpanMethod) {
+                    renderColumnList = visibleColumn;
                 }
                 else {
-                    tableColumn = visibleColumn;
-                    // 检查固定列是否被合并，合并范围是否超出固定列
-                    // if (mergeList.length && !isMergeLeftFixedExceeded && fixedType === 'left') {
-                    //   tableColumn = fixedColumn
-                    // } else if (mergeList.length && !isMergeRightFixedExceeded && fixedType === 'right') {
-                    //   tableColumn = fixedColumn
-                    // } else {
-                    //   tableColumn = visibleColumn
-                    // }
+                    renderColumnList = fixedColumn || [];
                 }
             }
             else {
-                tableColumn = visibleColumn;
+                renderColumnList = visibleColumn;
+            }
+        }
+        // 行拖拽
+        if (scrollYLoad && dragRow) {
+            if (renderDataList.length > 2) {
+                const dRowRest = fullAllDataRowIdData[getRowid($xeTable, dragRow)];
+                if (dRowRest) {
+                    const drIndex = dRowRest._index;
+                    const firstRow = renderDataList[0];
+                    const lastRow = renderDataList[renderDataList.length - 1];
+                    const firstRowRest = fullAllDataRowIdData[getRowid($xeTable, firstRow)];
+                    const lastRowRest = fullAllDataRowIdData[getRowid($xeTable, lastRow)];
+                    if (firstRowRest && lastRowRest) {
+                        const frIndex = firstRowRest._index;
+                        const lrIndex = lastRowRest._index;
+                        if (drIndex < frIndex) {
+                            renderDataList = [dragRow].concat(renderDataList);
+                        }
+                        else if (drIndex > lrIndex) {
+                            renderDataList = renderDataList.concat([dragRow]);
+                        }
+                    }
+                }
+            }
+        }
+        if (!fixedType) {
+            // 列拖拽
+            if (scrollXLoad && dragCol) {
+                if (renderColumnList.length > 2) {
+                    const dCowRest = fullColumnIdData[dragCol.id];
+                    if (dCowRest) {
+                        const dcIndex = dCowRest._index;
+                        const firstCol = renderColumnList[0];
+                        const lastCol = renderColumnList[renderColumnList.length - 1];
+                        const firstColRest = fullColumnIdData[firstCol.id];
+                        const lastColRest = fullColumnIdData[lastCol.id];
+                        if (firstColRest && lastColRest) {
+                            const fcIndex = firstColRest._index;
+                            const lcIndex = lastColRest._index;
+                            if (dcIndex < fcIndex) {
+                                renderColumnList = [dragCol].concat(renderColumnList);
+                            }
+                            else if (dcIndex > lcIndex) {
+                                renderColumnList = renderColumnList.concat([dragCol]);
+                            }
+                        }
+                    }
+                }
             }
         }
         let emptyContent;
         if ($scopedSlots.empty) {
-            emptyContent = $scopedSlots.empty.call(this, { $table: $xetable }, h);
+            emptyContent = $scopedSlots.empty.call(this, { $table: $xeTable, $grid: $xeTable.xegrid }, h);
         }
         else {
             const compConf = emptyOpts.name ? renderer.get(emptyOpts.name) : null;
             const rtEmptyView = compConf ? (compConf.renderTableEmpty || compConf.renderTableEmptyView || compConf.renderEmpty) : null;
             if (rtEmptyView) {
-                emptyContent = getSlotVNs(rtEmptyView.call(this, h, emptyOpts, { $table: $xetable }));
+                emptyContent = getSlotVNs(rtEmptyView.call(this, h, emptyOpts, { $table: $xeTable }));
             }
             else {
-                emptyContent = $xetable.emptyText || getI18n('vxe.table.emptyText');
+                emptyContent = tableProps.emptyText || getI18n('vxe.table.emptyText');
             }
         }
         const ons = {
@@ -555,7 +601,7 @@ export default {
             on: ons
         }, [
             fixedType
-                ? _e()
+                ? renderEmptyElement($xeTable)
                 : h('div', {
                     class: 'vxe-body--x-space',
                     ref: 'xSpace'
@@ -579,7 +625,7 @@ export default {
                  */
                 h('colgroup', {
                     ref: 'colgroup'
-                }, tableColumn.map((column, $columnIndex) => {
+                }, renderColumnList.map((column, $columnIndex) => {
                     return h('col', {
                         attrs: {
                             name: column.id
@@ -596,10 +642,10 @@ export default {
                             tag: 'tbody',
                             name: `vxe-body--row-list${isDragRowMove ? '' : '-disabled'}`
                         }
-                    }, renderRows(h, this, $xetable, fixedType, tableData, tableColumn))
+                    }, renderRows(h, this, $xeTable, fixedType, renderDataList, renderColumnList))
                     : h('tbody', {
                         ref: 'tbody'
-                    }, renderRows(h, this, $xetable, fixedType, tableData, tableColumn))
+                    }, renderRows(h, this, $xeTable, fixedType, renderDataList, renderColumnList))
             ]),
             h('div', {
                 class: 'vxe-table--checkbox-range'
@@ -616,8 +662,8 @@ export default {
                                 class: 'vxe-table--cell-main-area-btn',
                                 on: {
                                     mousedown(evnt) {
-                                        if ($xetable.triggerCellAreaExtendMousedownEvent) {
-                                            $xetable.triggerCellAreaExtendMousedownEvent(evnt, { $table: $xetable, fixed: fixedType, type: renderType });
+                                        if ($xeTable.triggerCellAreaExtendMousedownEvent) {
+                                            $xeTable.triggerCellAreaExtendMousedownEvent(evnt, { $table: $xeTable, fixed: fixedType, type: renderType });
                                         }
                                     }
                                 }

package/es/table/src/footer.js

@@ -3,7 +3,7 @@ import { VxeUI } from '../../ui';
 import { getClass } from '../../ui/src/utils';
 import { updateCellTitle, setScrollLeft } from '../../ui/src/dom';
 const renderType = 'footer';
-const { renderer } = VxeUI;
+const { renderer, renderEmptyElement } = VxeUI;
 function mergeFooterMethod(mergeFooterList, _rowIndex, _columnIndex) {
     for (let mIndex = 0; mIndex < mergeFooterList.length; mIndex++) {
         const { row: mergeRowIndex, col: mergeColIndex, rowspan: mergeRowspan, colspan: mergeColspan } = mergeFooterList[mIndex];
@@ -147,15 +147,16 @@ function renderRows(h, _vm, tableColumn, footerTableData, row, $rowIndex, _rowIn
         ]
         : []);
 }
-function renderHeads(h, _vm, footerTableData) {
+function renderHeads(h, _vm, renderColumnList) {
     const $xeTable = _vm.$parent;
+    const props = _vm;
     const columnOpts = $xeTable.computeColumnOpts;
     const columnDragOpts = $xeTable.computeColumnDragOpts;
-    const { $parent: $xetable, fixedType, tableColumn } = _vm;
-    const { footerRowClassName, footerRowStyle, isDragColMove } = $xetable;
+    const { fixedType, footerTableData } = props;
+    const { footerRowClassName, footerRowStyle, isDragColMove } = $xeTable;
     return footerTableData.map((row, $rowIndex) => {
         const _rowIndex = $rowIndex;
-        const rowParams = { $table: $xetable, row, _rowIndex, $rowIndex, fixed: fixedType, type: renderType };
+        const rowParams = { $table: $xeTable, row, _rowIndex, $rowIndex, fixed: fixedType, type: renderType };
         if (columnOpts.drag && columnDragOpts.animation) {
             return h('transition-group', {
                 key: $rowIndex,
@@ -168,7 +169,7 @@ function renderHeads(h, _vm, footerTableData) {
                     ],
                     style: footerRowStyle ? (XEUtils.isFunction(footerRowStyle) ? footerRowStyle(rowParams) : footerRowStyle) : null
                 }
-            }, renderRows(h, _vm, tableColumn, footerTableData, row, $rowIndex, _rowIndex));
+            }, renderRows(h, _vm, renderColumnList, footerTableData, row, $rowIndex, _rowIndex));
         }
         return h('tr', {
             key: $rowIndex,
@@ -177,7 +178,7 @@ function renderHeads(h, _vm, footerTableData) {
                 footerRowClassName ? XEUtils.isFunction(footerRowClassName) ? footerRowClassName(rowParams) : footerRowClassName : ''
             ],
             style: footerRowStyle ? (XEUtils.isFunction(footerRowStyle) ? footerRowStyle(rowParams) : footerRowStyle) : null
-        }, renderRows(h, _vm, tableColumn, footerTableData, row, $rowIndex, _rowIndex));
+        }, renderRows(h, _vm, renderColumnList, footerTableData, row, $rowIndex, _rowIndex));
     });
 }
 export default {
@@ -210,21 +211,56 @@ export default {
         elemStore[`${prefix}xSpace`] = null;
     },
     render(h) {
-        let { _e, $parent: $xetable, fixedType, fixedColumn, tableColumn, footerTableData } = this;
-        const { tId, mergeFooterList, footerSpanMethod, scrollXLoad, showFooterOverflow: allColumnFooterOverflow, scrollbarWidth, visibleColumn, expandColumn } = $xetable;
+        const props = this;
+        const $xeTable = this.$parent;
+        const tableProps = $xeTable;
+        const tableReactData = $xeTable;
+        const tableInternalData = $xeTable;
+        const { tId } = $xeTable;
+        const { fixedType, fixedColumn, tableColumn } = props;
+        const { spanMethod, footerSpanMethod, showFooterOverflow: allColumnFooterOverflow } = tableProps;
+        const { visibleColumn, fullColumnIdData } = tableInternalData;
+        const { scrollXLoad, scrollYLoad, scrollbarWidth, dragCol } = tableReactData;
+        let renderColumnList = tableColumn;
         // 如果是使用优化模式
         if (fixedType) {
-            // 如果存在展开行使用全量渲染
-            if (!expandColumn && (scrollXLoad || allColumnFooterOverflow)) {
-                if (!mergeFooterList.length || !footerSpanMethod) {
-                    tableColumn = fixedColumn;
+            // 如果是使用优化模式
+            if (scrollXLoad || scrollYLoad || allColumnFooterOverflow) {
+                // 如果不支持优化模式
+                if (spanMethod || footerSpanMethod) {
+                    renderColumnList = visibleColumn;
                 }
                 else {
-                    tableColumn = visibleColumn;
+                    renderColumnList = fixedColumn || [];
                 }
             }
             else {
-                tableColumn = visibleColumn;
+                renderColumnList = visibleColumn;
+            }
+        }
+        if (!fixedType) {
+            // 列拖拽
+            if (scrollXLoad && dragCol) {
+                if (renderColumnList.length > 2) {
+                    const dCowRest = fullColumnIdData[dragCol.id];
+                    if (dCowRest) {
+                        const dcIndex = dCowRest._index;
+                        const firstCol = renderColumnList[0];
+                        const lastCol = renderColumnList[renderColumnList.length - 1];
+                        const firstColRest = fullColumnIdData[firstCol.id];
+                        const lastColRest = fullColumnIdData[lastCol.id];
+                        if (firstColRest && lastColRest) {
+                            const fcIndex = firstColRest._index;
+                            const lcIndex = lastColRest._index;
+                            if (dcIndex < fcIndex) {
+                                renderColumnList = [dragCol].concat(renderColumnList);
+                            }
+                            else if (dcIndex > lcIndex) {
+                                renderColumnList = renderColumnList.concat([dragCol]);
+                            }
+                        }
+                    }
+                }
             }
         }
         const ons = {};
@@ -239,7 +275,7 @@ export default {
             on: ons
         }, [
             fixedType
-                ? _e()
+                ? renderEmptyElement($xeTable)
                 : h('div', {
                     class: 'vxe-body--x-space',
                     ref: 'xSpace'
@@ -259,7 +295,7 @@ export default {
                  */
                 h('colgroup', {
                     ref: 'colgroup'
-                }, tableColumn.map((column, $columnIndex) => {
+                }, renderColumnList.map((column, $columnIndex) => {
                     return h('col', {
                         attrs: {
                             name: column.id
@@ -280,7 +316,7 @@ export default {
                  */
                 h('tfoot', {
                     ref: 'tfoot'
-                }, renderHeads(h, this, footerTableData))
+                }, renderHeads(h, this, renderColumnList))
             ])
         ]);
     },

package/es/table/src/header.js

@@ -3,7 +3,7 @@ import { VxeUI } from '../../ui';
 import { getClass } from '../../ui/src/utils';
 import { getOffsetPos, hasClass, addClass, removeClass } from '../../ui/src/dom';
 import { convertHeaderColumnToRows, getColReMinWidth } from './util';
-const { renderer } = VxeUI;
+const { renderer, renderEmptyElement } = VxeUI;
 const cellType = 'header';
 const renderRows = (h, _vm, cols, $rowIndex) => {
     const $xeTable = _vm.$parent;
@@ -75,6 +75,7 @@ const renderRows = (h, _vm, cols, $rowIndex) => {
                     'is--sortable': column.sortable,
                     'col--filter': !!column.filters,
                     'is--filter-active': hasFilter,
+                    'is--drag-active': !column.fixed && !isDisabledDrag,
                     'is--drag-disabled': isDisabledDrag,
                     'col--current': currentColumn === column
                 }, getClass(headerClassName, params), getClass(headerCellClassName, params)],
@@ -193,21 +194,68 @@ export default {
         elemStore[`${prefix}repair`] = null;
     },
     render(h) {
-        const { _e, $parent: $xetable, fixedType, headerColumn, tableColumn, fixedColumn } = this;
-        const { tId, isGroup, visibleColumn, showHeaderOverflow: allColumnHeaderOverflow, scrollXLoad, scrollbarWidth } = $xetable;
-        let headerGroups = headerColumn;
+        const props = this;
+        const $xeTable = this.$parent;
+        const tableProps = $xeTable;
+        const tableReactData = $xeTable;
+        const tableInternalData = $xeTable;
+        const { tId } = $xeTable;
+        const { fixedType, fixedColumn, tableColumn } = props;
+        const { headerColumn } = this;
+        const { showHeaderOverflow: allColumnHeaderOverflow, spanMethod, footerSpanMethod } = tableProps;
+        const { isGroup, scrollXLoad, scrollYLoad, scrollbarWidth, dragCol } = tableReactData;
+        const { visibleColumn, fullColumnIdData } = tableInternalData;
+        let renderHeaderList = headerColumn;
         let renderColumnList = tableColumn;
         if (isGroup) {
             renderColumnList = visibleColumn;
         }
         else {
-            // 如果是使用优化模式
             if (fixedType) {
-                if (scrollXLoad || allColumnHeaderOverflow) {
-                    renderColumnList = fixedColumn;
+                // 如果是使用优化模式
+                if (scrollXLoad || scrollYLoad || allColumnHeaderOverflow) {
+                    // 如果不支持优化模式
+                    if (spanMethod || footerSpanMethod) {
+                        renderColumnList = visibleColumn;
+                    }
+                    else {
+                        renderColumnList = fixedColumn || [];
+                    }
+                }
+                else {
+                    renderColumnList = visibleColumn;
+                }
+            }
+            renderHeaderList = [renderColumnList];
+        }
+        if (!fixedType) {
+            // 列拖拽
+            if (scrollXLoad && dragCol) {
+                if (renderColumnList.length > 2) {
+                    const dCowRest = fullColumnIdData[dragCol.id];
+                    if (dCowRest) {
+                        const dcIndex = dCowRest._index;
+                        const firstCol = renderColumnList[0];
+                        const lastCol = renderColumnList[renderColumnList.length - 1];
+                        const firstColRest = fullColumnIdData[firstCol.id];
+                        const lastColRest = fullColumnIdData[lastCol.id];
+                        if (firstColRest && lastColRest) {
+                            const fcIndex = firstColRest._index;
+                            const lcIndex = lastColRest._index;
+                            console.log(dragCol.id, dcIndex, fcIndex, lcIndex, renderColumnList.length);
+                            if (dcIndex < fcIndex) {
+                                renderColumnList = [dragCol].concat(renderColumnList);
+                                renderHeaderList = [[dragCol].concat(renderHeaderList[0])].concat(renderHeaderList.slice(1));
+                            }
+                            else if (dcIndex > lcIndex) {
+                                renderColumnList = renderColumnList.concat([dragCol]);
+                                renderHeaderList = [renderHeaderList[0].concat([dragCol])].concat(renderHeaderList.slice(1));
+                            }
+                            console.log(renderColumnList.length);
+                        }
+                    }
                 }
             }
-            headerGroups = [renderColumnList];
         }
         return h('div', {
             class: ['vxe-table--header-wrapper', fixedType ? `fixed-${fixedType}--wrapper` : 'body--wrapper'],
@@ -216,7 +264,7 @@ export default {
             }
         }, [
             fixedType
-                ? _e()
+                ? renderEmptyElement($xeTable)
                 : h('div', {
                     class: 'vxe-body--x-space',
                     ref: 'xSpace'
@@ -257,7 +305,7 @@ export default {
                  */
                 h('thead', {
                     ref: 'thead'
-                }, renderHeads(h, this, headerGroups))
+                }, renderHeads(h, this, renderHeaderList))
             ]),
             /**
              * 其他