vxe-table 3.11.4 → 3.11.6-beta.0

package/es/table/src/body.js

@@ -4,7 +4,7 @@ import { isEnableConf, getClass } from '../../ui/src/utils';
 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 { getI18n, renderer, renderEmptyElement } = VxeUI;
 const renderType = 'body';
 // 滚动、拖动过程中不需要触发
 function isVMScrollProcess($xetable) {
@@ -49,7 +49,8 @@ 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, 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 { $listeners: tableListeners, fullAllDataRowIdData, 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, mouseOpts, areaOpts, validErrorMaps } = $xetable;
+    const { selectCellToRow } = areaOpts;
     const cellOpts = $xetable.computeCellOpts;
     const { type, cellRender, editRender, align, showOverflow, className, treeNode, slots } = column;
     const { verticalAlign } = cellOpts;
@@ -207,7 +208,7 @@ function renderColumn(h, _vm, $xetable, seq, rowid, fixedType, rowLevel, row, ro
         if (showValidTip && errorValidItem) {
             const errRule = errorValidItem.rule;
             const validSlot = slots ? slots.valid : null;
-            const validParams = Object.assign(Object.assign({}, params), errorValidItem);
+            const validParams = Object.assign(Object.assign(Object.assign({}, params), errorValidItem), { rule: errorValidItem });
             tdVNs.push(h('div', {
                 class: ['vxe-cell--valid-error-tip', getClass(validOpts.className, errorValidItem)],
                 style: errRule && errRule.maxWidth
@@ -234,11 +235,19 @@ function renderColumn(h, _vm, $xetable, seq, rowid, fixedType, rowLevel, row, ro
     if (hasEllipsis && (scrollYRHeight || rowHeight)) {
         cellHeight = `${scrollYRHeight || rowHeight}px`;
     }
-    else if (scrollYLoad) {
+    else if (scrollXLoad || scrollYLoad) {
         if (!hasEllipsis) {
             cellHeight = `${rest.height || 24}px`;
         }
     }
+    if (mouseConfig && mouseOpts.area && selectCellToRow) {
+        if ((!$columnIndex && selectCellToRow === true) ||
+            (selectCellToRow === column.field)) {
+            tdVNs.push(h('div', {
+                class: 'vxe-cell--area-status'
+            }));
+        }
+    }
     return h('td', {
         class: [
             'vxe-body--column',
@@ -461,6 +470,7 @@ export default {
         elemStore[`${prefix}emptyBlock`] = null;
     },
     render(h) {
+        const $xeTable = this.$parent;
         const { _e, $parent: $xetable, fixedColumn, fixedType } = this;
         let { $scopedSlots, tId, tableData, tableColumn, visibleColumn, expandColumn, showOverflow: allColumnOverflow, keyboardConfig, keyboardOpts, mergeList, spanMethod, scrollXLoad, scrollYLoad, isAllOverflow, emptyOpts, mouseConfig, mouseOpts, sYOpts, rowOpts, isDragRowMove } = $xetable;
         // 如果是使用优化模式
@@ -500,14 +510,19 @@ export default {
                 emptyContent = $xetable.emptyText || getI18n('vxe.table.emptyText');
             }
         }
+        const ons = {
+            scroll: this.scrollEvent
+        };
+        if (sYOpts.mode === 'wheel') {
+            ons.wheel = this.wheelEvent;
+        }
         return h('div', {
+            ref: 'refElem',
             class: ['vxe-table--body-wrapper', fixedType ? `fixed-${fixedType}--wrapper` : 'body--wrapper'],
             attrs: {
                 xid: tId
             },
-            on: Object.assign({
-                scroll: this.scrollEvent
-            }, scrollYLoad && sYOpts.mode === 'wheel' ? { wheel: this.wheelEvent } : null)
+            on: ons
         }, [
             fixedType
                 ? _e()
@@ -590,7 +605,7 @@ export default {
                         class: 'vxe-table--cell-active-area'
                     })
                 ])
-                : null,
+                : renderEmptyElement($xeTable),
             !fixedType
                 ? h('div', {
                     class: 'vxe-table--empty-block',
@@ -600,7 +615,7 @@ export default {
                         class: 'vxe-table--empty-content'
                     }, emptyContent)
                 ])
-                : null
+                : renderEmptyElement($xeTable)
         ]);
     },
     methods: {
@@ -610,24 +625,37 @@ export default {
          * 如果存在列固定右侧，同步更新滚动状态
          */
         scrollEvent(evnt) {
-            const { $el: scrollBodyElem, $parent: $xeTable, fixedType } = this;
-            const { $refs, lastScrollTop, lastScrollLeft } = $xeTable;
-            const { tableHeader, tableBody, leftBody, rightBody, tableFooter } = $refs;
+            const $xeTable = this.$parent;
+            const tableInternalData = $xeTable;
+            const { fixedType } = this;
+            const { lastScrollTop, lastScrollLeft, inVirtualScroll, inBodyScroll, bodyScrollType, inFooterScroll } = tableInternalData;
+            if (inVirtualScroll) {
+                return;
+            }
+            if (inFooterScroll) {
+                return;
+            }
+            if (inBodyScroll) {
+                if (bodyScrollType !== fixedType) {
+                    return;
+                }
+            }
+            const { tableHeader, tableBody, leftBody, rightBody, tableFooter } = $xeTable.$refs;
+            const scrollBodyElem = this.$el;
             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 xHandleEl = $xeTable.$refs.refScrollXHandleElem;
+            const yHandleEl = $xeTable.$refs.refScrollYHandleElem;
             const scrollTop = scrollBodyElem.scrollTop;
             const scrollLeft = bodyElem.scrollLeft;
             const isRollX = scrollLeft !== lastScrollLeft;
             const isRollY = scrollTop !== lastScrollTop;
-            const xHandleEl = $refs.refScrollXHandleElem;
-            const yHandleEl = $refs.refScrollYHandleElem;
-            if (yHandleEl) {
-                yHandleEl.scrollTop = scrollTop;
-            }
-            else if (isRollY) {
+            tableInternalData.inBodyScroll = true;
+            tableInternalData.bodyScrollType = fixedType;
+            if (isRollY) {
                 if (leftElem && fixedType === 'left') {
                     setScrollTop(bodyElem, scrollTop);
                     setScrollTop(rightElem, scrollTop);
@@ -640,22 +668,19 @@ export default {
                     setScrollTop(leftElem, scrollTop);
                     setScrollTop(rightElem, scrollTop);
                 }
-                $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
-                    type: renderType,
-                    fixed: fixedType
-                });
-            }
-            if (xHandleEl) {
-                xHandleEl.scrollLeft = scrollLeft;
+                setScrollTop(yHandleEl, scrollTop);
+                $xeTable.triggerScrollYEvent(evnt);
             }
-            else if (isRollX) {
+            if (isRollX) {
+                setScrollLeft(xHandleEl, scrollLeft);
                 setScrollLeft(headerElem, scrollLeft);
                 setScrollLeft(footerElem, scrollLeft);
-                $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
-                    type: renderType,
-                    fixed: fixedType
-                });
+                $xeTable.triggerScrollXEvent(evnt);
             }
+            $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
+                type: renderType,
+                fixed: fixedType
+            });
         },
         handleWheel(evnt, isTopWheel, deltaTop, isRollX, isRollY) {
             const { $parent: $xetable } = this;

package/es/table/src/footer.js

@@ -221,14 +221,16 @@ export default {
                 tableColumn = visibleColumn;
             }
         }
+        const ons = {};
+        if (!fixedType) {
+            ons.scroll = this.scrollEvent;
+        }
         return h('div', {
             class: ['vxe-table--footer-wrapper', fixedType ? `fixed-${fixedType}--wrapper` : 'body--wrapper'],
             attrs: {
                 xid: tId
             },
-            on: {
-                scroll: this.scrollEvent
-            }
+            on: ons
         }, [
             fixedType
                 ? _e()
@@ -283,28 +285,34 @@ export default {
          * 如果存在列固定右侧，同步更新滚动状态
          */
         scrollEvent(evnt) {
-            const { $parent: $xeTable, fixedType } = this;
-            const { $refs } = $xeTable;
-            const { tableHeader, tableBody, tableFooter } = $refs;
+            const $xeTable = this.$parent;
+            const tableInternalData = $xeTable;
+            const { inVirtualScroll, inBodyScroll } = tableInternalData;
+            if (inVirtualScroll) {
+                return;
+            }
+            if (inBodyScroll) {
+                return;
+            }
+            const { fixedType } = this;
+            const { tableHeader, tableBody, tableFooter } = $xeTable.$refs;
             const headerElem = tableHeader ? tableHeader.$el : null;
             const footerElem = tableFooter ? tableFooter.$el : null;
             const bodyElem = tableBody.$el;
-            const scrollLeft = footerElem ? footerElem.scrollLeft : 0;
-            const xHandleEl = $refs.refScrollXHandleElem;
-            if (xHandleEl) {
-                xHandleEl.scrollLeft = scrollLeft;
-            }
-            else {
-                const isRollX = true;
-                const isRollY = false;
-                const scrollTop = bodyElem.scrollTop;
-                setScrollLeft(headerElem, scrollLeft);
-                setScrollLeft(bodyElem, scrollLeft);
-                $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
-                    type: renderType,
-                    fixed: fixedType
-                });
-            }
+            const xHandleEl = $xeTable.$refs.refScrollXHandleElem;
+            const scrollLeft = footerElem.scrollLeft;
+            const isRollX = true;
+            const isRollY = false;
+            const scrollTop = bodyElem.scrollTop;
+            tableInternalData.inFooterScroll = true;
+            setScrollLeft(xHandleEl, scrollLeft);
+            setScrollLeft(headerElem, scrollLeft);
+            setScrollLeft(bodyElem, scrollLeft);
+            $xeTable.triggerScrollXEvent(evnt);
+            $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
+                type: renderType,
+                fixed: fixedType
+            });
         }
     }
 };