vxe-table 3.9.21 → 3.10.0-beta.1

package/es/table/src/body.js

@@ -1,8 +1,8 @@
 import XEUtils from 'xe-utils';
 import { VxeUI } from '../../ui';
 import { isEnableConf, getClass } from '../../ui/src/utils';
-import { getOffsetSize, calcTreeLine, mergeBodyMethod, removeScrollListener, restoreScrollListener, getRowid } from './util';
-import { updateCellTitle } from '../../ui/src/dom';
+import { getOffsetSize, calcTreeLine, mergeBodyMethod, getRowid } from './util';
+import { updateCellTitle, setScrollTop, setScrollLeft } from '../../ui/src/dom';
 import { getSlotVNs } from '../../ui/src/vn';
 const { getI18n, renderer } = VxeUI;
 const renderType = 'body';
@@ -49,8 +49,10 @@ function renderLine(h, _vm, $xetable, params) {
  * 渲染列
  */
 function renderColumn(h, _vm, $xetable, seq, rowid, fixedType, rowLevel, row, rowIndex, $rowIndex, _rowIndex, column, $columnIndex, columns, items) {
-    const { $listeners: tableListeners, afterFullData, tableData, height, columnKey, overflowX, sYOpts, scrollXLoad, scrollYLoad, highlightCurrentRow, showOverflow: allColumnOverflow, isAllOverflow, align: allAlign, currentColumn, cellClassName: allCellClassName, cellStyle, mergeList, spanMethod, radioOpts, checkboxOpts, expandOpts, treeOpts, tooltipOpts, mouseConfig, editConfig, editOpts, editRules, validOpts, editStore, tooltipConfig, rowOpts, columnOpts, validErrorMaps } = $xetable;
+    const { $listeners: tableListeners, fullAllDataRowIdData, afterFullData, tableData, height, columnKey, overflowX, sYOpts, scrollYLoad, highlightCurrentRow, showOverflow: allColumnOverflow, isAllOverflow, align: allAlign, currentColumn, cellClassName: allCellClassName, cellStyle, mergeList, spanMethod, radioOpts, checkboxOpts, expandOpts, treeOpts, tooltipOpts, mouseConfig, editConfig, editOpts, editRules, validOpts, editStore, tooltipConfig, rowOpts, columnOpts, validErrorMaps } = $xetable;
+    const cellOpts = $xetable.computeCellOpts;
     const { type, cellRender, editRender, align, showOverflow, className, treeNode, slots } = column;
+    const { verticalAlign } = cellOpts;
     const { actived } = editStore;
     const { rHeight: scrollYRHeight } = sYOpts;
     const { height: rowHeight } = rowOpts;
@@ -64,12 +66,13 @@ function renderColumn(h, _vm, $xetable, seq, rowid, fixedType, rowLevel, row, ro
     const isEdit = isEnableConf(editRender);
     let fixedHiddenColumn = fixedType ? column.fixed !== fixedType : column.fixed && overflowX;
     const cellOverflow = (XEUtils.isUndefined(showOverflow) || XEUtils.isNull(showOverflow)) ? allColumnOverflow : showOverflow;
-    let showEllipsis = cellOverflow === 'ellipsis';
+    const showEllipsis = cellOverflow === 'ellipsis';
     const showTitle = cellOverflow === 'title';
     const showTooltip = cellOverflow === true || cellOverflow === 'tooltip';
-    let hasEllipsis = showTitle || showTooltip || showEllipsis;
+    const hasEllipsis = showTitle || showTooltip || showEllipsis;
     let isDirty;
     const tdOns = {};
+    const rest = fullAllDataRowIdData[rowid];
     const cellAlign = align || (compConf ? compConf.tableCellAlign : '') || allAlign;
     const errorValidItem = validErrorMaps[`${rowid}:${column.id}`];
     const showValidTip = editRules && validOpts.showMessage && (validOpts.message === 'default' ? (height || tableData.length > 1) : validOpts.message === 'inline');
@@ -78,10 +81,6 @@ function renderColumn(h, _vm, $xetable, seq, rowid, fixedType, rowLevel, row, ro
     const bindMouseleave = tableListeners['cell-mouseleave'];
     const triggerDblclick = (editRender && editConfig && editOpts.trigger === 'dblclick');
     const params = { $table: $xetable, $grid: $xetable.$xegrid, isEdit: false, seq, rowid, row, rowIndex, $rowIndex, _rowIndex, column, columnIndex, $columnIndex, _columnIndex, fixed: fixedType, type: renderType, isHidden: fixedHiddenColumn, level: rowLevel, visibleData: afterFullData, data: tableData, items };
-    // 虚拟滚动不支持动态高度
-    if ((scrollXLoad || scrollYLoad) && !hasEllipsis) {
-        showEllipsis = hasEllipsis = true;
-    }
     // hover 进入事件
     if (showTitle || showTooltip || showAllTip || bindMouseenter || tooltipConfig) {
         tdOns.mouseenter = (evnt) => {
@@ -231,6 +230,7 @@ function renderColumn(h, _vm, $xetable, seq, rowid, fixedType, rowLevel, row, ro
             column.id,
             {
                 [`col--${cellAlign}`]: cellAlign,
+                [`col--vertical-${verticalAlign}`]: verticalAlign,
                 [`col--${type}`]: type,
                 'col--last': $columnIndex === columns.length - 1,
                 'col--tree-node': treeNode,
@@ -250,7 +250,7 @@ function renderColumn(h, _vm, $xetable, seq, rowid, fixedType, rowLevel, row, ro
         key: columnKey || columnOpts.useKey ? column.id : $columnIndex,
         attrs,
         style: Object.assign({
-            height: hasEllipsis && (scrollYRHeight || rowHeight) ? `${scrollYRHeight || rowHeight}px` : ''
+            height: hasEllipsis && (scrollYRHeight || rowHeight) ? `${scrollYRHeight || rowHeight}px` : (scrollYLoad ? `${rest.height || scrollYRHeight || rowHeight}px` : '')
         }, XEUtils.isFunction(compCellStyle) ? compCellStyle(params) : compCellStyle, XEUtils.isFunction(cellStyle) ? cellStyle(params) : cellStyle),
         on: tdOns
     }, tdVNs);
@@ -374,45 +374,6 @@ function renderRows(h, _vm, $xetable, fixedType, tableData, tableColumn) {
     });
     return rows;
 }
-/**
- * 同步滚动条
- */
-let scrollProcessTimeout;
-function syncBodyScroll(_vm, fixedType, scrollTop, elem1, elem2) {
-    if (elem1 || elem2) {
-        if (elem1) {
-            removeScrollListener(elem1);
-            elem1.scrollTop = scrollTop;
-        }
-        if (elem2) {
-            removeScrollListener(elem2);
-            elem2.scrollTop = scrollTop;
-        }
-        clearTimeout(scrollProcessTimeout);
-        scrollProcessTimeout = setTimeout(() => {
-            // const { tableBody, leftBody, rightBody } = _vm.$refs
-            // const bodyElem = tableBody.$el
-            // const leftElem = leftBody ? leftBody.$el : null
-            // const rightElem = rightBody ? rightBody.$el : null
-            restoreScrollListener(elem1);
-            restoreScrollListener(elem2);
-            // 检查滚动条是的同步
-            // let targetTop = bodyElem.scrollTop
-            // if (fixedType === 'left') {
-            //   if (leftElem) {
-            //     targetTop = leftElem.scrollTop
-            //   }
-            // } else if (fixedType === 'right') {
-            //   if (rightElem) {
-            //     targetTop = rightElem.scrollTop
-            //   }
-            // }
-            // setScrollTop(bodyElem, targetTop)
-            // setScrollTop(leftElem, targetTop)
-            // setScrollTop(rightElem, targetTop)
-        }, 300);
-    }
-}
 export default {
     name: 'VxeTableBody',
     props: {
@@ -441,17 +402,9 @@ export default {
         elemStore[`${prefix}xSpace`] = $refs.xSpace;
         elemStore[`${prefix}ySpace`] = $refs.ySpace;
         elemStore[`${prefix}emptyBlock`] = $refs.emptyBlock;
-        if (this.$el) {
-            this.$el.onscroll = this.scrollEvent;
-            this.$el._onscroll = this.scrollEvent;
-        }
     },
     beforeDestroy() {
         clearTimeout(this.wheelTime);
-        if (this.$el) {
-            this.$el._onscroll = null;
-            this.$el.onscroll = null;
-        }
     },
     destroyed() {
         const { $parent: $xetable, fixedType } = this;
@@ -510,11 +463,9 @@ export default {
             attrs: {
                 xid: tId
             },
-            on: scrollYLoad && sYOpts.mode === 'wheel'
-                ? {
-                    wheel: this.wheelEvent
-                }
-                : {}
+            on: Object.assign({
+                scroll: this.scrollEvent
+            }, scrollYLoad && sYOpts.mode === 'wheel' ? { wheel: this.wheelEvent } : null)
         }, [
             fixedType
                 ? _e()
@@ -610,73 +561,60 @@ export default {
          * 如果存在列固定右侧，同步更新滚动状态
          */
         scrollEvent(evnt) {
-            const { $el: scrollBodyElem, $parent: $xetable, fixedType } = this;
-            const { $refs, elemStore, highlightHoverRow, scrollXLoad, scrollYLoad, lastScrollTop, lastScrollLeft, rowOpts } = $xetable;
-            const { tableHeader, tableBody, leftBody, rightBody, tableFooter, validTip } = $refs;
+            const { $el: scrollBodyElem, $parent: $xeTable, fixedType } = this;
+            const { $refs, lastScrollTop, lastScrollLeft } = $xeTable;
+            const { tableHeader, tableBody, leftBody, rightBody, tableFooter } = $refs;
             const headerElem = tableHeader ? tableHeader.$el : null;
             const footerElem = tableFooter ? tableFooter.$el : null;
             const bodyElem = tableBody.$el;
             const leftElem = leftBody ? leftBody.$el : null;
             const rightElem = rightBody ? rightBody.$el : null;
-            const bodyYElem = elemStore['main-body-ySpace'];
-            const bodyXElem = elemStore['main-body-xSpace'];
-            const bodyHeight = scrollYLoad && bodyYElem ? bodyYElem.clientHeight : bodyElem.clientHeight;
-            const bodyWidth = scrollXLoad && bodyXElem ? bodyXElem.clientWidth : bodyElem.clientWidth;
-            let scrollTop = scrollBodyElem.scrollTop;
+            const scrollTop = scrollBodyElem.scrollTop;
             const scrollLeft = bodyElem.scrollLeft;
             const isRollX = scrollLeft !== lastScrollLeft;
             const isRollY = scrollTop !== lastScrollTop;
-            $xetable.lastScrollTop = scrollTop;
-            $xetable.lastScrollLeft = scrollLeft;
-            $xetable.lastScrollTime = Date.now();
-            if (rowOpts.isHover || highlightHoverRow) {
-                $xetable.clearHoverRow();
+            const xHandleEl = $refs.refScrollXHandleElem;
+            const yHandleEl = $refs.refScrollYHandleElem;
+            if (yHandleEl) {
+                yHandleEl.scrollTop = scrollTop;
             }
-            if (leftElem && fixedType === 'left') {
-                scrollTop = leftElem.scrollTop;
-                syncBodyScroll($xetable, fixedType, scrollTop, bodyElem, rightElem);
-            }
-            else if (rightElem && fixedType === 'right') {
-                scrollTop = rightElem.scrollTop;
-                syncBodyScroll($xetable, fixedType, scrollTop, bodyElem, leftElem);
-            }
-            else {
-                if (isRollX) {
-                    if (headerElem) {
-                        headerElem.scrollLeft = bodyElem.scrollLeft;
-                    }
-                    if (footerElem) {
-                        footerElem.scrollLeft = bodyElem.scrollLeft;
-                    }
+            else if (isRollY) {
+                $xeTable.lastScrollTop = scrollTop;
+                $xeTable.lastScrollLeft = scrollLeft;
+                if (leftElem && fixedType === 'left') {
+                    setScrollTop(bodyElem, scrollTop);
+                    setScrollTop(rightElem, scrollTop);
                 }
-                if (leftElem || rightElem) {
-                    $xetable.checkScrolling();
-                    if (isRollY) {
-                        syncBodyScroll($xetable, fixedType, scrollTop, leftElem, rightElem);
-                    }
+                else if (rightElem && fixedType === 'right') {
+                    setScrollTop(bodyElem, scrollTop);
+                    setScrollTop(leftElem, scrollTop);
                 }
+                else {
+                    setScrollTop(leftElem, scrollTop);
+                    setScrollTop(rightElem, scrollTop);
+                }
+                $xeTable.handleScrollEvent(evnt, isRollY, isRollX, {
+                    type: renderType,
+                    fixed: fixedType,
+                    scrollTop,
+                    scrollLeft
+                });
             }
-            if (scrollXLoad && isRollX) {
-                $xetable.triggerScrollXEvent(evnt);
-            }
-            if (scrollYLoad && isRollY) {
-                $xetable.triggerScrollYEvent(evnt);
+            if (xHandleEl) {
+                xHandleEl.scrollLeft = scrollLeft;
             }
-            if (isRollX && validTip && validTip.visible) {
-                validTip.updatePlacement();
+            else if (isRollX) {
+                $xeTable.lastScrollTop = scrollTop;
+                $xeTable.lastScrollLeft = scrollLeft;
+                setScrollLeft(headerElem, scrollLeft);
+                setScrollLeft(footerElem, scrollLeft);
+                $xeTable.handleScrollEvent(evnt, isRollY, isRollX, {
+                    type: renderType,
+                    fixed: fixedType,
+                    scrollTop,
+                    scrollLeft
+                });
             }
-            $xetable.emitEvent('scroll', {
-                type: renderType,
-                fixed: fixedType,
-                scrollTop,
-                scrollLeft,
-                scrollHeight: bodyElem.scrollHeight,
-                scrollWidth: bodyElem.scrollWidth,
-                bodyHeight,
-                bodyWidth,
-                isX: isRollX,
-                isY: isRollY
-            }, evnt);
         },
         handleWheel(evnt, isTopWheel, deltaTop, isRollX, isRollY) {
             const { $parent: $xetable } = this;

package/es/table/src/footer.js

@@ -1,8 +1,8 @@
 import XEUtils from 'xe-utils';
 import { VxeUI } from '../../ui';
 import { getClass } from '../../ui/src/utils';
-import { updateCellTitle } from '../../ui/src/dom';
-const cellType = 'footer';
+import { updateCellTitle, setScrollLeft } from '../../ui/src/dom';
+const renderType = 'footer';
 const { renderer } = VxeUI;
 function mergeFooterMethod(mergeFooterList, _rowIndex, _columnIndex) {
     for (let mIndex = 0; mIndex < mergeFooterList.length; mIndex++) {
@@ -117,7 +117,7 @@ export default {
                     ref: 'tfoot'
                 }, footerTableData.map((list, _rowIndex) => {
                     const $rowIndex = _rowIndex;
-                    const rowParams = { $table: $xetable, row: list, _rowIndex, $rowIndex, fixed: fixedType, type: cellType };
+                    const rowParams = { $table: $xetable, row: list, _rowIndex, $rowIndex, fixed: fixedType, type: renderType };
                     return h('tr', {
                         class: ['vxe-footer--row', footerRowClassName ? XEUtils.isFunction(footerRowClassName) ? footerRowClassName(rowParams) : footerRowClassName : ''],
                         style: footerRowStyle ? (XEUtils.isFunction(footerRowStyle) ? footerRowStyle(rowParams) : footerRowStyle) : null
@@ -152,7 +152,7 @@ export default {
                             itemIndex,
                             items: list,
                             fixed: fixedType,
-                            type: cellType,
+                            type: renderType,
                             data: footerTableData
                         };
                         // 虚拟滚动不支持动态高度
@@ -255,29 +255,32 @@ export default {
          * 如果存在列固定右侧，同步更新滚动状态
          */
         scrollEvent(evnt) {
-            const { $parent: $xetable, fixedType } = this;
-            const { $refs, scrollXLoad, triggerScrollXEvent, lastScrollLeft } = $xetable;
-            const { tableHeader, tableBody, tableFooter, validTip } = $refs;
+            const { $parent: $xeTable, fixedType } = this;
+            const { $refs } = $xeTable;
+            const { tableHeader, tableBody, tableFooter } = $refs;
             const headerElem = tableHeader ? tableHeader.$el : null;
             const footerElem = tableFooter ? tableFooter.$el : null;
             const bodyElem = tableBody.$el;
             const scrollLeft = footerElem ? footerElem.scrollLeft : 0;
-            const isX = scrollLeft !== lastScrollLeft;
-            $xetable.lastScrollLeft = scrollLeft;
-            $xetable.lastScrollTime = Date.now();
-            if (headerElem) {
-                headerElem.scrollLeft = scrollLeft;
+            const xHandleEl = $refs.refScrollXHandleElem;
+            if (xHandleEl) {
+                xHandleEl.scrollLeft = scrollLeft;
             }
-            if (bodyElem) {
-                bodyElem.scrollLeft = scrollLeft;
-            }
-            if (scrollXLoad && isX) {
-                triggerScrollXEvent(evnt);
-            }
-            if (isX && validTip && validTip.visible) {
-                validTip.updatePlacement();
+            else {
+                const isRollX = true;
+                const isRollY = false;
+                const scrollTop = bodyElem.scrollTop;
+                $xeTable.lastScrollLeft = scrollLeft;
+                $xeTable.lastScrollTime = Date.now();
+                setScrollLeft(headerElem, scrollLeft);
+                setScrollLeft(bodyElem, scrollLeft);
+                $xeTable.handleScrollEvent(evnt, isRollY, isRollX, {
+                    type: renderType,
+                    fixed: fixedType,
+                    scrollTop,
+                    scrollLeft
+                });
             }
-            $xetable.emitEvent('scroll', { type: cellType, fixed: fixedType, scrollTop: bodyElem.scrollTop, scrollLeft, isX, isY: false }, evnt);
         }
     }
 };