vxe-table 3.12.8 → 3.12.10-beta.0

package/es/table/src/header.js

@@ -5,11 +5,18 @@ import { getOffsetPos, hasClass, addClass, removeClass } from '../../ui/src/dom'
 import { convertHeaderColumnToRows, getColReMinWidth } from './util';
 const { getI18n, renderer, renderEmptyElement } = VxeUI;
 const cellType = 'header';
-const renderRows = (h, _vm, cols, $rowIndex) => {
+const renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) => {
+    const props = _vm;
     const $xeTable = _vm.$parent;
     const $xeGrid = $xeTable.xegrid;
-    const { fixedType } = _vm;
-    const { resizable: allResizable, border, columnKey, headerCellClassName, headerCellStyle, showHeaderOverflow: allColumnHeaderOverflow, headerAlign: allHeaderAlign, align: allAlign, currentColumn, scrollXLoad, scrollYLoad, overflowX, scrollbarWidth, mouseConfig, columnOpts } = $xeTable;
+    const tableProps = $xeTable;
+    const tableReactData = $xeTable;
+    const tableInternalData = $xeTable;
+    const { fixedType } = props;
+    const { resizable: allResizable, border, columnKey, headerCellClassName, headerCellStyle, showHeaderOverflow: allColumnHeaderOverflow, headerAlign: allHeaderAlign, align: allAlign, mouseConfig } = tableProps;
+    const { currentColumn, scrollXLoad, scrollYLoad, overflowX } = tableReactData;
+    const { scrollXStore } = tableInternalData;
+    const columnOpts = $xeTable.computeColumnOpts;
     const columnDragOpts = $xeTable.computeColumnDragOpts;
     const { disabledMethod: dragDisabledMethod, isCrossDrag, isPeerDrag } = columnDragOpts;
     return cols.map((column, $columnIndex) => {
@@ -67,6 +74,10 @@ const renderRows = (h, _vm, cols, $rowIndex) => {
             }
         }
         const isAutoCellWidth = !column.resizeWidth && (column.minWidth === 'auto' || column.width === 'auto');
+        let isPreLoadStatus = false;
+        if (scrollXLoad && !isGroup && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex || _columnIndex > scrollXStore.visibleEndIndex)) {
+            isPreLoadStatus = true;
+        }
         return h('th', {
             class: ['vxe-header--column', colid, {
                     [`col--${headAlign}`]: headAlign,
@@ -85,7 +96,7 @@ const renderRows = (h, _vm, cols, $rowIndex) => {
                     'col--current': currentColumn === column
                 }, getClass(headerClassName, params), getClass(headerCellClassName, params)],
             attrs: thAttrs,
-            style: headerCellStyle ? (XEUtils.isFunction(headerCellStyle) ? headerCellStyle(params) : headerCellStyle) : null,
+            style: headerCellStyle ? (XEUtils.isFunction(headerCellStyle) ? headerCellStyle(params) : headerCellStyle) : undefined,
             on: thOns,
             key: columnKey || scrollXLoad || scrollYLoad || columnOpts.useKey || columnOpts.drag || isColGroup ? colid : $columnIndex
         }, [
@@ -95,7 +106,7 @@ const renderRows = (h, _vm, cols, $rowIndex) => {
                         'c--tooltip': showTooltip,
                         'c--ellipsis': showEllipsis
                     }]
-            }, column.renderHeader(h, params)),
+            }, isPreLoadStatus || (isOptimizeMode && fixedHiddenColumn) ? [] : column.renderHeader(h, params)),
             /**
            * 列宽拖动
            */
@@ -111,23 +122,18 @@ const renderRows = (h, _vm, cols, $rowIndex) => {
                 })
                 : null
         ]);
-    }).concat(scrollbarWidth
-        ? [
-            h('th', {
-                key: `gr${$rowIndex}`,
-                class: 'vxe-header--gutter col--gutter'
-            })
-        ]
-        : []);
+    });
 };
-function renderHeads(h, _vm, headerGroups) {
+function renderHeads(h, _vm, isGroup, isOptimizeMode, headerGroups) {
+    const props = _vm;
     const $xeTable = _vm.$parent;
     const tableProps = $xeTable;
-    const { fixedType } = _vm;
+    const tableReactData = $xeTable;
+    const { fixedType } = props;
     const columnOpts = $xeTable.computeColumnOpts;
     const columnDragOpts = $xeTable.computeColumnDragOpts;
     const { headerRowClassName, headerRowStyle } = tableProps;
-    const { isDragColMove } = $xeTable;
+    const { isDragColMove } = tableReactData;
     return headerGroups.map((cols, $rowIndex) => {
         const params = { $table: $xeTable, $rowIndex, fixed: fixedType, type: cellType };
         if (columnOpts.drag && columnDragOpts.animation) {
@@ -142,7 +148,7 @@ function renderHeads(h, _vm, headerGroups) {
                     ],
                     style: headerRowStyle ? (XEUtils.isFunction(headerRowStyle) ? headerRowStyle(params) : headerRowStyle) : null
                 }
-            }, renderRows(h, _vm, cols, $rowIndex));
+            }, renderRows(h, _vm, isGroup, isOptimizeMode, cols, $rowIndex));
         }
         return h('tr', {
             key: $rowIndex,
@@ -150,8 +156,8 @@ function renderHeads(h, _vm, headerGroups) {
                 'vxe-header--row',
                 headerRowClassName ? XEUtils.isFunction(headerRowClassName) ? headerRowClassName(params) : headerRowClassName : ''
             ],
-            style: headerRowStyle ? (XEUtils.isFunction(headerRowStyle) ? headerRowStyle(params) : headerRowStyle) : null
-        }, renderRows(h, _vm, cols, $rowIndex));
+            style: headerRowStyle ? (XEUtils.isFunction(headerRowStyle) ? headerRowStyle(params) : headerRowStyle) : undefined
+        }, renderRows(h, _vm, isGroup, isOptimizeMode, cols, $rowIndex));
     });
 }
 export default {
@@ -161,8 +167,10 @@ export default {
         tableColumn: Array,
         tableGroupColumn: Array,
         fixedColumn: Array,
-        size: String,
-        fixedType: String
+        fixedType: {
+            type: String,
+            default: null
+        }
     },
     data() {
         return {
@@ -178,21 +186,30 @@ export default {
         this.uploadColumn();
     },
     mounted() {
-        const { $parent: $xetable, $el, $refs, fixedType } = this;
-        const { elemStore } = $xetable;
+        const _vm = this;
+        const props = _vm;
+        const $xeTable = _vm.$parent;
+        const internalData = $xeTable;
+        const { fixedType } = props;
+        const { elemStore } = internalData;
         const prefix = `${fixedType || 'main'}-header-`;
-        elemStore[`${prefix}wrapper`] = $el;
-        elemStore[`${prefix}table`] = $refs.table;
-        elemStore[`${prefix}colgroup`] = $refs.colgroup;
-        elemStore[`${prefix}list`] = $refs.thead;
-        elemStore[`${prefix}xSpace`] = $refs.xSpace;
-        elemStore[`${prefix}repair`] = $refs.repair;
+        elemStore[`${prefix}wrapper`] = _vm.$refs.refElem;
+        elemStore[`${prefix}scroll`] = _vm.$refs.refHeaderScroll;
+        elemStore[`${prefix}table`] = _vm.$refs.refHeaderTable;
+        elemStore[`${prefix}colgroup`] = _vm.$refs.refHeaderColgroup;
+        elemStore[`${prefix}list`] = _vm.$refs.refHeaderTHead;
+        elemStore[`${prefix}xSpace`] = _vm.$refs.refHeaderXSpace;
+        elemStore[`${prefix}repair`] = _vm.$refs.refHeaderBorderRepair;
     },
     destroyed() {
-        const { $parent: $xetable, fixedType } = this;
-        const { elemStore } = $xetable;
+        const props = this;
+        const $xeTable = this.$parent;
+        const internalData = $xeTable;
+        const { fixedType } = props;
+        const { elemStore } = internalData;
         const prefix = `${fixedType || 'main'}-header-`;
         elemStore[`${prefix}wrapper`] = null;
+        elemStore[`${prefix}scroll`] = null;
         elemStore[`${prefix}table`] = null;
         elemStore[`${prefix}colgroup`] = null;
         elemStore[`${prefix}list`] = null;
@@ -205,31 +222,33 @@ export default {
         const tableProps = $xeTable;
         const tableReactData = $xeTable;
         const tableInternalData = $xeTable;
-        const { tId } = $xeTable;
+        const { xID } = $xeTable;
         const { fixedType, fixedColumn, tableColumn } = props;
         const { headerColumn } = this;
         const { showHeaderOverflow: allColumnHeaderOverflow, spanMethod, footerSpanMethod } = tableProps;
-        const { isGroup, scrollXLoad, scrollYLoad, scrollbarWidth, dragCol } = tableReactData;
+        const { isGroup, scrollXLoad, scrollYLoad, dragCol } = tableReactData;
         const { visibleColumn, fullColumnIdData } = tableInternalData;
         let renderHeaderList = headerColumn;
         let renderColumnList = tableColumn;
+        let isOptimizeMode = false;
         if (isGroup) {
             renderColumnList = visibleColumn;
         }
         else {
-            if (fixedType) {
-                // 如果是使用优化模式
-                if (scrollXLoad || scrollYLoad || allColumnHeaderOverflow) {
+            // 如果是使用优化模式
+            if (scrollXLoad || scrollYLoad || allColumnHeaderOverflow) {
+                if (spanMethod || footerSpanMethod) {
                     // 如果不支持优化模式
-                    if (spanMethod || footerSpanMethod) {
-                        renderColumnList = visibleColumn;
-                    }
-                    else {
-                        renderColumnList = fixedColumn || [];
-                    }
                 }
                 else {
-                    renderColumnList = visibleColumn;
+                    isOptimizeMode = true;
+                }
+            }
+            if (fixedType) {
+                renderColumnList = visibleColumn;
+                // 如果是使用优化模式
+                if (isOptimizeMode) {
+                    renderColumnList = fixedColumn || [];
                 }
             }
             renderHeaderList = [renderColumnList];
@@ -248,7 +267,6 @@ export default {
                         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));
@@ -257,69 +275,71 @@ export default {
                                 renderColumnList = renderColumnList.concat([dragCol]);
                                 renderHeaderList = [renderHeaderList[0].concat([dragCol])].concat(renderHeaderList.slice(1));
                             }
-                            console.log(renderColumnList.length);
                         }
                     }
                 }
             }
         }
         return h('div', {
+            ref: 'refElem',
             class: ['vxe-table--header-wrapper', fixedType ? `fixed-${fixedType}--wrapper` : 'body--wrapper'],
             attrs: {
-                xid: tId
+                xid: xID
             }
         }, [
-            fixedType
-                ? renderEmptyElement($xeTable)
-                : h('div', {
-                    class: 'vxe-body--x-space',
-                    ref: 'xSpace'
-                }),
-            h('table', {
-                class: 'vxe-table--header',
-                attrs: {
-                    xid: tId,
-                    cellspacing: 0,
-                    cellpadding: 0,
-                    border: 0
-                },
-                ref: 'table'
+            h('div', {
+                ref: 'refHeaderScroll',
+                class: 'vxe-table--header-inner-wrapper',
+                on: {
+                    scroll(evnt) {
+                        $xeTable.triggerHeaderScrollEvent(evnt, fixedType);
+                    }
+                }
             }, [
-                /**
-                 * 列宽
-                 */
-                h('colgroup', {
-                    ref: 'colgroup'
-                }, renderColumnList.map((column, $columnIndex) => {
-                    return h('col', {
-                        attrs: {
-                            name: column.id
-                        },
-                        key: $columnIndex
-                    });
-                }).concat(scrollbarWidth
-                    ? [
-                        h('col', {
+                fixedType
+                    ? renderEmptyElement($xeTable)
+                    : h('div', {
+                        ref: 'refHeaderXSpace',
+                        class: 'vxe-body--x-space'
+                    }),
+                h('table', {
+                    ref: 'refHeaderTable',
+                    class: 'vxe-table--header',
+                    attrs: {
+                        xid: xID,
+                        cellspacing: 0,
+                        cellpadding: 0,
+                        border: 0
+                    }
+                }, [
+                    /**
+                     * 列宽
+                     */
+                    h('colgroup', {
+                        ref: 'refHeaderColgroup'
+                    }, renderColumnList.map((column, $columnIndex) => {
+                        return h('col', {
                             attrs: {
-                                name: 'col_gutter'
-                            }
-                        })
-                    ]
-                    : [])),
+                                name: column.id
+                            },
+                            key: $columnIndex
+                        });
+                    })),
+                    /**
+                     * 头部
+                     */
+                    h('thead', {
+                        ref: 'refHeaderTHead'
+                    }, renderHeads(h, this, isGroup, isOptimizeMode, renderHeaderList))
+                ]),
                 /**
-                 * 头部
+                 * 其他
                  */
-                h('thead', {
-                    ref: 'thead'
-                }, renderHeads(h, this, renderHeaderList))
-            ]),
-            /**
-             * 其他
-             */
-            h('div', {
-                class: 'vxe-table--header-border-line',
-                ref: 'repair'
-            })
+                h('div', {
+                    ref: 'refHeaderBorderRepair',
+                    class: 'vxe-table--header-border-line'
+                })
+            ])
         ]);
     },
     methods: {
@@ -333,9 +353,9 @@ export default {
             const { column } = params;
             const { $parent: $xetable, fixedType } = this;
             const { visibleColumn } = tableInternalData;
-            const { tableBody, leftContainer, rightContainer } = $xetable.$refs;
+            const { refTableBody, refLeftContainer, refRightContainer } = $xetable.$refs;
             const tableEl = $xeTable.$el;
-            const resizeBarElem = $xetable.$refs.resizeBar;
+            const resizeBarElem = $xetable.$refs.refCellResizeBar;
             const resizeTipElem = $xetable.$refs.refCellResizeTip;
             const wrapperElem = this.$el;
             const { clientX: dragClientX } = evnt;
@@ -344,7 +364,7 @@ export default {
             const cellParams = Object.assign(params, { cell });
             const resizableOpts = $xeTable.computeResizableOpts;
             let dragLeft = 0;
-            const tableBodyElem = tableBody.$el;
+            const tableBodyElem = refTableBody.$el;
             const pos = getOffsetPos(dragBtnElem, tableEl);
             const dragBtnWidth = dragBtnElem.clientWidth;
             const dragBtnOffsetWidth = Math.floor(dragBtnWidth / 2);
@@ -369,8 +389,8 @@ export default {
                     }
                     tempCellElem = tempCellElem[siblingProp];
                 }
-                if (isRightFixed && rightContainer) {
-                    dragPosLeft = rightContainer.offsetLeft + fixedOffsetWidth;
+                if (isRightFixed && refRightContainer) {
+                    dragPosLeft = refRightContainer.offsetLeft + fixedOffsetWidth;
                 }
             }
             // 处理拖动事件
@@ -382,11 +402,11 @@ export default {
                 const scrollLeft = fixedType ? 0 : tableBodyElem.scrollLeft;
                 if (isLeftFixed) {
                     // 左固定列（不允许超过右侧固定列、不允许超过右边距）
-                    left = Math.min(left, (rightContainer ? rightContainer.offsetLeft : tableBodyElem.clientWidth) - fixedOffsetWidth - minInterval);
+                    left = Math.min(left, (refRightContainer ? refRightContainer.offsetLeft : tableBodyElem.clientWidth) - fixedOffsetWidth - minInterval);
                 }
                 else if (isRightFixed) {
                     // 右侧固定列（不允许超过左侧固定列、不允许超过左边距）
-                    dragMinLeft = (leftContainer ? leftContainer.clientWidth : 0) + fixedOffsetWidth + minInterval;
+                    dragMinLeft = (refLeftContainer ? refLeftContainer.clientWidth : 0) + fixedOffsetWidth + minInterval;
                     left = Math.min(left, dragPosLeft + cell.clientWidth - minInterval);
                 }
                 else {