vxe-table 3.12.16 → 3.13.0-beta.0

package/es/table/src/table.js

@@ -1,6 +1,7 @@
 import XEUtils from 'xe-utils';
 import { getFuncText, isEnableConf } from '../../ui/src/utils';
 import { initTpImg } from '../../ui/src/dom';
+import { getRowid } from './util';
 import { VxeUI } from '../../ui';
 import methods from './methods';
 import TableBodyComponent from './body';
@@ -173,6 +174,74 @@ function handleUpdateResize(_vm) {
         _vm.recalculate();
     }
 }
+function renderRowExpandedVNs(h, $xeTable) {
+    const props = $xeTable;
+    const reactData = $xeTable;
+    const internalData = $xeTable;
+    const { treeConfig } = props;
+    const { expandColumn } = reactData;
+    const tableRowExpandedList = $xeTable.computeTableRowExpandedList;
+    const expandOpts = $xeTable.computeExpandOpts;
+    const { mode } = expandOpts;
+    if (mode !== 'fixed') {
+        return renderEmptyElement($xeTable);
+    }
+    const expandVNs = [
+        h('div', {
+            key: 'repY',
+            ref: 'refRowExpandYSpaceElem'
+        })
+    ];
+    if (expandColumn) {
+        tableRowExpandedList.forEach((row) => {
+            const expandOpts = $xeTable.computeExpandOpts;
+            const { height: expandHeight, padding } = expandOpts;
+            const { fullAllDataRowIdData } = internalData;
+            const treeOpts = $xeTable.computeTreeOpts;
+            const { transform, seqMode } = treeOpts;
+            const cellStyle = {};
+            const rowid = 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(h('div', {
+                key: rowid,
+                class: ['vxe-body--row-expanded-cell', {
+                        'is--padding': padding,
+                        'is--ellipsis': expandHeight
+                    }],
+                attrs: {
+                    rowid
+                },
+                style: cellStyle
+            }, expandColumn.renderData(h, expandParams)));
+        });
+    }
+    return h('div', {
+        ref: 'refRowExpandElem',
+        class: 'vxe-table--row-expanded-wrapper'
+    }, expandVNs);
+}
 function renderScrollX(h, $xeTable) {
     return h('div', {
         key: 'vsx',
@@ -242,11 +311,18 @@ function renderViewport(h, $xeTable) {
     const props = $xeTable;
     const reactData = $xeTable;
     const { showHeader, showFooter } = props;
-    const { overflowX, tableData, tableColumn, tableGroupColumn, footerTableData, columnStore } = reactData;
+    const { overflowX, scrollYLoad, tableData, tableColumn, tableGroupColumn, footerTableData, columnStore } = reactData;
     const { leftList, rightList } = columnStore;
+    const leftFixedWidth = $xeTable.computeLeftFixedWidth;
+    const rightFixedWidth = $xeTable.computeRightFixedWidth;
+    const ons = {};
+    if (scrollYLoad || leftFixedWidth || rightFixedWidth) {
+        ons.onWheel = $xeTable.triggerBodyWheelEvent;
+    }
     return h('div', {
         ref: 'refTableViewportElem',
-        class: 'vxe-table--viewport-wrapper'
+        class: 'vxe-table--viewport-wrapper',
+        on: ons
     }, [
         h('div', {
             class: 'vxe-table--main-wrapper'
@@ -292,7 +368,8 @@ function renderViewport(h, $xeTable) {
         }, [
             leftList && leftList.length && overflowX ? renderFixed(h, $xeTable, 'left') : renderEmptyElement($xeTable),
             rightList && rightList.length && overflowX ? renderFixed(h, $xeTable, 'right') : renderEmptyElement($xeTable)
-        ])
+        ]),
+        renderRowExpandedVNs(h, $xeTable)
     ]);
 }
 function renderBody(h, $xeTable) {
@@ -560,8 +637,9 @@ export default {
                 mini: 36
             },
             scrollVMLoading: false,
-            calcCellHeightFlag: 0,
-            resizeHeightFlag: 0,
+            rowExpandHeightFlag: 1,
+            calcCellHeightFlag: 1,
+            resizeHeightFlag: 1,
             isCustomStatus: false,
             isDragRowMove: false,
             dragRow: null,
@@ -934,6 +1012,24 @@ export default {
         computeCustomOpts() {
             return Object.assign({}, getConfig().table.customConfig, this.customConfig);
         },
+        computeTableRowExpandedList() {
+            const $xeTable = this;
+            const reactData = $xeTable;
+            const { rowExpandedMaps, tableData, expandColumn } = reactData;
+            const expandList = [];
+            if (expandColumn) {
+                const rowKeys = {};
+                tableData.forEach(row => {
+                    rowKeys[getRowid($xeTable, row)] = true;
+                });
+                XEUtils.each(rowExpandedMaps, (row, rowid) => {
+                    if (rowKeys[rowid]) {
+                        expandList.push(row);
+                    }
+                });
+            }
+            return expandList;
+        },
         computeAutoWidthColumnList() {
             const { tableColumn, visibleColumn } = this;
             return tableColumn.length || visibleColumn.length ? visibleColumn.filter((column) => column.width === 'auto' || column.minWidth === 'auto') : [];
@@ -1367,27 +1463,9 @@ export default {
     mounted() {
         const $xeTable = this;
         const props = $xeTable;
-        const reactData = $xeTable;
-        const { rowHeightStore } = reactData;
-        const varEl = $xeTable.$refs.refVarElem;
         const columnOpts = $xeTable.computeColumnOpts;
         const rowOpts = $xeTable.computeRowOpts;
         const customOpts = $xeTable.computeCustomOpts;
-        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) {
             initTpImg();
         }

package/es/table/style.css

@@ -3042,6 +3042,32 @@
   flex-direction: row;
   align-items: center;
 }
+.vxe-table--render-default .vxe-table--row-expanded-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  pointer-events: none;
+}
+.vxe-table--render-default .vxe-body--row-expanded-cell {
+  position: absolute;
+  z-index: 5;
+  top: 0;
+  left: 0;
+  width: 100%;
+  overflow: auto;
+  background-color: var(--vxe-ui-layout-background-color);
+  pointer-events: all;
+}
+.vxe-table--render-default .vxe-body--row-expanded-cell.is--padding {
+  padding: var(--vxe-ui-table-expand-padding-default);
+}
+.vxe-table--render-default .vxe-body--row-expanded-place-column {
+  border-bottom: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
+  border-right: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
+}
 .vxe-table--render-default .vxe-table--expanded {
   cursor: pointer;
 }