vxe-table 4.10.14 → 4.10.15-beta.0

package/lib/table/src/table.js

@@ -276,8 +276,9 @@ var _default = exports.default = (0, _vue.defineComponent)({
         mini: 36
       },
       scrollVMLoading: false,
+      rowExpandHeightFlag: 1,
       calcCellHeightFlag: 1,
-      resizeHeightFlag: 0,
+      resizeHeightFlag: 1,
       isCustomStatus: false,
       isDragRowMove: false,
       dragRow: null,
@@ -394,6 +395,8 @@ var _default = exports.default = (0, _vue.defineComponent)({
     const refDragTipElem = (0, _vue.ref)();
     const refDragRowLineElem = (0, _vue.ref)();
     const refDragColLineElem = (0, _vue.ref)();
+    const refRowExpandElem = (0, _vue.ref)();
+    const refRowExpandYSpaceElem = (0, _vue.ref)();
     const refScrollXVirtualElem = (0, _vue.ref)();
     const refScrollYVirtualElem = (0, _vue.ref)();
     const refScrollXHandleElem = (0, _vue.ref)();
@@ -655,6 +658,26 @@ var _default = exports.default = (0, _vue.defineComponent)({
     const computeCustomOpts = (0, _vue.computed)(() => {
       return Object.assign({}, getConfig().table.customConfig, props.customConfig);
     });
+    const computeTableRowExpandedList = (0, _vue.computed)(() => {
+      const {
+        rowExpandedMaps,
+        tableData,
+        expandColumn
+      } = reactData;
+      const expandList = [];
+      if (expandColumn) {
+        const rowKeys = {};
+        tableData.forEach(row => {
+          rowKeys[(0, _util.getRowid)($xeTable, row)] = true;
+        });
+        _xeUtils.default.each(rowExpandedMaps, (row, rowid) => {
+          if (rowKeys[rowid]) {
+            expandList.push(row);
+          }
+        });
+      }
+      return expandList;
+    });
     const computeAutoWidthColumnList = (0, _vue.computed)(() => {
       const {
         visibleColumn
@@ -941,6 +964,14 @@ var _default = exports.default = (0, _vue.defineComponent)({
         visibleSize: 6
       };
     };
+    const calcVarRowHeightConfig = (sizeKey, sizeEl) => {
+      const {
+        rowHeightStore
+      } = reactData;
+      if (sizeEl && sizeEl.clientHeight) {
+        rowHeightStore[sizeKey] = sizeEl.clientHeight;
+      }
+    };
     const computeRowHeight = () => {
       const {
         isAllOverflow
@@ -973,7 +1004,9 @@ var _default = exports.default = (0, _vue.defineComponent)({
     };
     const handleVirtualYVisible = currScrollTop => {
       const {
-        isAllOverflow
+        isAllOverflow,
+        expandColumn,
+        rowExpandedMaps
       } = reactData;
       const {
         elemStore,
@@ -981,6 +1014,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
         afterFullData,
         fullAllDataRowIdData
       } = internalData;
+      const expandOpts = computeExpandOpts.value;
       const rowOpts = computeRowOpts.value;
       const cellOpts = computeCellOpts.value;
       const defaultRowHeight = computeDefaultRowHeight.value;
@@ -993,7 +1027,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
         let offsetTop = 0;
         let visibleSize = 0;
         const isCustomCellHeight = isResizeCellHeight || cellOpts.height || rowOpts.height;
-        if (!isCustomCellHeight && isAllOverflow) {
+        if (!isCustomCellHeight && !expandColumn && isAllOverflow) {
           toVisibleIndex = Math.floor(scrollTop / defaultRowHeight);
           visibleSize = Math.ceil(clientHeight / defaultRowHeight) + 1;
         } else {
@@ -1011,6 +1045,10 @@ var _default = exports.default = (0, _vue.defineComponent)({
                 break;
               }
             }
+            // 是否展开行
+            if (expandColumn && rowExpandedMaps[rowid]) {
+              offsetTop += rowRest.expandHeight || expandOpts.height || 0;
+            }
           }
         }
         return {
@@ -1663,7 +1701,8 @@ var _default = exports.default = (0, _vue.defineComponent)({
             level: 0,
             height: 0,
             resizeHeight: 0,
-            oTop: 0
+            oTop: 0,
+            expandHeight: 0
           };
           fullAllDataRowIdData[rowid] = rest;
           fullDataRowIdData[rowid] = rest;
@@ -1713,7 +1752,8 @@ var _default = exports.default = (0, _vue.defineComponent)({
               level: 0,
               height: 0,
               resizeHeight: 0,
-              oTop: 0
+              oTop: 0,
+              expandHeight: 0
             };
             fullAllDataRowIdData[rowid] = rest;
             fullDataRowIdData[rowid] = rest;
@@ -2036,6 +2076,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
       const emptyPlaceholderElem = refEmptyPlaceholder.value;
       const cellOffsetWidth = computeCellOffsetWidth.value;
       const mouseOpts = computeMouseOpts.value;
+      const expandOpts = computeExpandOpts.value;
       const bodyWrapperElem = (0, _util.getRefElem)(elemStore['main-body-wrapper']);
       const bodyTableElem = (0, _util.getRefElem)(elemStore['main-body-table']);
       if (emptyPlaceholderElem) {
@@ -2105,6 +2146,11 @@ var _default = exports.default = (0, _vue.defineComponent)({
         yBottomCornerEl.style.top = `${headerHeight + bodyHeight}px`;
         yBottomCornerEl.style.display = footerHeight ? 'block' : '';
       }
+      const rowExpandEl = refRowExpandElem.value;
+      if (rowExpandEl) {
+        rowExpandEl.style.height = `${bodyHeight}px`;
+        rowExpandEl.style.top = `${headerHeight}px`;
+      }
       containerList.forEach((name, index) => {
         const fixedType = index > 0 ? name : '';
         const layoutList = ['header', 'body', 'footer'];
@@ -2214,7 +2260,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
             let isOptimizeMode = false;
             // 如果是使用优化模式
             if (scrollXLoad || scrollYLoad || isAllOverflow) {
-              if (expandColumn || spanMethod || footerSpanMethod) {
+              if (expandColumn && expandOpts.mode !== 'fixed' || spanMethod || footerSpanMethod) {
                 // 如果不支持优化模式
               } else {
                 isOptimizeMode = true;
@@ -2974,15 +3020,25 @@ var _default = exports.default = (0, _vue.defineComponent)({
       if (!el || !el.clientWidth) {
         return (0, _vue.nextTick)();
       }
+      const varEl = refVarElem.value;
+      if (varEl) {
+        const [defEl, mediumEl, smallEl, miniEl] = varEl.children;
+        calcVarRowHeightConfig('default', defEl);
+        calcVarRowHeightConfig('medium', mediumEl);
+        calcVarRowHeightConfig('small', smallEl);
+        calcVarRowHeightConfig('mini', miniEl);
+      }
       calcCellWidth();
       autoCellWidth();
       updateStyle();
+      updateRowExpandStyle();
       return computeScrollLoad().then(() => {
         if (reFull === true) {
           // 初始化时需要在列计算之后再执行优化运算，达到最优显示效果
           calcCellWidth();
           autoCellWidth();
           updateStyle();
+          updateRowExpandStyle();
           return computeScrollLoad();
         }
       });
@@ -3789,6 +3845,71 @@ var _default = exports.default = (0, _vue.defineComponent)({
         setTimeout(() => $xeTable.recalculate(true), 300);
       });
     };
+    const updateRowExpandStyle = () => {
+      const {
+        expandColumn,
+        scrollYLoad,
+        rowExpandedMaps
+      } = reactData;
+      const expandOpts = computeExpandOpts.value;
+      const rowOpts = computeRowOpts.value;
+      const cellOpts = computeCellOpts.value;
+      const defaultRowHeight = computeDefaultRowHeight.value;
+      const {
+        mode
+      } = expandOpts;
+      if (expandColumn && mode === 'fixed') {
+        const {
+          elemStore,
+          afterFullData,
+          fullAllDataRowIdData
+        } = internalData;
+        const rowExpandEl = refRowExpandElem.value;
+        const bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
+        if (rowExpandEl && bodyScrollElem) {
+          let isUpdateHeight = false;
+          if (scrollYLoad) {
+            let offsetTop = 0;
+            for (let rIndex = 0, rLen = afterFullData.length; rIndex < rLen; rIndex++) {
+              const row = afterFullData[rIndex];
+              const rowid = (0, _util.getRowid)($xeTable, row);
+              const rowRest = fullAllDataRowIdData[rowid] || {};
+              rowRest.oTop = offsetTop;
+              offsetTop += rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight;
+              // 是否展开行
+              if (expandColumn && rowExpandedMaps[rowid]) {
+                offsetTop += rowRest.expandHeight || expandOpts.height || 0;
+              }
+            }
+          }
+          _xeUtils.default.arrayEach(rowExpandEl.children, reEl => {
+            const expandEl = reEl;
+            const rowid = expandEl.getAttribute('rowid') || '';
+            const rowRest = fullAllDataRowIdData[rowid];
+            if (rowRest) {
+              const expandHeight = expandEl.offsetHeight + 1;
+              if (scrollYLoad) {
+                expandEl.style.top = (0, _dom.toCssUnit)(rowRest.oTop + (rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight));
+              } else {
+                const trEl = bodyScrollElem.querySelector(`.vxe-body--row[rowid="${rowid}"]`);
+                if (trEl) {
+                  expandEl.style.top = (0, _dom.toCssUnit)(trEl.offsetTop + trEl.offsetHeight);
+                }
+              }
+              if (!isUpdateHeight) {
+                if (rowRest.expandHeight !== expandHeight) {
+                  isUpdateHeight = true;
+                }
+              }
+              rowRest.expandHeight = expandHeight;
+            }
+          });
+          if (isUpdateHeight) {
+            reactData.rowExpandHeightFlag++;
+          }
+        }
+      }
+    };
     tableMethods = {
       dispatchEvent,
       /**
@@ -3983,7 +4104,8 @@ var _default = exports.default = (0, _vue.defineComponent)({
               level: parentLevel + nodes.length,
               height: 0,
               resizeHeight: 0,
-              oTop: 0
+              oTop: 0,
+              expandHeight: 0
             };
             fullDataRowIdData[rowid] = rest;
             fullAllDataRowIdData[rowid] = rest;
@@ -4943,6 +5065,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
           const el = refElem.value;
           if (el && el.clientWidth) {
             autoCellWidth();
+            updateRowExpandStyle();
           }
           if (rceTimeout) {
             clearTimeout(rceTimeout);
@@ -7520,7 +7643,8 @@ var _default = exports.default = (0, _vue.defineComponent)({
               level,
               height: 0,
               resizeHeight: 0,
-              oTop: 0
+              oTop: 0,
+              expandHeight: 0
             };
           }
           cacheItem.row = row;
@@ -9830,6 +9954,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
           isRight,
           direction
         }, params);
+        updateRowExpandStyle();
         checkLastSyncScroll(isRollX, isRollY);
         if (rowOpts.isHover || highlightHoverRow) {
           $xeTable.clearHoverRow();
@@ -9891,6 +10016,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
         const rightScrollElem = (0, _util.getRefElem)(elemStore['right-body-scroll']);
         const headerScrollElem = (0, _util.getRefElem)(elemStore['main-header-scroll']);
         const footerScrollElem = (0, _util.getRefElem)(elemStore['main-footer-scroll']);
+        const rowExpandEl = refRowExpandElem.value;
         if (inWheelScroll || inVirtualScroll || inHeaderScroll || inFooterScroll) {
           return;
         }
@@ -9937,6 +10063,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
             (0, _dom.setScrollTop)(rightScrollElem, scrollTop);
           }
           (0, _dom.setScrollTop)(yHandleEl, scrollTop);
+          (0, _dom.setScrollTop)(rowExpandEl, scrollTop);
           if (scrollYLoad) {
             $xeTable.triggerScrollYEvent(evnt);
           }
@@ -10076,6 +10203,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
         const leftScrollElem = (0, _util.getRefElem)(elemStore['left-body-scroll']);
         const bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
         const rightScrollElem = (0, _util.getRefElem)(elemStore['right-body-scroll']);
+        const rowExpandEl = refRowExpandElem.value;
         if (!xHandleEl) {
           return;
         }
@@ -10111,6 +10239,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
             (0, _dom.setScrollTop)(bodyScrollElem, currTopNum);
             (0, _dom.setScrollTop)(leftScrollElem, currTopNum);
             (0, _dom.setScrollTop)(rightScrollElem, currTopNum);
+            (0, _dom.setScrollTop)(rowExpandEl, currTopNum);
             if (scrollYLoad) {
               $xeTable.triggerScrollYEvent(evnt);
             }
@@ -10119,16 +10248,6 @@ var _default = exports.default = (0, _vue.defineComponent)({
               fixed: ''
             });
           });
-          // internalData.inWheelScroll = true
-          // setScrollTop(yHandleEl, scrollTop)
-          // setScrollTop(bodyScrollElem, scrollTop)
-          // setScrollTop(leftScrollElem, scrollTop)
-          // setScrollTop(rightScrollElem, scrollTop)
-          // loadScrollYData(scrollTop)
-          // $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
-          //   type: 'footer',
-          //   fixed: ''
-          // })
         }
       },
       triggerVirtualScrollXEvent(evnt) {
@@ -10197,6 +10316,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
         const leftScrollElem = (0, _util.getRefElem)(elemStore['left-body-scroll']);
         const bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
         const rightScrollElem = (0, _util.getRefElem)(elemStore['right-body-scroll']);
+        const rowExpandEl = refRowExpandElem.value;
         const xHandleEl = refScrollXHandleElem.value;
         const wrapperEl = evnt.currentTarget;
         const {
@@ -10213,6 +10333,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
         (0, _dom.setScrollTop)(bodyScrollElem, scrollTop);
         (0, _dom.setScrollTop)(leftScrollElem, scrollTop);
         (0, _dom.setScrollTop)(rightScrollElem, scrollTop);
+        (0, _dom.setScrollTop)(rowExpandEl, scrollTop);
         if (scrollYLoad) {
           $xeTable.triggerScrollYEvent(evnt);
         }
@@ -10309,7 +10430,9 @@ var _default = exports.default = (0, _vue.defineComponent)({
       updateScrollYSpace() {
         const {
           isAllOverflow,
-          scrollYLoad
+          scrollYLoad,
+          expandColumn,
+          rowExpandedMaps
         } = reactData;
         const {
           scrollYStore,
@@ -10321,6 +10444,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
         const {
           startIndex
         } = scrollYStore;
+        const expandOpts = computeExpandOpts.value;
         const rowOpts = computeRowOpts.value;
         const cellOpts = computeCellOpts.value;
         const defaultRowHeight = computeDefaultRowHeight.value;
@@ -10330,7 +10454,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
         let ySpaceHeight = 0;
         if (scrollYLoad) {
           const isCustomCellHeight = isResizeCellHeight || cellOpts.height || rowOpts.height;
-          if (!isCustomCellHeight && isAllOverflow) {
+          if (!isCustomCellHeight && !expandColumn && isAllOverflow) {
             ySpaceHeight = afterFullData.length * defaultRowHeight;
             topSpaceHeight = Math.max(0, startIndex * defaultRowHeight);
           } else {
@@ -10339,12 +10463,20 @@ var _default = exports.default = (0, _vue.defineComponent)({
               const rowid = (0, _util.getRowid)($xeTable, row);
               const rowRest = fullAllDataRowIdData[rowid] || {};
               ySpaceHeight += rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight;
+              // 是否展开行
+              if (expandColumn && rowExpandedMaps[rowid]) {
+                ySpaceHeight += rowRest.expandHeight || expandOpts.height || 0;
+              }
             }
             for (let i = 0; i < startIndex; i++) {
               const row = afterFullData[i];
               const rowid = (0, _util.getRowid)($xeTable, row);
               const rowRest = fullAllDataRowIdData[rowid] || {};
               topSpaceHeight += rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight;
+              // 是否展开行
+              if (expandColumn && rowExpandedMaps[rowid]) {
+                topSpaceHeight += rowRest.expandHeight || expandOpts.height || 0;
+              }
             }
           }
         } else {
@@ -10369,6 +10501,10 @@ var _default = exports.default = (0, _vue.defineComponent)({
         if (scrollYSpaceEl) {
           scrollYSpaceEl.style.height = ySpaceHeight ? `${ySpaceHeight}px` : '';
         }
+        const rowExpandYSpaceEl = refRowExpandYSpaceElem.value;
+        if (rowExpandYSpaceEl) {
+          rowExpandYSpaceEl.style.height = ySpaceHeight ? `${ySpaceHeight}px` : '';
+        }
         return (0, _vue.nextTick)().then(() => {
           updateStyle();
         });
@@ -10378,6 +10514,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
           isAllOverflow
         } = reactData;
         handleTableColumn();
+        $xeTable.updateScrollYSpace();
         return (0, _vue.nextTick)().then(() => {
           handleTableColumn();
           $xeTable.updateScrollXSpace();
@@ -10388,6 +10525,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
       },
       updateScrollYData() {
         $xeTable.handleTableData();
+        $xeTable.updateScrollYSpace();
         return (0, _vue.nextTick)().then(() => {
           $xeTable.handleTableData();
           $xeTable.updateScrollYSpace();
@@ -10616,6 +10754,91 @@ var _default = exports.default = (0, _vue.defineComponent)({
       }
       return renderEmptyElement($xeTable);
     };
+    const renderRowExpandedVNs = () => {
+      const {
+        treeConfig
+      } = props;
+      const {
+        expandColumn
+      } = reactData;
+      const tableRowExpandedList = computeTableRowExpandedList.value;
+      const expandOpts = computeExpandOpts.value;
+      const {
+        mode
+      } = expandOpts;
+      if (mode !== 'fixed') {
+        return renderEmptyElement($xeTable);
+      }
+      const expandVNs = [(0, _vue.h)('div', {
+        key: 'repY',
+        ref: refRowExpandYSpaceElem
+      })];
+      if (expandColumn) {
+        tableRowExpandedList.forEach(row => {
+          const expandOpts = computeExpandOpts.value;
+          const {
+            height: expandHeight,
+            padding
+          } = expandOpts;
+          const {
+            fullAllDataRowIdData
+          } = internalData;
+          const treeOpts = computeTreeOpts.value;
+          const {
+            transform,
+            seqMode
+          } = treeOpts;
+          const cellStyle = {};
+          const rowid = (0, _util.getRowid)($xeTable, row);
+          const rest = fullAllDataRowIdData[rowid];
+          let rowLevel = 0;
+          let seq = -1;
+          let _rowIndex = 0;
+          const rowIndex = $xeTable.getRowIndex(row);
+          const $rowIndex = $xeTable.getVMRowIndex(row);
+          if (rest) {
+            rowLevel = rest.level;
+            if (treeConfig && transform && seqMode === 'increasing') {
+              seq = rest._index + 1;
+            } else {
+              seq = rest.seq;
+            }
+            _rowIndex = rest._index;
+          }
+          if (expandHeight) {
+            cellStyle.height = `${expandHeight}px`;
+          }
+          if (treeConfig) {
+            cellStyle.paddingLeft = `${rowLevel * treeOpts.indent + 30}px`;
+          }
+          const expandParams = {
+            $table: $xeTable,
+            seq,
+            column: expandColumn,
+            fixed: '',
+            type: 'body',
+            level: rowLevel,
+            row,
+            rowIndex,
+            $rowIndex,
+            _rowIndex
+          };
+          expandVNs.push((0, _vue.h)('div', {
+            key: rowid,
+            class: ['vxe-body--row-expanded-cell', {
+              'is--padding': padding,
+              'is--ellipsis': expandHeight
+            }],
+            rowid,
+            style: cellStyle
+          }, expandColumn.renderData(expandParams)));
+        });
+      }
+      return (0, _vue.h)('div', {
+        ref: refRowExpandElem,
+        class: 'vxe-table--row-expanded-wrapper'
+      }, expandVNs);
+    };
     const renderScrollX = () => {
       return (0, _vue.h)('div', {
         key: 'vsx',
@@ -10668,6 +10891,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
       } = props;
       const {
         overflowX,
+        scrollYLoad,
         tableData,
         tableColumn,
         tableGroupColumn,
@@ -10678,10 +10902,16 @@ var _default = exports.default = (0, _vue.defineComponent)({
         leftList,
         rightList
       } = columnStore;
-      return (0, _vue.h)('div', {
+      const leftFixedWidth = computeLeftFixedWidth.value;
+      const rightFixedWidth = computeRightFixedWidth.value;
+      const ons = {};
+      if (scrollYLoad || leftFixedWidth || rightFixedWidth) {
+        ons.onWheel = $xeTable.triggerBodyWheelEvent;
+      }
+      return (0, _vue.h)('div', Object.assign({
         ref: refTableViewportElem,
         class: 'vxe-table--viewport-wrapper'
-      }, [(0, _vue.h)('div', {
+      }, ons), [(0, _vue.h)('div', {
         class: 'vxe-table--main-wrapper'
       }, [
       /**
@@ -10710,7 +10940,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
         tableColumn
       }) : renderEmptyElement($xeTable)]), (0, _vue.h)('div', {
         class: 'vxe-table--fixed-wrapper'
-      }, [leftList && leftList.length && overflowX ? renderFixed('left') : renderEmptyElement($xeTable), rightList && rightList.length && overflowX ? renderFixed('right') : renderEmptyElement($xeTable)])]);
+      }, [leftList && leftList.length && overflowX ? renderFixed('left') : renderEmptyElement($xeTable), rightList && rightList.length && overflowX ? renderFixed('right') : renderEmptyElement($xeTable)]), renderRowExpandedVNs()]);
     };
     const renderBody = () => {
       const scrollbarYToLeft = computeScrollbarYToLeft.value;
@@ -11147,28 +11377,9 @@ var _default = exports.default = (0, _vue.defineComponent)({
       });
     });
     (0, _vue.onMounted)(() => {
-      const {
-        rowHeightStore
-      } = reactData;
-      const varEl = refVarElem.value;
       const columnOpts = computeColumnOpts.value;
       const rowOpts = computeRowOpts.value;
       const customOpts = computeCustomOpts.value;
-      if (varEl) {
-        const [defEl, mediumEl, smallEl, miniEl] = varEl.children;
-        if (defEl) {
-          rowHeightStore.default = defEl.clientHeight;
-        }
-        if (mediumEl) {
-          rowHeightStore.medium = mediumEl.clientHeight;
-        }
-        if (smallEl) {
-          rowHeightStore.small = smallEl.clientHeight;
-        }
-        if (miniEl) {
-          rowHeightStore.mini = miniEl.clientHeight;
-        }
-      }
       if (columnOpts.drag || rowOpts.drag || customOpts.allowSort) {
         (0, _dom.initTpImg)();
       }