vxe-table 4.12.0-beta.6 → 4.12.0-beta.7

package/es/table/src/footer.js

@@ -126,6 +126,7 @@ export default defineComponent({
                 tfOns.onDblclick = (evnt) => {
                     $xeTable.dispatchEvent('footer-cell-dblclick', Object.assign({ cell: evnt.currentTarget }, cellParams), evnt);
                 };
+                let isMergeCell = false;
                 // 合并行或列
                 if (mergeFooterList.length) {
                     const spanRest = mergeFooterMethod(mergeFooterList, _rowIndex, _columnIndex);
@@ -135,9 +136,11 @@ export default defineComponent({
                             return null;
                         }
                         if (rowspan > 1) {
+                            isMergeCell = true;
                             attrs.rowspan = rowspan;
                         }
                         if (colspan > 1) {
+                            isMergeCell = true;
                             attrs.colspan = colspan;
                         }
                     }
@@ -158,8 +161,10 @@ export default defineComponent({
                 const isLastColumn = $columnIndex === tableColumn.length - 1;
                 const isAutoCellWidth = !column.resizeWidth && (column.minWidth === 'auto' || column.width === 'auto');
                 let isVNPreEmptyStatus = false;
-                if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
-                    isVNPreEmptyStatus = true;
+                if (!isMergeCell) {
+                    if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
+                        isVNPreEmptyStatus = true;
+                    }
                 }
                 const tcStyle = {};
                 if (hasEllipsis) {

package/es/table/src/table.js

@@ -9,7 +9,7 @@ import TableHeaderComponent from './header';
 import TableFooterComponent from './footer';
 import tableProps from './props';
 import tableEmits from './emits';
-import { getRowUniqueId, clearTableAllStatus, getRowkey, getRowid, rowToVisible, colToVisible, getCellValue, setCellValue, handleFieldOrColumn, toTreePathSeq, restoreScrollLocation, getRootColumn, getRefElem, getColReMinWidth } from './util';
+import { getRowUniqueId, clearTableAllStatus, getRowkey, getRowid, rowToVisible, colToVisible, getCellValue, setCellValue, handleFieldOrColumn, toTreePathSeq, restoreScrollLocation, getRootColumn, getRefElem, getColReMinWidth, updateDeepRowKey, updateFastRowKey } from './util';
 import { getSlotVNs } from '../../ui/src/vn';
 import { warnLog, errLog } from '../../ui/src/log';
 import TableCustomPanelComponent from '../module/custom/panel';
@@ -2651,7 +2651,7 @@ export default defineComponent({
             const { transform } = treeOpts;
             const childrenField = treeOpts.children || treeOpts.childrenField;
             let treeData = [];
-            let fullData = reactive(datas ? datas.slice(0) : []); // 转为响应式
+            let fullData = reactive(datas ? datas.slice(0) : []); // 转为响应式数据
             if (treeConfig) {
                 if (transform) {
                     // 树结构自动转换
@@ -6750,32 +6750,19 @@ export default defineComponent({
                 const treeOpts = computeTreeOpts.value;
                 const childrenField = treeOpts.children || treeOpts.childrenField;
                 const hasChildField = treeOpts.hasChild || treeOpts.hasChildField;
+                const { lazy } = treeOpts;
                 const rowkey = getRowkey($xeTable);
+                const isDeepKey = rowkey.indexOf('.') > -1;
                 const fullAllDataRowIdMaps = Object.assign({}, fullAllDataRowIdData); // 存在已删除数据
                 const fullDataRowIdMaps = {};
                 const treeTempExpandedMaps = Object.assign({}, treeExpandedMaps);
-                const handleRow = (row, index, items, path, parentRow, nodes) => {
-                    let rowid = getRowid($xeTable, row);
-                    const seq = treeConfig && path ? toTreePathSeq(path) : index + 1;
-                    const level = nodes ? nodes.length - 1 : 0;
-                    if (eqEmptyValue(rowid)) {
-                        rowid = getRowUniqueId();
-                        XEUtils.set(row, rowkey, rowid);
-                    }
-                    if (treeConfig && treeOpts.lazy) {
-                        const treeExpRest = treeExpandedMaps[rowid];
-                        if (row[hasChildField] && XEUtils.isUndefined(row[childrenField])) {
-                            row[childrenField] = null;
-                        }
-                        if (treeExpRest) {
-                            if (!row[childrenField] || !row[childrenField].length) {
-                                delete treeTempExpandedMaps[rowid];
-                            }
-                        }
-                    }
-                    let rowRest = fullAllDataRowIdData[rowid];
+                const handleRowId = isDeepKey ? updateDeepRowKey : updateFastRowKey;
+                const handleRowCache = (row, index, items, currIndex, parentRow, rowid, level, seq) => {
+                    let rowRest = fullAllDataRowIdMaps[rowid];
                     if (!rowRest) {
                         rowRest = { row, rowid, seq, index: -1, _index: -1, $index: -1, treeIndex: index, items, parent: parentRow, level, height: 0, resizeHeight: 0, oTop: 0, expandHeight: 0 };
+                        fullDataRowIdMaps[rowid] = rowRest;
+                        fullAllDataRowIdMaps[rowid] = rowRest;
                     }
                     rowRest.treeLoaded = false;
                     rowRest.expandLoaded = false;
@@ -6783,15 +6770,30 @@ export default defineComponent({
                     rowRest.items = items;
                     rowRest.parent = parentRow;
                     rowRest.level = level;
-                    rowRest.index = treeConfig && parentRow ? -1 : index;
-                    fullDataRowIdMaps[rowid] = rowRest;
-                    fullAllDataRowIdMaps[rowid] = rowRest;
+                    rowRest.index = currIndex;
+                    rowRest.treeIndex = index;
                 };
                 if (treeConfig) {
-                    XEUtils.eachTree(tableFullTreeData, handleRow, { children: childrenField });
+                    XEUtils.eachTree(tableFullTreeData, (row, index, items, path, parentRow, nodes) => {
+                        const rowid = handleRowId(row, rowkey);
+                        if (treeConfig && lazy) {
+                            const treeExpRest = treeTempExpandedMaps[rowid];
+                            if (row[hasChildField] && row[childrenField] === undefined) {
+                                row[childrenField] = null;
+                            }
+                            if (treeExpRest) {
+                                if (!row[childrenField] || !row[childrenField].length) {
+                                    delete treeTempExpandedMaps[rowid];
+                                }
+                            }
+                        }
+                        handleRowCache(row, index, items, parentRow ? -1 : index, parentRow, rowid, nodes.length - 1, toTreePathSeq(path));
+                    }, { children: childrenField });
                 }
                 else {
-                    tableFullData.forEach(handleRow);
+                    tableFullData.forEach((row, index, items) => {
+                        handleRowCache(row, index, items, index, null, handleRowId(row, rowkey), 0, index + 1);
+                    });
                 }
                 internalData.fullDataRowIdData = fullDataRowIdMaps;
                 internalData.fullAllDataRowIdData = fullAllDataRowIdMaps;

package/es/table/src/util.js

@@ -2,6 +2,7 @@ import { watch, reactive } from 'vue';
 import XEUtils from 'xe-utils';
 import { ColumnInfo } from './columnInfo';
 import { isPx, isScale } from '../../ui/src/dom';
+import { eqEmptyValue } from '../../ui/src/utils';
 const getAllConvertColumns = (columns, parentColumn) => {
     const result = [];
     columns.forEach((column) => {
@@ -90,14 +91,33 @@ export function getRowUniqueId() {
 export function getRowkey($xeTable) {
     const { props } = $xeTable;
     const { computeRowOpts } = $xeTable.getComputeMaps();
-    const { rowId } = props;
     const rowOpts = computeRowOpts.value;
-    return rowId || rowOpts.keyField || '_X_ROW_KEY';
+    return `${props.rowId || rowOpts.keyField || '_X_ROW_KEY'}`;
 }
 // 行主键 value
 export function getRowid($xeTable, row) {
     const rowid = XEUtils.get(row, getRowkey($xeTable));
-    return XEUtils.eqNull(rowid) ? '' : encodeURIComponent(rowid);
+    return encodeRowid(rowid);
+}
+// 编码行主键
+export function encodeRowid(rowVal) {
+    return XEUtils.eqNull(rowVal) ? '' : encodeURIComponent(rowVal);
+}
+export function updateDeepRowKey(row, rowkey) {
+    let rowid = XEUtils.get(row, rowkey);
+    if (eqEmptyValue(rowid)) {
+        rowid = getRowUniqueId();
+        XEUtils.set(row, rowkey, rowid);
+    }
+    return rowid;
+}
+export function updateFastRowKey(row, rowkey) {
+    let rowid = row[rowkey];
+    if (eqEmptyValue(rowid)) {
+        rowid = getRowUniqueId();
+        row[rowkey] = rowid;
+    }
+    return rowid;
 }
 export const handleFieldOrColumn = ($xeTable, fieldOrColumn) => {
     if (fieldOrColumn) {

package/es/ui/index.js

@@ -1,6 +1,6 @@
 import { VxeUI } from '@vxe-ui/core';
 import { getFuncText } from './src/utils';
-export const version = "4.12.0-beta.6";
+export const version = "4.12.0-beta.7";
 VxeUI.version = version;
 VxeUI.tableVersion = version;
 VxeUI.setConfig({

package/es/ui/src/log.js

@@ -1,5 +1,5 @@
 import { VxeUI } from '@vxe-ui/core';
 const { log } = VxeUI;
-const version = `table v${"4.12.0-beta.6"}`;
+const version = `table v${"4.12.0-beta.7"}`;
 export const warnLog = log.create('warn', version);
 export const errLog = log.create('error', version);

package/lib/index.umd.js

@@ -3138,7 +3138,7 @@ function eqEmptyValue(cellValue) {
 ;// ./packages/ui/index.ts
 
 
-const version = "4.12.0-beta.6";
+const version = "4.12.0-beta.7";
 core_.VxeUI.version = version;
 core_.VxeUI.tableVersion = version;
 core_.VxeUI.setConfig({
@@ -3586,7 +3586,7 @@ var esnext_iterator_some = __webpack_require__(7550);
 const {
   log: log_log
 } = core_.VxeUI;
-const log_version = `table v${"4.12.0-beta.6"}`;
+const log_version = `table v${"4.12.0-beta.7"}`;
 const warnLog = log_log.create('warn', log_version);
 const errLog = log_log.create('error', log_version);
 ;// ./packages/table/src/columnInfo.ts
@@ -3960,6 +3960,7 @@ function isNodeElement(elem) {
 
 
 
+
 const getAllConvertColumns = (columns, parentColumn) => {
   const result = [];
   columns.forEach(column => {
@@ -4049,16 +4050,33 @@ function getRowkey($xeTable) {
   const {
     computeRowOpts
   } = $xeTable.getComputeMaps();
-  const {
-    rowId
-  } = props;
   const rowOpts = computeRowOpts.value;
-  return rowId || rowOpts.keyField || '_X_ROW_KEY';
+  return `${props.rowId || rowOpts.keyField || '_X_ROW_KEY'}`;
 }
 // 行主键 value
 function getRowid($xeTable, row) {
   const rowid = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().get(row, getRowkey($xeTable));
-  return external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eqNull(rowid) ? '' : encodeURIComponent(rowid);
+  return encodeRowid(rowid);
+}
+// 编码行主键
+function encodeRowid(rowVal) {
+  return external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eqNull(rowVal) ? '' : encodeURIComponent(rowVal);
+}
+function updateDeepRowKey(row, rowkey) {
+  let rowid = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().get(row, rowkey);
+  if (eqEmptyValue(rowid)) {
+    rowid = getRowUniqueId();
+    external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().set(row, rowkey, rowid);
+  }
+  return rowid;
+}
+function updateFastRowKey(row, rowkey) {
+  let rowid = row[rowkey];
+  if (eqEmptyValue(rowid)) {
+    rowid = getRowUniqueId();
+    row[rowkey] = rowid;
+  }
+  return rowid;
 }
 const handleFieldOrColumn = ($xeTable, fieldOrColumn) => {
   if (fieldOrColumn) {
@@ -6462,6 +6480,7 @@ const renderType = 'body';
       tdOns.onDblclick = evnt => {
         $xeTable.triggerCellDblclickEvent(evnt, cellParams);
       };
+      let isMergeCell = false;
       // 合并行或列
       if (mergeList.length) {
         const spanRest = mergeBodyMethod(mergeList, _rowIndex, _columnIndex);
@@ -6474,9 +6493,11 @@ const renderType = 'body';
             return null;
           }
           if (rowspan > 1) {
+            isMergeCell = true;
             tdAttrs.rowspan = rowspan;
           }
           if (colspan > 1) {
+            isMergeCell = true;
             tdAttrs.colspan = colspan;
           }
         }
@@ -6511,11 +6532,13 @@ const renderType = 'body';
       const isLastColumn = $columnIndex === columns.length - 1;
       const isAutoCellWidth = !column.resizeWidth && (column.minWidth === 'auto' || column.width === 'auto');
       let isVNPreEmptyStatus = false;
-      if (!dragRow || getRowid($xeTable, dragRow) !== rowid) {
-        if (scrollYLoad && (_rowIndex < scrollYStore.visibleStartIndex - scrollYStore.preloadSize || _rowIndex > scrollYStore.visibleEndIndex + scrollYStore.preloadSize)) {
-          isVNPreEmptyStatus = true;
-        } else if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
-          isVNPreEmptyStatus = true;
+      if (!isMergeCell) {
+        if (!dragRow || getRowid($xeTable, dragRow) !== rowid) {
+          if (scrollYLoad && (_rowIndex < scrollYStore.visibleStartIndex - scrollYStore.preloadSize || _rowIndex > scrollYStore.visibleEndIndex + scrollYStore.preloadSize)) {
+            isVNPreEmptyStatus = true;
+          } else if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
+            isVNPreEmptyStatus = true;
+          }
         }
       }
       const tcStyle = {};
@@ -7704,6 +7727,7 @@ function mergeFooterMethod(mergeFooterList, _rowIndex, _columnIndex) {
             cell: evnt.currentTarget
           }, cellParams), evnt);
         };
+        let isMergeCell = false;
         // 合并行或列
         if (mergeFooterList.length) {
           const spanRest = mergeFooterMethod(mergeFooterList, _rowIndex, _columnIndex);
@@ -7716,9 +7740,11 @@ function mergeFooterMethod(mergeFooterList, _rowIndex, _columnIndex) {
               return null;
             }
             if (rowspan > 1) {
+              isMergeCell = true;
               attrs.rowspan = rowspan;
             }
             if (colspan > 1) {
+              isMergeCell = true;
               attrs.colspan = colspan;
             }
           }
@@ -7741,8 +7767,10 @@ function mergeFooterMethod(mergeFooterList, _rowIndex, _columnIndex) {
         const isLastColumn = $columnIndex === tableColumn.length - 1;
         const isAutoCellWidth = !column.resizeWidth && (column.minWidth === 'auto' || column.width === 'auto');
         let isVNPreEmptyStatus = false;
-        if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
-          isVNPreEmptyStatus = true;
+        if (!isMergeCell) {
+          if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
+            isVNPreEmptyStatus = true;
+          }
         }
         const tcStyle = {};
         if (hasEllipsis) {
@@ -13428,7 +13456,7 @@ const maxXWidth = 5e6;
       } = treeOpts;
       const childrenField = treeOpts.children || treeOpts.childrenField;
       let treeData = [];
-      let fullData = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.reactive)(datas ? datas.slice(0) : []); // 转为响应式
+      let fullData = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.reactive)(datas ? datas.slice(0) : []); // 转为响应式数据
       if (treeConfig) {
         if (transform) {
           // 树结构自动转换
@@ -18088,7 +18116,11 @@ const maxXWidth = 5e6;
         const treeOpts = computeTreeOpts.value;
         const childrenField = treeOpts.children || treeOpts.childrenField;
         const hasChildField = treeOpts.hasChild || treeOpts.hasChildField;
+        const {
+          lazy
+        } = treeOpts;
         const rowkey = getRowkey($xeTable);
+        const isDeepKey = rowkey.indexOf('.') > -1;
         const fullAllDataRowIdMaps = {
           ...fullAllDataRowIdData
         }; // 存在已删除数据
@@ -18096,26 +18128,9 @@ const maxXWidth = 5e6;
         const treeTempExpandedMaps = {
           ...treeExpandedMaps
         };
-        const handleRow = (row, index, items, path, parentRow, nodes) => {
-          let rowid = getRowid($xeTable, row);
-          const seq = treeConfig && path ? toTreePathSeq(path) : index + 1;
-          const level = nodes ? nodes.length - 1 : 0;
-          if (eqEmptyValue(rowid)) {
-            rowid = getRowUniqueId();
-            external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().set(row, rowkey, rowid);
-          }
-          if (treeConfig && treeOpts.lazy) {
-            const treeExpRest = treeExpandedMaps[rowid];
-            if (row[hasChildField] && external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isUndefined(row[childrenField])) {
-              row[childrenField] = null;
-            }
-            if (treeExpRest) {
-              if (!row[childrenField] || !row[childrenField].length) {
-                delete treeTempExpandedMaps[rowid];
-              }
-            }
-          }
-          let rowRest = fullAllDataRowIdData[rowid];
+        const handleRowId = isDeepKey ? updateDeepRowKey : updateFastRowKey;
+        const handleRowCache = (row, index, items, currIndex, parentRow, rowid, level, seq) => {
+          let rowRest = fullAllDataRowIdMaps[rowid];
           if (!rowRest) {
             rowRest = {
               row,
@@ -18133,6 +18148,8 @@ const maxXWidth = 5e6;
               oTop: 0,
               expandHeight: 0
             };
+            fullDataRowIdMaps[rowid] = rowRest;
+            fullAllDataRowIdMaps[rowid] = rowRest;
           }
           rowRest.treeLoaded = false;
           rowRest.expandLoaded = false;
@@ -18140,16 +18157,31 @@ const maxXWidth = 5e6;
           rowRest.items = items;
           rowRest.parent = parentRow;
           rowRest.level = level;
-          rowRest.index = treeConfig && parentRow ? -1 : index;
-          fullDataRowIdMaps[rowid] = rowRest;
-          fullAllDataRowIdMaps[rowid] = rowRest;
+          rowRest.index = currIndex;
+          rowRest.treeIndex = index;
         };
         if (treeConfig) {
-          external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eachTree(tableFullTreeData, handleRow, {
+          external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eachTree(tableFullTreeData, (row, index, items, path, parentRow, nodes) => {
+            const rowid = handleRowId(row, rowkey);
+            if (treeConfig && lazy) {
+              const treeExpRest = treeTempExpandedMaps[rowid];
+              if (row[hasChildField] && row[childrenField] === undefined) {
+                row[childrenField] = null;
+              }
+              if (treeExpRest) {
+                if (!row[childrenField] || !row[childrenField].length) {
+                  delete treeTempExpandedMaps[rowid];
+                }
+              }
+            }
+            handleRowCache(row, index, items, parentRow ? -1 : index, parentRow, rowid, nodes.length - 1, toTreePathSeq(path));
+          }, {
             children: childrenField
           });
         } else {
-          tableFullData.forEach(handleRow);
+          tableFullData.forEach((row, index, items) => {
+            handleRowCache(row, index, items, index, null, handleRowId(row, rowkey), 0, index + 1);
+          });
         }
         internalData.fullDataRowIdData = fullDataRowIdMaps;
         internalData.fullAllDataRowIdData = fullAllDataRowIdMaps;