vxe-table 3.9.21 → 3.10.0-beta.0

package/es/table/src/table.js

@@ -20,7 +20,7 @@ import exportMixin from '../module/export/mixin';
 import keyboardMixin from '../module/keyboard/mixin';
 import validatorMixin from '../module/validator/mixin';
 import customMixin from '../module/custom/mixin';
-const { getConfig, getI18n, renderer, globalResize, globalEvents, globalMixins } = VxeUI;
+const { getConfig, getI18n, renderer, globalResize, globalEvents, globalMixins, renderEmptyElement } = VxeUI;
 /**
  * 渲染浮固定列
  * 分别渲染左边固定列和右边固定列
@@ -73,7 +73,7 @@ function renderFixed(h, $xetable, fixedType) {
             : _e()
     ]);
 }
-function renderEmptyContenet(h, _vm) {
+function renderEmptyBody(h, _vm) {
     const { $scopedSlots, emptyOpts } = _vm;
     let emptyContent = '';
     const params = { $table: _vm };
@@ -619,6 +619,15 @@ export default {
             }
             return false;
         },
+        computeVirtualScrollBars() {
+            const $xeTable = this;
+            const reactData = $xeTable;
+            const { overflowX, scrollXLoad, overflowY, scrollYLoad } = reactData;
+            return {
+                x: overflowX && scrollXLoad,
+                y: overflowY && scrollYLoad
+            };
+        },
         tabsResizeFlag() {
             const $xeTable = this;
             const $xeTabs = $xeTable.$xeTabs;
@@ -1002,10 +1011,12 @@ export default {
         // 使用已安装的组件，如果未安装则不渲染
         const VxeUILoadingComponent = VxeUI.getComponent('VxeLoading');
         const VxeUITooltipComponent = VxeUI.getComponent('VxeTooltip');
-        const { _e, $scopedSlots, tId, isCalcColumn, tableData, tableColumn, tableGroupColumn, isGroup, loading, stripe, showHeader, height, tableBorder, treeOpts, treeConfig, mouseConfig, mouseOpts, computeSize, validOpts, showFooter, overflowX, overflowY, scrollXLoad, scrollYLoad, scrollbarHeight, highlightCell, highlightHoverRow, highlightHoverColumn, editConfig, validTipOpts, initStore, columnStore, filterStore, customStore, ctxMenuStore, ctxMenuOpts, footerTableData, columnOpts, rowOpts, checkboxOpts, loadingOpts, editRules } = this;
+        const $xeTable = this;
+        const { _e, $scopedSlots, tId, isCalcColumn, tableData, tableColumn, tableGroupColumn, isGroup, loading, stripe, showHeader, height, tableBorder, treeOpts, treeConfig, mouseConfig, mouseOpts, computeSize, validOpts, showFooter, overflowX, overflowY, scrollXLoad, scrollYLoad, scrollbarHeight, highlightCell, highlightHoverRow, highlightHoverColumn, editConfig, validTipOpts, initStore, columnStore, filterStore, customStore, ctxMenuStore, ctxMenuOpts, footerTableData, columnOpts, rowOpts, checkboxOpts, loadingOpts, editRules } = $xeTable;
         const { leftList, rightList } = columnStore;
         const currLoading = this._isLoading || loading;
         const vSize = computeSize;
+        const virtualScrollBars = $xeTable.computeVirtualScrollBars;
         return h('div', {
             class: ['vxe-table', 'vxe-table--render-default', `tid_${tId}`, vSize ? `size--${vSize}` : '', `border--${tableBorder}`, {
                     [`valid-msg--${validOpts.msgMode}`]: !!editRules,
@@ -1050,6 +1061,7 @@ export default {
                 ref: 'hideColumn'
             }, this.$slots.default),
             h('div', {
+                key: 'tw',
                 class: 'vxe-table--render-wrapper'
             }, [
                 h('div', {
@@ -1097,37 +1109,74 @@ export default {
                 h('div', {
                     class: 'vxe-table--fixed-wrapper'
                 }, [
-                    /**
-                     * 左侧固定区域
-                     */
                     leftList && leftList.length && overflowX ? renderFixed(h, this, 'left') : _e(),
-                    /**
-                     * 右侧固定区域
-                     */
                     rightList && rightList.length && overflowX ? renderFixed(h, this, 'right') : _e()
                 ])
             ]),
+            virtualScrollBars.x
+                ? h('div', {
+                    key: 'vx',
+                    ref: 'refScrollXVirtualElem',
+                    class: 'vxe-table--scroll-x-virtual'
+                }, [
+                    h('div', {
+                        ref: 'refScrollXHandleElem',
+                        class: 'vxe-table--scroll-x-handle',
+                        on: {
+                            scroll: $xeTable.scrollXEvent
+                        }
+                    }, [
+                        h('div', {
+                            ref: 'refScrollXSpaceElem',
+                            class: 'vxe-table--scroll-x-space'
+                        })
+                    ])
+                ])
+                : renderEmptyElement($xeTable),
+            virtualScrollBars.y
+                ? h('div', {
+                    key: 'vy',
+                    ref: 'refScrollYVirtualElem',
+                    class: 'vxe-table--scroll-y-virtual'
+                }, [
+                    h('div', {
+                        ref: 'refScrollYHandleElem',
+                        class: 'vxe-table--scroll-y-handle',
+                        on: {
+                            scroll: $xeTable.scrollYEvent
+                        }
+                    }, [
+                        h('div', {
+                            ref: 'refScrollYSpaceElem',
+                            class: 'vxe-table--scroll-x-space'
+                        })
+                    ])
+                ])
+                : renderEmptyElement($xeTable),
             /**
              * 空数据
              */
             h('div', {
+                key: 'tn',
                 ref: 'emptyPlaceholder',
                 class: 'vxe-table--empty-placeholder'
             }, [
                 h('div', {
                     class: 'vxe-table--empty-content'
-                }, renderEmptyContenet(h, this))
+                }, renderEmptyBody(h, this))
             ]),
             /**
              * 边框线
              */
             h('div', {
+                key: 'tl',
                 class: 'vxe-table--border-line'
             }),
             /**
              * 列宽线
              */
             h('div', {
+                key: 'cl',
                 class: 'vxe-table--resizable-bar',
                 style: overflowX
                     ? {
@@ -1141,6 +1190,7 @@ export default {
              */
             VxeUILoadingComponent
                 ? h(VxeUILoadingComponent, {
+                    key: 'lg',
                     class: 'vxe-table--loading',
                     props: {
                         value: currLoading,
@@ -1154,6 +1204,7 @@ export default {
              */
             initStore.custom
                 ? h(TableCustomPanelComponent, {
+                    key: 'cs',
                     ref: 'customWrapper',
                     props: {
                         customStore
@@ -1165,6 +1216,7 @@ export default {
              */
             initStore.filter
                 ? h(TableFilterPanelComponent, {
+                    key: 'tf',
                     ref: 'filterWrapper',
                     props: {
                         filterStore
@@ -1176,6 +1228,7 @@ export default {
              */
             initStore.import && this.importConfig
                 ? h(TableImportPanelComponent, {
+                    key: 'it',
                     props: {
                         defaultOptions: this.importParams,
                         storeData: this.importStore
@@ -1187,6 +1240,7 @@ export default {
              */
             initStore.export && (this.exportConfig || this.printConfig)
                 ? h(TableExportPanelComponent, {
+                    key: 'et',
                     props: {
                         defaultOptions: this.exportParams,
                         storeData: this.exportStore
@@ -1198,6 +1252,7 @@ export default {
              */
             ctxMenuStore.visible && this.isCtxMenu
                 ? h(TableMenuPanelComponent, {
+                    key: 'tm',
                     ref: 'ctxWrapper',
                     props: {
                         ctxMenuStore,
@@ -1211,6 +1266,7 @@ export default {
                  */
                 VxeUITooltipComponent
                     ? h(VxeUITooltipComponent, {
+                        key: 'ctp',
                         ref: 'commTip',
                         props: {
                             isArrow: false,
@@ -1223,6 +1279,7 @@ export default {
                  */
                 VxeUITooltipComponent
                     ? h(VxeUITooltipComponent, {
+                        key: 'btp',
                         ref: 'tooltip',
                         props: Object.assign({}, this.tipConfig, this.tooltipStore.currOpts)
                     })
@@ -1232,6 +1289,7 @@ export default {
                  */
                 VxeUITooltipComponent && this.editRules && validOpts.showMessage && (validOpts.message === 'default' ? !height : validOpts.message === 'tooltip')
                     ? h(VxeUITooltipComponent, {
+                        key: 'vtp',
                         ref: 'validTip',
                         class: [{
                                 'old-cell-valid': editRules && getConfig().cellVaildMode === 'obsolete'

package/es/table/src/util.js

@@ -80,16 +80,6 @@ export function restoreScrollLocation(_vm, scrollLeft, scrollTop) {
 export function toTreePathSeq(path) {
     return path.map((num, i) => i % 2 === 0 ? (Number(num) + 1) : '.').join('');
 }
-export function removeScrollListener(scrollElem) {
-    if (scrollElem && scrollElem._onscroll) {
-        scrollElem.onscroll = null;
-    }
-}
-export function restoreScrollListener(scrollElem) {
-    if (scrollElem && scrollElem._onscroll) {
-        scrollElem.onscroll = scrollElem._onscroll;
-    }
-}
 /**
  * 生成行的唯一主键
  */
@@ -317,30 +307,62 @@ export function isColumnInfo(column) {
 export function createColumn($xeTable, options, renderOptions) {
     return isColumnInfo(options) ? options : new ColumnInfo($xeTable, options, renderOptions);
 }
-export function rowToVisible($xetable, row) {
-    const { tableBody } = $xetable.$refs;
+export function rowToVisible($xeTable, row) {
+    const { reactData, internalData } = $xeTable;
+    const tableProps = $xeTable;
+    const { showOverflow } = tableProps;
+    const tableBody = $xeTable.$refs.tableBody;
+    const { columnStore, scrollYLoad } = reactData;
+    const { afterFullData, scrollYStore, fullAllDataRowIdData } = internalData;
+    const { leftList, rightList } = columnStore;
     const bodyElem = tableBody ? tableBody.$el : null;
+    const rowid = getRowid($xeTable, row);
+    let offsetFixedLeft = 0;
+    leftList.forEach(item => {
+        offsetFixedLeft += item.renderWidth;
+    });
+    let offsetFixedRight = 0;
+    rightList.forEach(item => {
+        offsetFixedRight += item.renderWidth;
+    });
     if (bodyElem) {
-        const trElem = bodyElem.querySelector(`[rowid="${getRowid($xetable, row)}"]`);
+        const bodyHeight = bodyElem.clientHeight;
+        const bodyScrollTop = bodyElem.scrollTop;
+        const trElem = bodyElem.querySelector(`[rowid="${rowid}"]`);
         if (trElem) {
-            const bodyHeight = bodyElem.clientHeight;
-            const bodySrcollTop = bodyElem.scrollTop;
-            const trOffsetTop = trElem.offsetTop + (trElem.offsetParent ? trElem.offsetParent.offsetTop : 0);
+            const trOffsetParent = trElem.offsetParent;
+            const trOffsetTop = trElem.offsetTop + (trOffsetParent ? trOffsetParent.offsetTop : 0);
             const trHeight = trElem.clientHeight;
             // 检测行是否在可视区中
-            if (trOffsetTop < bodySrcollTop || trOffsetTop > bodySrcollTop + bodyHeight) {
-                // 向上定位
-                return $xetable.scrollTo(null, trOffsetTop);
+            if (trOffsetTop < bodyScrollTop || trOffsetTop > bodyScrollTop + bodyHeight) {
+                return $xeTable.scrollTo(null, trOffsetTop);
             }
-            else if (trOffsetTop + trHeight >= bodyHeight + bodySrcollTop) {
-                // 向下定位
-                return $xetable.scrollTo(null, bodySrcollTop + trHeight);
+            else if (trOffsetTop + trHeight >= bodyHeight + bodyScrollTop) {
+                return $xeTable.scrollTo(null, bodyScrollTop + trHeight);
             }
         }
         else {
-            // 如果是虚拟渲染跨行滚动
-            if ($xetable.scrollYLoad) {
-                return $xetable.scrollTo(null, ($xetable.afterFullData.indexOf(row) - 1) * $xetable.scrollYStore.rowHeight);
+            // 如果是虚拟渲染滚动
+            if (scrollYLoad) {
+                if (showOverflow) {
+                    return $xeTable.scrollTo(null, ($xeTable.findRowIndexOf(afterFullData, row) - 1) * scrollYStore.rowHeight);
+                }
+                let scrollTop = 0;
+                const rest = fullAllDataRowIdData[rowid];
+                const rHeight = rest ? rest.height : 0;
+                for (let i = 0; i < afterFullData.length; i++) {
+                    const currRow = afterFullData[i];
+                    const currRowid = getRowid($xeTable, currRow);
+                    if (currRow === row || currRowid === rowid) {
+                        break;
+                    }
+                    const rest = fullAllDataRowIdData[currRowid];
+                    scrollTop += rest ? rest.height : 0;
+                }
+                if (scrollTop < bodyScrollTop) {
+                    return $xeTable.scrollTo(null, scrollTop - offsetFixedLeft - 1);
+                }
+                return $xeTable.scrollTo(null, (scrollTop + rHeight) - (bodyHeight - offsetFixedRight - 1));
             }
         }
     }
@@ -348,9 +370,12 @@ export function rowToVisible($xetable, row) {
 }
 export function colToVisible($xeTable, column) {
     const { columnStore, scrollXLoad, visibleColumn } = $xeTable;
-    const { tableBody } = $xeTable.$refs;
+    const tableBody = $xeTable.$refs.tableBody;
     const { leftList, rightList } = columnStore;
     const bodyElem = tableBody ? tableBody.$el : null;
+    if (column.fixed) {
+        return Promise.resolve();
+    }
     let offsetFixedLeft = 0;
     leftList.forEach((item) => {
         offsetFixedLeft += item.renderWidth;
@@ -361,16 +386,16 @@ export function colToVisible($xeTable, column) {
     });
     if (bodyElem) {
         const bodyWidth = bodyElem.clientWidth;
-        const bodySrcollLeft = bodyElem.scrollLeft;
+        const bodyScrollLeft = bodyElem.scrollLeft;
         const tdElem = bodyElem.querySelector(`.${column.id}`);
         if (tdElem) {
             const tdOffsetLeft = tdElem.offsetLeft + (tdElem.offsetParent ? tdElem.offsetParent.offsetLeft : 0);
             const cellWidth = tdElem.clientWidth;
             // 检测是否在可视区中
-            if (tdOffsetLeft < (bodySrcollLeft + offsetFixedLeft)) {
+            if (tdOffsetLeft < (bodyScrollLeft + offsetFixedLeft)) {
                 return $xeTable.scrollTo(tdOffsetLeft - offsetFixedLeft - 1);
             }
-            else if ((tdOffsetLeft + cellWidth - bodySrcollLeft) > (bodyWidth - offsetFixedRight)) {
+            else if ((tdOffsetLeft + cellWidth - bodyScrollLeft) > (bodyWidth - offsetFixedRight)) {
                 return $xeTable.scrollTo((tdOffsetLeft + cellWidth) - (bodyWidth - offsetFixedRight - 1));
             }
         }
@@ -379,13 +404,13 @@ export function colToVisible($xeTable, column) {
             if (scrollXLoad) {
                 let scrollLeft = 0;
                 const cellWidth = column.renderWidth;
-                for (let index = 0; index < visibleColumn.length; index++) {
-                    if (visibleColumn[index] === column) {
+                for (let i = 0; i < visibleColumn.length; i++) {
+                    if (visibleColumn[i] === column) {
                         break;
                     }
-                    scrollLeft += visibleColumn[index].renderWidth;
+                    scrollLeft += visibleColumn[i].renderWidth;
                 }
-                if (scrollLeft < bodySrcollLeft) {
+                if (scrollLeft < bodyScrollLeft) {
                     return $xeTable.scrollTo(scrollLeft - offsetFixedLeft - 1);
                 }
                 return $xeTable.scrollTo((scrollLeft + cellWidth) - (bodyWidth - offsetFixedRight - 1));

package/es/table/style.css

@@ -1373,7 +1373,7 @@
   border-radius: var(--vxe-ui-border-radius);
   background-color: var(--vxe-ui-layout-background-color);
   border: 1px solid var(--vxe-ui-base-popup-border-color);
-  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
+  box-shadow: var(--vxe-ui-base-popup-box-shadow);
   z-index: 10;
 }
 .vxe-table--filter-wrapper:not(.is--multiple) {
@@ -2045,10 +2045,10 @@
   /*单元格编辑状态*/
   /*可编辑*/
 }
-.vxe-table--render-default .vxe-table--body-wrapper > table {
+.vxe-table--render-default .vxe-table--body-wrapper {
   background-color: var(--vxe-ui-layout-background-color);
 }
-.vxe-table--render-default .vxe-table--footer-wrapper > table {
+.vxe-table--render-default .vxe-table--footer-wrapper {
   background-color: var(--vxe-ui-table-footer-background-color);
 }
 .vxe-table--render-default .vxe-table--header,
@@ -2277,6 +2277,48 @@
 .vxe-table--render-default.size--mini .vxe-cell .vxe-default-input[type=date]::-webkit-inner-spin-button {
   margin-top: 1px;
 }
+.vxe-table--render-default .vxe-table--scroll-x-virtual,
+.vxe-table--render-default .vxe-table--scroll-y-virtual {
+  position: absolute;
+  z-index: 7;
+  overflow: hidden;
+}
+.vxe-table--render-default .vxe-table--scroll-x-handle,
+.vxe-table--render-default .vxe-table--scroll-y-handle {
+  position: absolute;
+}
+.vxe-table--render-default .vxe-table--scroll-x-handle div,
+.vxe-table--render-default .vxe-table--scroll-y-handle div {
+  display: block;
+}
+.vxe-table--render-default .vxe-table--scroll-x-virtual,
+.vxe-table--render-default .vxe-table--scroll-x-handle {
+  width: 100%;
+  left: 0;
+  bottom: 0;
+}
+.vxe-table--render-default .vxe-table--scroll-x-handle {
+  overflow-y: hidden;
+  overflow-x: auto;
+  height: 18px;
+}
+.vxe-table--render-default .vxe-table--scroll-y-virtual,
+.vxe-table--render-default .vxe-table--scroll-y-handle {
+  height: 100%;
+  right: 0;
+  top: 0;
+}
+.vxe-table--render-default .vxe-table--scroll-y-handle {
+  overflow-y: auto;
+  overflow-x: hidden;
+  width: 18px;
+}
+.vxe-table--render-default .vxe-table--scroll-x-space {
+  height: 1px;
+}
+.vxe-table--render-default .vxe-table--scroll-y-space {
+  width: 1px;
+}
 .vxe-table--render-default.is--padding .vxe-cell {
   padding-left: var(--vxe-ui-table-cell-padding-left);
   padding-right: var(--vxe-ui-table-cell-padding-right);
@@ -2375,6 +2417,7 @@
   background-color: inherit;
   transition: 0.3s box-shadow;
   outline: 0;
+  background-color: var(--vxe-ui-layout-background-color);
 }
 .vxe-table--render-default .vxe-table--fixed-left-wrapper .vxe-table--body-wrapper,
 .vxe-table--render-default .vxe-table--fixed-right-wrapper .vxe-table--body-wrapper {