fix: fix group cell in vtable-export #2487

common/changes/@visactor/vtable/fix-export-group_2024-09-25-03-57.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vtable",
+      "comment": "fix: fix group cell in vtable-export #2487",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vtable"
+}

packages/vtable-export/demo/list/list-group.ts

@@ -0,0 +1,110 @@
+import * as VTable from '@visactor/vtable';
+const CONTAINER_ID = 'vTable';
+const generatePersons = count => {
+  return Array.from(new Array(count)).map((_, i) => ({
+    id: i + 1,
+    email1: `${i + 1}@xxx.com`,
+    name: `小明${i + 1}`,
+    lastName: '王',
+    date1: '2022年9月1日',
+    tel: '000-0000-0000',
+    sex: i % 2 === 0 ? 'boy' : 'girl',
+    work: i % 2 === 0 ? 'back-end engineer' : 'front-end engineer',
+    city: 'beijing'
+  }));
+};
+
+export function createTable() {
+  const records = generatePersons(100);
+  const columns: VTable.ColumnsDefine = [
+    {
+      field: '',
+      title: '行号',
+      width: 80,
+      fieldFormat(data, col, row, table) {
+        return row - 1;
+      }
+    },
+    {
+      field: 'id',
+      title: 'ID',
+      width: '1%',
+      minWidth: 200,
+      sort: true
+    },
+    {
+      field: 'email1',
+      title: 'email',
+      width: 200,
+      sort: true
+    },
+    {
+      title: 'full name',
+      columns: [
+        {
+          field: 'name',
+          title: 'First Name',
+          width: 200
+        },
+        {
+          field: 'name',
+          title: 'Last Name',
+          width: 200
+        }
+      ]
+    },
+    {
+      field: 'date1',
+      title: 'birthday',
+      width: 200
+    },
+    {
+      field: 'sex',
+      title: 'sex',
+      width: 100
+    },
+    {
+      field: 'tel',
+      title: 'telephone',
+      width: 150
+    },
+    {
+      field: 'work',
+      title: 'job',
+      width: 200
+    },
+    {
+      field: 'city',
+      title: 'city',
+      width: 150
+    }
+  ];
+  const option = {
+    container: document.getElementById(CONTAINER_ID),
+    records,
+    columns,
+    tooltip: {
+      isShowOverflowTextTooltip: true
+    },
+    groupBy: 'sex'
+    // frozenColCount: 1,
+    // bottomFrozenRowCount: 2,
+    // rightFrozenColCount: 2,
+    // overscrollBehavior: 'none'
+    // autoWrapText: true,
+    // heightMode: 'autoHeight',
+    // widthMode: 'adaptive'
+  };
+  const tableInstance = new VTable.ListTable(option);
+  window.tableInstance = tableInstance;
+  // tableInstance.on('sort_click', args => {
+  //   tableInstance.updateSortState(
+  //     {
+  //       field: args.field,
+  //       order: Date.now() % 3 === 0 ? 'desc' : Date.now() % 3 === 1 ? 'asc' : 'normal'
+  //     },
+  //     false
+  //   );
+  //   return false; //return false代表不执行内部排序逻辑
+  // });
+}

packages/vtable-export/demo/menu.ts

@@ -45,6 +45,10 @@ export const menus = [
       {
         path: 'list',
         name: 'list-async'
+      },
+      {
+        path: 'list',
+        name: 'list-group'
       }
     ]
   },

packages/vtable-export/src/csv/index.ts

@@ -45,9 +45,11 @@ function getCopyCellValue(
   tableInstance: IVTable,
   option?: ExportVTableToCsvOptions
 ): string | Promise<string> | void {
+  const rawRecord = tableInstance.getCellRawRecord(col, row);
+  const cellValue = (rawRecord && rawRecord.vtableMergeName) ?? tableInstance.getCellValue(col, row);
+
   if (option?.formatExportOutput) {
     const cellType = tableInstance.getCellType(col, row);
-    const cellValue = tableInstance.getCellValue(col, row);
     const cellInfo = { cellType, cellValue, table: tableInstance, col, row };
     const formattedValue = option.formatExportOutput(cellInfo);
     if (formattedValue !== undefined) {
@@ -65,7 +67,7 @@ function getCopyCellValue(
     return '';
   }
 
-  let value = tableInstance.getCellValue(col, row);
+  let value = cellValue;
   if (option?.escape) {
     value = escapeForCSV(value);
   } else if (typeof value === 'string') {

packages/vtable-export/src/excel/index.ts

@@ -111,7 +111,8 @@ async function addCell(
 ) {
   const { layoutMap } = tableInstance.internalProps;
   const cellType = tableInstance.getCellType(col, row);
-  let cellValue = tableInstance.getCellValue(col, row);
+  const rawRecord = tableInstance.getCellRawRecord(col, row);
+  let cellValue = (rawRecord && rawRecord.vtableMergeName) ?? tableInstance.getCellValue(col, row);
   if (isPromise(cellValue)) {
     cellValue = await cellValue;
   }

packages/vtable/src/scenegraph/group-creater/cell-helper.ts

@@ -469,7 +469,9 @@ export function updateCell(col: number, row: number, table: BaseTableAPI, addNew
   }
   let isVtableMerge = false;
   if (table.internalProps.enableTreeNodeMerge && isMerge) {
-    const { vtableMergeName, vtableMerge } = table.getCellRawRecord(range.start.col, range.start.row);
+    const rawRecord = table.getCellRawRecord(range.start.col, range.start.row);
+    const { vtableMergeName, vtableMerge } = rawRecord ?? {};
+
     isVtableMerge = vtableMerge;
     if (vtableMerge) {
       mayHaveIcon = true;

packages/vtable/src/scenegraph/group-creater/column-helper.ts

@@ -153,7 +153,9 @@ export function createComplexColumn(
     }
     let isVtableMerge = false;
     if (table.internalProps.enableTreeNodeMerge && isMerge) {
-      const { vtableMergeName, vtableMerge } = table.getCellRawRecord(range.start.col, range.start.row);
+      const rawRecord = table.getCellRawRecord(range.start.col, range.start.row);
+      const { vtableMergeName, vtableMerge } = rawRecord ?? {};
+
       isVtableMerge = vtableMerge;
       if (vtableMerge) {
         mayHaveIcon = true;