Merge pull request #1983 from VisActor/fix/merge-cell-pref

fix: fix merge cell update performance problem #1972

common/changes/@visactor/vtable/fix-merge-cell-pref_2024-06-25-03-42.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vtable",
+      "comment": "fix: fix merge cell update performance problem #1972",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vtable"
+}

docs/assets/demo/en/export/table-export-format.md

@@ -24,180 +24,48 @@ By default, when exporting, the text or image inside the exported cell will be o
 // } from "@visactor/vtable-export";
 // When umd is introduced, the export tool will be mounted to VTable.export
 
-const data = [
+const records = [
+  { productName: 'aaaa', price: 20, check: { text: 'unchecked', checked: false, disable: false } },
+  { productName: 'bbbb', price: 18, check: { text: 'checked', checked: true, disable: false } },
+  { productName: 'cccc', price: 16, check: { text: 'disable', checked: true, disable: true } },
+  { productName: 'cccc', price: 14, check: { text: 'disable', checked: false, disable: true } },
+  { productName: 'eeee', price: 12, check: { text: 'checked', checked: false, disable: false } },
+  { productName: 'ffff', price: 10, check: { text: 'checked', checked: false, disable: false } },
+  { productName: 'gggg', price: 10, check: { text: 'checked', checked: false, disable: false } }
+];
+
+const columns = [
   {
-    类别: '办公用品',
-    销售额: '129.696',
-    数量: '2',
-    利润: '-60.704',
-    children: [
-      {
-        类别: '信封', // 对应原子类别
-        销售额: '125.44',
-        数量: '2',
-        利润: '42.56',
-        children: [
-          {
-            类别: '黄色信封',
-            销售额: '125.44',
-            数量: '2',
-            利润: '42.56'
-          },
-          {
-            类别: '白色信封',
-            销售额: '1375.92',
-            数量: '3',
-            利润: '550.2'
-          }
-        ]
-      },
-      {
-        类别: '器具', // 对应原子类别
-        销售额: '1375.92',
-        数量: '3',
-        利润: '550.2',
-        children: [
-          {
-            类别: '订书机',
-            销售额: '125.44',
-            数量: '2',
-            利润: '42.56'
-          },
-          {
-            类别: '计算器',
-            销售额: '1375.92',
-            数量: '3',
-            利润: '550.2'
-          }
-        ]
-      }
-    ]
+    field: 'isCheck',
+    title: '',
+    width: 60,
+    headerType: 'checkbox',
+    cellType: 'checkbox'
   },
   {
-    类别: '技术',
-    销售额: '229.696',
-    数量: '20',
-    利润: '90.704',
-    children: [
-      {
-        类别: '设备', // 对应原子类别
-        销售额: '225.44',
-        数量: '5',
-        利润: '462.56'
-      },
-      {
-        类别: '配件', // 对应原子类别
-        销售额: '375.92',
-        数量: '8',
-        利润: '550.2'
-      },
-      {
-        类别: '复印机', // 对应原子类别
-        销售额: '425.44',
-        数量: '7',
-        利润: '342.56'
-      },
-      {
-        类别: '电话', // 对应原子类别
-        销售额: '175.92',
-        数量: '6',
-        利润: '750.2'
-      }
-    ]
+    field: 'productName',
+    title: 'productName',
+    width: 120
   },
   {
-    类别: '家具',
-    销售额: '129.696',
-    数量: '2',
-    利润: '-60.704',
-    children: [
-      {
-        类别: '桌子', // 对应原子类别
-        销售额: '125.44',
-        数量: '2',
-        利润: '42.56',
-        children: [
-          {
-            类别: '黄色桌子',
-            销售额: '125.44',
-            数量: '2',
-            利润: '42.56'
-          },
-          {
-            类别: '白色桌子',
-            销售额: '1375.92',
-            数量: '3',
-            利润: '550.2'
-          }
-        ]
-      },
-      {
-        类别: '椅子', // 对应原子类别
-        销售额: '1375.92',
-        数量: '3',
-        利润: '550.2',
-        children: [
-          {
-            类别: '老板椅',
-            销售额: '125.44',
-            数量: '2',
-            利润: '42.56'
-          },
-          {
-            类别: '沙发椅',
-            销售额: '1375.92',
-            数量: '3',
-            利润: '550.2'
-          }
-        ]
-      }
-    ]
+    field: 'price',
+    title: 'checkbox',
+    width: 120,
+    cellType: 'checkbox',
+    disable: true,
+    checked: true
   },
   {
-    类别: '生活家电（懒加载）',
-    销售额: '229.696',
-    数量: '20',
-    利润: '90.704'
+    field: 'check',
+    title: 'checkbox',
+    width: 120,
+    cellType: 'checkbox'
+    // disable: true
   }
 ];
 const option = {
-  container: document.getElementById(CONTAINER_ID),
-  columns: [
-    {
-      field: '类别',
-      tree: true,
-      title: '类别',
-      width: 'auto',
-      sort: true
-    },
-    {
-      field: '销售额',
-      title: '销售额',
-      width: 'auto',
-      sort: true
-      // tree: true,
-    },
-    {
-      field: '利润',
-      title: '利润',
-      width: 'auto',
-      sort: true
-    }
-  ],
-  showPin: true, //显示VTable内置冻结列图标
-  widthMode: 'standard',
-  allowFrozenColCount: 2,
-  records: data,
-
-  hierarchyIndent: 20,
-  hierarchyExpandLevel: 2,
-  hierarchyTextStartAlignment: true,
-  sortState: {
-    field: '销售额',
-    order: 'asc'
-  },
-  theme: VTable.themes.BRIGHT,
-  defaultRowHeight: 32
+  records,
+  columns
 };
 const tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option);
 window.tableInstance = tableInstance;
@@ -233,7 +101,13 @@ function bindExport() {
 
   exportExcelButton.addEventListener('click', async () => {
     if (window.tableInstance) {
-      downloadExcel(await exportVTableToExcel(window.tableInstance), 'export');
+      downloadExcel(await exportVTableToExcel(window.tableInstance, {
+        formatExportOutput: ({ cellType, cellValue, table, col, row }) => {
+          if (cellType === 'checkbox') {
+            return table.getCellCheckboxState(col, row) ? 'true' : 'false';
+          }
+        }
+      }), 'export');
     }
   });
 }