@bit-sun/business-component 2.2.16 → 2.2.18

package/src/components/Business/moreTreeTable/index.md

@@ -1,508 +1,448 @@
----
-nav:
-  title: '组件'
-  order: 1
-group:
-  title: 业务组件
-  order: 1
-title: 多表头表格
-order: 1
----
-
-# MoreTreeTable
-
-
-## 纵向表头表格
-
-```tsx
-import { MoreTreeTable } from '../../../index.ts';
-import React, { useState, useRef } from 'react';
-
-export default () => {
-  const colTableRef = useRef(null);
-  const data = {
-    colHead: [
-      {
-        key: 'fixed1',
-        title: '固定列1',
-        fixed: true,
-      },
-      {
-        key: 'fixed2',
-        title: '固定列2',
-        fixed: true,
-      },
-      {
-        key: '1111',
-        title: '测试1',
-        children: [
-          {
-            key: '1111-1',
-            title: '测试1-1',
-            children: [
-              {
-                key: '1111-1-2',
-                title: '测试1-1-2',
-              },
-              {
-                key: '1111-1-3',
-                title: '测试1-1-4',
-              },
-            ],
-          },
-          {
-            key: '1111-2',
-            title: '测试1-2',
-            children: [
-              {
-                key: '1111-2-2',
-                title: '测试1-2-2',
-              },
-              {
-                key: '1111-2-3',
-                title: '测试1-2-4',
-              },
-            ],
-          },
-          {
-            key: '1111-3',
-            title: '测试1-3',
-            children: [
-              {
-                key: '1111-3-2',
-                title: '测试1-3-2',
-              },
-              {
-                key: '1111-3-3',
-                title: '测试1-3-4',
-              },
-            ],
-          },
-          {
-            key: '1111-4',
-            title: '测试1-4',
-          },
-        ],
-      },
-      {
-        key: '2222',
-        title: '测试1',
-        children: [
-          {
-            key: '2222-1',
-            title: '测试1-1',
-            children: [
-              {
-                key: '2222-1-2',
-                title: '测试1-1-2',
-              },
-              {
-                key: '2222-1-3',
-                title: '测试1-1-4',
-              },
-            ],
-          },
-          {
-            key: '2222-2',
-            title: '测试1-2',
-            children: [
-              {
-                key: '2222-2-2',
-                title: '测试1-2-2',
-              },
-              {
-                key: '2222-2-3',
-                title: '测试1-2-4',
-                children: [
-                  {
-                    key: '2222-2-3-1',
-                    title: '测试1-2-2',
-                  },
-                  {
-                    key: '2222-2-3-2',
-                    title: '测试1-2-2',
-                  },
-                ],
-              },
-            ],
-          },
-          {
-            key: '2222-3',
-            title: '测试1-3',
-            children: [
-              {
-                key: '2222-3-2',
-                title: '测试1-3-2',
-              },
-              {
-                key: '2222-3-3',
-                title: '测试1-3-4',
-              },
-            ],
-          },
-          {
-            key: '2222-4',
-            title: '测试1-4',
-          },
-        ],
-      },
-    ],
-    //纵向表头数据
-    tableValue2: [
-      {
-        '1111-1-2': '1',
-        '1111-1-3': '2',
-        '1111-2-2': '3',
-        '1111-2-3': '4',
-        '1111-3-2': '5',
-        '2222-3-3': '6',
-        '2222-4': '7',
-        'fixed1': '标题1',
-        'fixed2': '标题1-1',
-      },
-      {
-        '1111-1-2': '1',
-        '1111-1-3': '2',
-        '1111-2-2': '3',
-        '1111-2-3': '4',
-        '1111-3-2': '5',
-        '2222-3-3': '6',
-        '2222-4': '7',
-        'fixed1': '标题1',
-        'fixed2': '标题1-2',
-      },
-      {
-        '1111-1-2': '1',
-        '1111-1-3': '2',
-        '1111-2-2': '3',
-        '1111-2-3': '4',
-        '1111-3-2': '5',
-        '2222-3-3': '6',
-        '2222-4': '7',
-        'fixed1': '标题1',
-        'fixed2': '标题1-3',
-      },
-      {
-        '1111-1-2': '1',
-        '1111-1-3': '2',
-        '1111-2-2': '3',
-        '1111-2-3': '4',
-        '1111-3-2': '5',
-        '2222-3-3': '6',
-        '2222-4': '7',
-        'fixed1': '标题1',
-        'fixed2': '标题1-4',
-      },
-      {
-        '1111-1-2': '1',
-        '1111-1-3': '2',
-        '1111-2-2': '3',
-        '1111-2-3': '4',
-        '1111-3-2': '5',
-        '2222-3-3': '6',
-        '2222-4': '7',
-        'fixed1': '标题1',
-        'fixed2': '标题1-5',
-      },
-      {
-        'fixed1': '标题2',
-        'fixed2': '标题2-1',
-      },
-      {
-        'fixed1': '标题2',
-        'fixed2': '标题2-2',
-      },
-      {
-        'fixed1': '标题2',
-        'fixed2': '标题2-3',
-      },
-      {
-        'fixed1': '标题2',
-        'fixed2': '标题2-4',
-      },
-      {
-        'fixed1': '标题2',
-        'fixed2': '标题2-5',
-      },
-      {
-        'fixed1': '标题2',
-        'fixed2': '标题2-6',
-      },
-      {
-        'fixed1': '标题2',
-        'fixed2': '标题2-7',
-      },
-      {
-        'fixed1': '标题2',
-        'fixed2': '标题2-8',
-      },
-    ],
-  };
-  return (
-    <MoreTreeTable 
-      height={500}
-      colData={data.colHead}
-      colTableData={data.tableValue2}
-      colHeaderWidth={400}
-      ref={colTableRef}
-    />
-  );
-};
-```
-
-## 多表头表格
-
-```tsx
-import { MoreTreeTable } from '../../../index.ts';
-import React, { useState, useRef } from 'react';
-
-export default () => {
-  const colTableRef = useRef(null);
-  const data = {
-  rowHead: [
-    {
-      key: '1111',
-      title: '测试1',
-      children: [
-        {
-          key: '1111-1',
-          title: '测试1-1',
-          children: [
-            {
-              key: '1111-1-2',
-              title: '测试1-1-2',
-            },
-            {
-              key: '1111-1-3',
-              title: '测试1-1-4',
-            },
-          ],
-        },
-        {
-          key: '1111-2',
-          title: '测试1-2',
-          children: [
-            {
-              id: '1111-2-2',
-              title: '测试1-2-2',
-            },
-            {
-              id: '1111-2-3',
-              title: '测试1-2-4',
-            },
-          ],
-        },
-        {
-          key: '1111-3',
-          title: '测试1-3',
-          children: [
-            {
-              key: '1111-3-2',
-              title: '测试1-3-2',
-            },
-            {
-              key: '1111-3-3',
-              title: '测试1-3-4',
-            },
-          ],
-        },
-        {
-          key: '1111-4',
-          title: '测试1-4',
-        },
-      ],
-    },
-    {
-      key: '2222',
-      title: '测试1',
-      children: [
-        {
-          key: '2222-1',
-          title: '测试1-1',
-          children: [
-            {
-              key: '2222-1-2',
-              title: '测试1-1-2',
-            },
-            {
-              key: '2222-1-3',
-              title: '测试1-1-4',
-            },
-          ],
-        },
-        {
-          key: '2222-2',
-          title: '测试1-2',
-          children: [
-            {
-              key: '2222-2-2',
-              title: '测试1-2-2',
-            },
-            {
-              key: '2222-2-3',
-              title: '测试1-2-4',
-            },
-          ],
-        },
-        {
-          key: '2222-3',
-          title: '测试1-3',
-          children: [
-            {
-              key: '2222-3-2',
-              title: '测试1-3-2',
-            },
-            {
-              key: '2222-3-3',
-              title: '测试1-3-4',
-            },
-          ],
-        },
-        {
-          key: '2222-4',
-          title: '测试1-4',
-        },
-      ],
-    },
-  ],
-  colHead: [
-    {
-      key: '1111',
-      title: '测试1',
-      children: [
-        {
-          key: '1111-1',
-          title: '测试1-1',
-          children: [
-            {
-              key: '1111-1-2',
-              title: '测试1-1-2',
-            },
-            {
-              key: '1111-1-3',
-              title: '测试1-1-4',
-            },
-          ],
-        },
-        {
-          key: '1111-2',
-          title: '测试1-2',
-          children: [
-            {
-              key: '1111-2-2',
-              title: '测试1-2-2',
-            },
-            {
-              key: '1111-2-3',
-              title: '测试1-2-4',
-            },
-          ],
-        },
-        {
-          key: '1111-3',
-          title: '测试1-3',
-          children: [
-            {
-              key: '1111-3-2',
-              title: '测试1-3-2',
-            },
-            {
-              key: '1111-3-3',
-              title: '测试1-3-4',
-            },
-          ],
-        },
-        {
-          key: '1111-4',
-          title: '测试1-4',
-        },
-      ],
-    },
-    {
-      key: '2222',
-      title: '测试1',
-      children: [
-        {
-          key: '2222-1',
-          title: '测试1-1',
-          children: [
-            {
-              key: '2222-1-2',
-              title: '测试1-1-2',
-            },
-            {
-              key: '2222-1-3',
-              title: '测试1-1-4',
-            },
-          ],
-        },
-        {
-          key: '2222-2',
-          title: '测试1-2',
-          children: [
-            {
-              key: '2222-2-2',
-              title: '测试1-2-2',
-            },
-            {
-              key: '2222-2-3',
-              title: '测试1-2-4',
-              children: [
-                {
-                  key: '2222-2-3-1',
-                  title: '测试1-2-2',
-                },
-                {
-                  key: '2222-2-3-2',
-                  title: '测试1-2-2',
-                },
-              ],
-            },
-          ],
-        },
-        {
-          key: '2222-3',
-          title: '测试1-3',
-          children: [
-            {
-              key: '2222-3-2',
-              title: '测试1-3-2',
-            },
-            {
-              key: '2222-3-3',
-              title: '测试1-3-4',
-            },
-          ],
-        },
-        {
-          key: '2222-4',
-          title: '测试1-4',
-        },
-      ],
-    },
-  ],
-  //多项表头的数据
-  tableValue1: {
-    '1111-1-2__1111-1-2': '测试数据1',
-    '1111-1-3__1111-1-3': '测试数据2',
-    '1111-2-2__1111-2-2': '测试数据3',
-    '1111-2-3__1111-2-3': '测试数据4',
-    '1111-3-2__1111-3-2': '测试数据5',
-    '2222-3-3__2222-3-3': '测试数据6',
-    '2222-4__2222-4': '测试数据7',
-  },
-};
-  return (
-    <MoreTreeTable 
-      // width={1000}
-      height={500}
-      colData={data.colHead}
-      rowData={data.rowHead}
-      multiTableData={data.tableValue1}
-      colTableData={data.tableValue2}
-      colHeaderWidth={400}
-      ref={colTableRef}
-    />
-  );
-};
-```
+---
+nav:
+  title: '组件'
+  order: 1
+group:
+  title: 业务组件
+  order: 1
+title: 多表头表格
+order: 1
+---
+
+# MoreTreeTable
+
+
+## 纵向表头表格
+
+```tsx
+import { MoreTreeTable } from '../../../index.ts';
+import React, { useState, useRef } from 'react';
+
+export default () => {
+  const colTableRef = useRef(null);
+
+  let colTableData = [];
+  for (let i = 1; i < 10001; i++) {
+    colTableData.push({
+       '1111-1-2': '1',
+        '1111-1-3': '2',
+        '1111-2-2': '3',
+        '1111-2-3': '4',
+        '1111-3-2': '5',
+        '2222-3-3': '6',
+        '2222-4': '7',
+        'fixed1': '标题1',
+        'fixed2': `标题1-${i}`,
+    })
+  }
+  for (let j = 1; j < 10001; j++) {
+    colTableData.push({
+       '1111-1-2': '1',
+        '1111-1-3': '2',
+        '1111-2-2': '3',
+        '1111-2-3': '4',
+        '1111-3-2': '5',
+        '2222-3-3': '6',
+        '2222-4': '7',
+        'fixed1': '标题2',
+        'fixed2': `标题2-${j}`,
+    })
+  }
+  const data = {
+    colHead: [
+      {
+        key: 'fixed1',
+        title: '固定列1',
+        fixed: true,
+      },
+      {
+        key: 'fixed2',
+        title: '固定列2',
+        fixed: true,
+      },
+      {
+        key: '1111',
+        title: '测试1',
+        children: [
+          {
+            key: '1111-1',
+            title: '测试1-1',
+            children: [
+              {
+                key: '1111-1-2',
+                title: '测试1-1-2',
+              },
+              {
+                key: '1111-1-3',
+                title: '测试1-1-4',
+              },
+            ],
+          },
+          {
+            key: '1111-2',
+            title: '测试1-2',
+            children: [
+              {
+                key: '1111-2-2',
+                title: '测试1-2-2',
+              },
+              {
+                key: '1111-2-3',
+                title: '测试1-2-4',
+              },
+            ],
+          },
+          {
+            key: '1111-3',
+            title: '测试1-3',
+            children: [
+              {
+                key: '1111-3-2',
+                title: '测试1-3-2',
+              },
+              {
+                key: '1111-3-3',
+                title: '测试1-3-4',
+              },
+            ],
+          },
+          {
+            key: '1111-4',
+            title: '测试1-4',
+          },
+        ],
+      },
+      {
+        key: '2222',
+        title: '测试1',
+        children: [
+          {
+            key: '2222-1',
+            title: '测试1-1',
+            children: [
+              {
+                key: '2222-1-2',
+                title: '测试1-1-2',
+              },
+              {
+                key: '2222-1-3',
+                title: '测试1-1-4',
+              },
+            ],
+          },
+          {
+            key: '2222-2',
+            title: '测试1-2',
+            children: [
+              {
+                key: '2222-2-2',
+                title: '测试1-2-2',
+              },
+              {
+                key: '2222-2-3',
+                title: '测试1-2-4',
+                children: [
+                  {
+                    key: '2222-2-3-1',
+                    title: '测试1-2-2',
+                  },
+                  {
+                    key: '2222-2-3-2',
+                    title: '测试1-2-2',
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            key: '2222-3',
+            title: '测试1-3',
+            children: [
+              {
+                key: '2222-3-2',
+                title: '测试1-3-2',
+              },
+              {
+                key: '2222-3-3',
+                title: '测试1-3-4',
+              },
+            ],
+          },
+          {
+            key: '2222-4',
+            title: '测试1-4',
+          },
+        ],
+      },
+    ],
+    //纵向表头数据
+    tableValue2: colTableData,
+  };
+  return (
+    <MoreTreeTable 
+      height={500}
+      colData={data.colHead}
+      colTableData={data.tableValue2}
+      colHeaderWidth={400}
+      ref={colTableRef}
+    />
+  );
+};
+```
+
+## 多表头表格
+
+```tsx
+import { MoreTreeTable } from '../../../index.ts';
+import React, { useState, useRef } from 'react';
+
+export default () => {
+  const colTableRef = useRef(null);
+  const data = {
+  rowHead: [
+    {
+      key: '1111',
+      title: '测试1',
+      children: [
+        {
+          key: '1111-1',
+          title: '测试1-1',
+          children: [
+            {
+              key: '1111-1-2',
+              title: '测试1-1-2',
+            },
+            {
+              key: '1111-1-3',
+              title: '测试1-1-4',
+            },
+          ],
+        },
+        {
+          key: '1111-2',
+          title: '测试1-2',
+          children: [
+            {
+              id: '1111-2-2',
+              title: '测试1-2-2',
+            },
+            {
+              id: '1111-2-3',
+              title: '测试1-2-4',
+            },
+          ],
+        },
+        {
+          key: '1111-3',
+          title: '测试1-3',
+          children: [
+            {
+              key: '1111-3-2',
+              title: '测试1-3-2',
+            },
+            {
+              key: '1111-3-3',
+              title: '测试1-3-4',
+            },
+          ],
+        },
+        {
+          key: '1111-4',
+          title: '测试1-4',
+        },
+      ],
+    },
+    {
+      key: '2222',
+      title: '测试1',
+      children: [
+        {
+          key: '2222-1',
+          title: '测试1-1',
+          children: [
+            {
+              key: '2222-1-2',
+              title: '测试1-1-2',
+            },
+            {
+              key: '2222-1-3',
+              title: '测试1-1-4',
+            },
+          ],
+        },
+        {
+          key: '2222-2',
+          title: '测试1-2',
+          children: [
+            {
+              key: '2222-2-2',
+              title: '测试1-2-2',
+            },
+            {
+              key: '2222-2-3',
+              title: '测试1-2-4',
+            },
+          ],
+        },
+        {
+          key: '2222-3',
+          title: '测试1-3',
+          children: [
+            {
+              key: '2222-3-2',
+              title: '测试1-3-2',
+            },
+            {
+              key: '2222-3-3',
+              title: '测试1-3-4',
+            },
+          ],
+        },
+        {
+          key: '2222-4',
+          title: '测试1-4',
+        },
+      ],
+    },
+  ],
+  colHead: [
+    {
+      key: '1111',
+      title: '测试1',
+      children: [
+        {
+          key: '1111-1',
+          title: '测试1-1',
+          children: [
+            {
+              key: '1111-1-2',
+              title: '测试1-1-2',
+            },
+            {
+              key: '1111-1-3',
+              title: '测试1-1-4',
+            },
+          ],
+        },
+        {
+          key: '1111-2',
+          title: '测试1-2',
+          children: [
+            {
+              key: '1111-2-2',
+              title: '测试1-2-2',
+            },
+            {
+              key: '1111-2-3',
+              title: '测试1-2-4',
+            },
+          ],
+        },
+        {
+          key: '1111-3',
+          title: '测试1-3',
+          children: [
+            {
+              key: '1111-3-2',
+              title: '测试1-3-2',
+            },
+            {
+              key: '1111-3-3',
+              title: '测试1-3-4',
+            },
+          ],
+        },
+        {
+          key: '1111-4',
+          title: '测试1-4',
+        },
+      ],
+    },
+    {
+      key: '2222',
+      title: '测试1',
+      children: [
+        {
+          key: '2222-1',
+          title: '测试1-1',
+          children: [
+            {
+              key: '2222-1-2',
+              title: '测试1-1-2',
+            },
+            {
+              key: '2222-1-3',
+              title: '测试1-1-4',
+            },
+          ],
+        },
+        {
+          key: '2222-2',
+          title: '测试1-2',
+          children: [
+            {
+              key: '2222-2-2',
+              title: '测试1-2-2',
+            },
+            {
+              key: '2222-2-3',
+              title: '测试1-2-4',
+              children: [
+                {
+                  key: '2222-2-3-1',
+                  title: '测试1-2-2',
+                },
+                {
+                  key: '2222-2-3-2',
+                  title: '测试1-2-2',
+                },
+              ],
+            },
+          ],
+        },
+        {
+          key: '2222-3',
+          title: '测试1-3',
+          children: [
+            {
+              key: '2222-3-2',
+              title: '测试1-3-2',
+            },
+            {
+              key: '2222-3-3',
+              title: '测试1-3-4',
+            },
+          ],
+        },
+        {
+          key: '2222-4',
+          title: '测试1-4',
+        },
+      ],
+    },
+  ],
+  //多项表头的数据
+  tableValue1: {
+    '1111-1-2__1111-1-2': '测试数据1',
+    '1111-1-3__1111-1-3': '测试数据2',
+    '1111-2-2__1111-2-2': '测试数据3',
+    '1111-2-3__1111-2-3': '测试数据4',
+    '1111-3-2__1111-3-2': '测试数据5',
+    '2222-3-3__2222-3-3': '测试数据6',
+    '2222-4__2222-4': '测试数据7',
+  },
+};
+  return (
+    <MoreTreeTable 
+      // width={1000}
+      height={500}
+      colData={data.colHead}
+      rowData={data.rowHead}
+      multiTableData={data.tableValue1}
+      colTableData={data.tableValue2}
+      colHeaderWidth={400}
+      ref={colTableRef}
+    />
+  );
+};
+```