ztxkui 4.2.18-9 → 4.2.18-91

package/dist/TableDemo/BasicTable.js

@@ -1,82 +1,143 @@
+import i18next from 'ztxkutils/dist/i18next';
 /**
  * @author 陈亚雄
  * @description 基础表格，充当列表
  */
-import React from 'react';
+import React, { useState } from 'react';
 // redux
 // ztxkui公共组件
 import { Table } from '../index';
-// 路由配置
-// store
-// 自定义组件
-// 其他文件
-import { dataSource } from './data';
+var dataObj = {
+    1: [
+        { id: 1, test1: '1', test2: '2', test3: '3', test4: '4' },
+        { id: 2, test1: '11', test2: '22', test3: '33', test4: '44' },
+        { id: 3, test1: '111', test2: '222', test3: '333', test4: '444' },
+    ],
+    2: [
+        { id: 3, test1: '2-1', test2: '2-2', test3: '2-3', test4: '2-4' },
+        { id: 2, test1: '2-11', test2: '2-22', test3: '2-33', test4: '2-44' },
+        { id: 4, test1: '2-111', test2: '2-222', test3: '2-333', test4: '2-444' },
+    ],
+    3: [
+        { id: 3, test1: '3-1', test2: '3-2', test3: '3-3', test4: '3-4' },
+        { id: 2, test1: '3-11', test2: '3-22', test3: '3-33', test4: '3-44' },
+        { id: 4, test1: '3-111', test2: '3-222', test3: '3-333', test4: '3-444' },
+    ],
+    4: [
+        { id: 1, test1: '4-1', test2: '4-2', test3: '4-3', test4: '4-4' },
+        { id: 2, test1: '4-11', test2: '4-22', test3: '4-33', test4: '4-44' },
+        { id: 3, test1: '4-111', test2: '4-222', test3: '4-333', test4: '4-444' },
+    ],
+    5: [
+        { id: 1, test1: '5-1', test2: '5-2', test3: '5-3', test4: '5-4' },
+        { id: 2, test1: '5-11', test2: '5-22', test3: '5-33', test4: '5-44' },
+        { id: '3', test1: '5-111', test2: '5-222', test3: '5-333', test4: '5-444' },
+        {
+            id: '3',
+            test1: '5-1111',
+            test2: '5-2222',
+            test3: '5-3333',
+            test4: '5-4444',
+        },
+        {
+            id: '3',
+            test1: '5-11111',
+            test2: '5-22222',
+            test3: '5-33333',
+            test4: '5-44444',
+        },
+    ],
+    6: [
+        { id: 11, test1: '6-1', test2: '6-2', test3: '6-3', test4: '6-4' },
+        { id: 22, test1: '6-11', test2: '6-22', test3: '6-33', test4: '6-44' },
+        {
+            id: '33',
+            test1: '6-111',
+            test2: '6-222',
+            test3: '6-333',
+            test4: '6-444',
+        },
+        {
+            id: '36',
+            test1: '6-1111',
+            test2: '6-2222',
+            test3: '6-3333',
+            test4: '6-4444',
+        },
+        {
+            id: '34',
+            test1: '6-11111',
+            test2: '6-22222',
+            test3: '6-33333',
+            test4: '6-44444',
+        },
+    ],
+    7: [],
+    8: [],
+    9: [],
+};
+var i = 0;
 var BasicTable = function (_a) {
     var dynamicKey = _a.dynamicKey;
+    var _b = useState([]), data = _b[0], setData = _b[1];
     var columns = [
         {
-            title: '序号',
-            width: 62,
-            fixed: 'left',
-            key: 'index',
-            render: function (_text, _record, index) { return "" + (index + 1); },
-        },
-        {
-            title: '测试1',
+            title: i18next.t('测试1'),
             width: 100,
             dataIndex: 'test1',
             key: 'test1',
+            fixed: true,
         },
         {
-            title: '测试2',
+            title: i18next.t('测试2'),
             width: 100,
             dataIndex: 'test2',
             key: 'test2',
         },
         {
-            title: '测试3',
+            title: i18next.t('测试3'),
             width: 100,
             dataIndex: 'test3',
             key: 'test3',
         },
         {
-            title: '测试4',
+            title: i18next.t('测试4'),
             width: 100,
             dataIndex: 'test4',
             key: 'test4',
         },
         {
-            title: '测试5',
+            title: i18next.t('测试5'),
             width: 100,
             dataIndex: 'test5',
             key: 'test5',
         },
         {
-            title: '测试6',
+            title: i18next.t('测试6'),
             width: 100,
             dataIndex: 'test6',
             key: 'test6',
         },
         {
-            title: '测试7',
+            title: i18next.t('测试7'),
             width: 100,
             dataIndex: 'test7',
             key: 'test7',
         },
         {
-            title: '测试8',
+            title: i18next.t('测试8'),
             width: 100,
             dataIndex: 'test8',
             key: 'test8',
         },
         {
-            title: '测试9',
+            title: i18next.t('测试9'),
             width: 100,
             dataIndex: 'test9',
             key: 'test9',
         },
         {
-            title: '测试10',
+            title: i18next.t('测试10'),
             width: 100,
             dataIndex: 'test10',
             key: 'test10',
@@ -84,13 +145,26 @@ var BasicTable = function (_a) {
     ];
     return (React.createElement("div", null,
         React.createElement("div", null,
-            "\u57FA\u7840\u5C55\u793A\u8868\u683C\uFF1B",
+            i18next.t('基础展示表格；'),
             React.createElement("br", null),
-            React.createElement("b", null, "\u52A8\u6001\u5217\u914D\u7F6E\uFF1B"),
-            "\u5982\u679C\u9700\u8981\u7F13\u5B58\u4F4F\u52A8\u6001\u5217\u914D\u7F6E\uFF0C\u9700\u8981\u4F20\u5165showColumnDynamicKey\uFF1B \u8868\u683C\u5185\u90E8\u8FDB\u884C\u4E86\u4F18\u5316\uFF0C\u6570\u636E\u5C06\u5B58\u50A8\u5728\u672C\u5730\u7F13\u5B58\u4E2D\uFF0C\u53EF\u4EE5\u4E0D\u7528\u901A\u8FC7\u5916\u754C\u4F20\u5165\u914D\u7F6E",
+            React.createElement("b", null, i18next.t('动态列配置；')),
+            i18next.t('如果需要缓存住动态列配置，需要传入showColumnDynamicKey； 表格内部进行了优化，数据将存储在本地缓存中，可以不用通过外界传入配置'),
             React.createElement("br", null),
-            React.createElement("b", null, "\u5217\u4F38\u7F29\uFF1B"),
-            "isResizableColumn\u5C5E\u6027\u9ED8\u8BA4\u4E3Atrue\uFF0C\u5982\u679C\u4E0D\u9700\u8981\u5217\u4F38\u7F29\u53EF\u4EE5\u4F20\u5165false"),
-        React.createElement(Table, { dataSource: dataSource, columns: columns, rowKey: "id", showColumnDynamic: true, showColumnDynamicKey: dynamicKey || 'symbol-id-1' })));
+            React.createElement("b", null, i18next.t('列伸缩；')),
+            i18next.t('isResizableColumn属性默认为true，如果不需要列伸缩可以传入false')),
+        React.createElement("button", { onClick: function () {
+                i++;
+                setData(dataObj[i]);
+                console.log(dataObj[i]);
+            } },
+            i18next.t('切换数据'),
+            i),
+        React.createElement("button", { onClick: function () {
+                i--;
+                setData(dataObj[i]);
+            } },
+            i18next.t('--切换数据'),
+            i),
+        React.createElement(Table, { dataSource: data, columns: columns, rowKey: "id", scroll: { x: 400, y: 300 }, isOpenVirtualScrollBar: true })));
 };
 export default BasicTable;

package/dist/TableDemo/EditableTable.js

@@ -50,6 +50,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from) {
         to[j] = from[i];
     return to;
 };
+import i18next from 'ztxkutils/dist/i18next';
 /**
  * @author 陈亚雄
  * @description 可编辑表格
@@ -146,22 +147,75 @@ export function divide(num1, num2) {
         return 0;
     }
 }
+var dataObj = {
+    1: [
+        { id: 1, test1: '1', test2: '2', test3: '3', test4: '4' },
+        { id: 2, test1: '11', test2: '22', test3: '33', test4: '44' },
+        { id: 3, test1: '111', test2: '222', test3: '333', test4: '444' },
+    ],
+    2: [
+        { id: 3, test1: '2-1', test2: '2-2', test3: '2-3', test4: '2-4' },
+        { id: 2, test1: '2-11', test2: '2-22', test3: '2-33', test4: '2-44' },
+        { id: 4, test1: '2-111', test2: '2-222', test3: '2-333', test4: '2-444' },
+    ],
+    3: [
+        { id: 3, test1: '3-1', test2: '3-2', test3: '3-3', test4: '3-4' },
+        { id: 2, test1: '3-11', test2: '3-22', test3: '3-33', test4: '3-44' },
+        { id: 4, test1: '3-111', test2: '3-222', test3: '3-333', test4: '3-444' },
+    ],
+    4: [
+        { id: 1, test1: '4-1', test2: '4-2', test3: '4-3', test4: '4-4' },
+        { id: 2, test1: '4-11', test2: '4-22', test3: '4-33', test4: '4-44' },
+        { id: 3, test1: '4-111', test2: '4-222', test3: '4-333', test4: '4-444' },
+    ],
+    5: [
+        { id: 1, test1: '5-1', test2: '5-2', test3: '5-3', test4: '5-4' },
+        { id: 2, test1: '5-11', test2: '5-22', test3: '5-33', test4: '5-44' },
+        { id: '3', test1: '5-111', test2: '5-222', test3: '5-333', test4: '5-444' },
+        {
+            id: '3',
+            test1: '5-1111',
+            test2: '5-2222',
+            test3: '5-3333',
+            test4: '5-4444',
+        },
+        {
+            id: '3',
+            test1: '5-11111',
+            test2: '5-22222',
+            test3: '5-33333',
+            test4: '5-44444',
+        },
+    ],
+    6: [],
+    7: [],
+    8: [],
+    9: [],
+};
+var i = 0;
 var EditableTable = function () {
-    var _a = useState(dataSource), records = _a[0], setRecords = _a[1];
+    var _a = useState(), records = _a[0], setRecords = _a[1];
+    var _b = useState([]), data = _b[0], setData = _b[1];
+    useEffect(function () {
+        setTimeout(function () {
+            setRecords(dataSource);
+        }, 1000);
+    }, []);
     var recordsRef = useRef([]);
     // 初始化渲染，针对配置了editable、editableConfig的列配置
-    var _b = useState(false), firstRender = _b[0], setFirstRender = _b[1];
+    var _c = useState(false), firstRender = _c[0], setFirstRender = _c[1];
     // 新增删除行改变
-    var _c = useState(false), lengthChange = _c[0], setLengthChange = _c[1];
+    var _d = useState(false), lengthChange = _d[0], setLengthChange = _d[1];
     // 表格行拖拽改变
-    var _d = useState(false), moveChange = _d[0], setMoveChange = _d[1];
+    var _e = useState(false), moveChange = _e[0], setMoveChange = _e[1];
     // 表格
     var tableHandleRef = useRef({});
+    var _f = useState([]), expandedRowKeys = _f[0], setExpandedRowKeys = _f[1];
     // 表格配置
-    var _e = useState({
+    var _g = useState({
         test1: { isChangeable: 1, isDisplay: 1, isRequired: 1 },
         test2: { isChangeable: 1, isDisplay: 1, isRequired: 1 },
-    }), tableConfig = _e[0], setTableConfig = _e[1];
+    }), tableConfig = _g[0], setTableConfig = _g[1];
     useEffect(function () {
         setTimeout(function () {
             setTableConfig({
@@ -174,18 +228,22 @@ var EditableTable = function () {
     }, []);
     var columns = [
         {
-            title: '序号',
+            title: i18next.t('序号'),
             width: 62,
             fixed: 'left',
             key: 'index',
             render: function (_text, _record, index) { return "" + (index + 1); },
         },
         {
-            title: '测试1',
-            width: 100,
+            title: i18next.t('测试1'),
+            width: 400,
             dataIndex: 'test1',
             key: 'test1',
             editable: true,
+            editableConfig: {
+                type: 'textArea',
+                maxLength: 100,
+            },
             showCopy: true,
             validate: {},
             shouldCellUpdate: function (record, preRecord) {
@@ -205,14 +263,14 @@ var EditableTable = function () {
             },
         },
         {
-            title: '测试111',
-            width: 100,
+            title: i18next.t('测试111'),
+            width: 400,
             dataIndex: 'test111',
             key: 'test111',
             editable: true,
             editableConfig: {
                 type: 'inputNumber',
-                placeholder: '输入',
+                placeholder: i18next.t('输入'),
                 min: 0,
                 precision: 2,
                 formatterType: 'currency',
@@ -235,14 +293,14 @@ var EditableTable = function () {
             },
         },
         {
-            title: '测试2',
+            title: i18next.t('测试2'),
             width: 150,
             dataIndex: 'test2',
             key: 'test2',
             editable: true,
             editableConfig: {
                 type: 'inputNumber',
-                placeholder: '输入',
+                placeholder: i18next.t('输入'),
                 min: 0,
                 precision: 2,
                 formatterType: 'currency',
@@ -256,7 +314,7 @@ var EditableTable = function () {
                         return Promise.reject({
                             errorFields: [
                                 {
-                                    errors: "\u6D4B\u8BD5-\u660E\u7EC6\u8868 \u7B2C" + index + "\u884C \u6D4B\u8BD52 \u4E0D\u80FD\u5C0F\u4E8E102\uFF01",
+                                    errors: i18next.t('测试-明细表 第{{index}}行 测试2 不能小于102！', { index: index }),
                                 },
                             ],
                         });
@@ -281,7 +339,7 @@ var EditableTable = function () {
             },
         },
         {
-            title: "\u91D1\u989D(\u542B\u7A0E)",
+            title: i18next.t('金额(含税)', {}),
             width: 130,
             dataIndex: 'test2222',
             key: 'test2222',
@@ -308,7 +366,7 @@ var EditableTable = function () {
             },
         },
         {
-            title: '测试3',
+            title: i18next.t('测试3'),
             width: 100,
             dataIndex: 'test3',
             key: 'test3',
@@ -337,62 +395,62 @@ var EditableTable = function () {
                     } }));
             },
         },
-        // {
-        //   title: '测试4',
-        //   width: 100,
-        //   dataIndex: 'test4',
-        //   key: 'test4',
-        // },
-        // {
-        //   title: '测试5',
-        //   // width: 100,
-        //   // dataIndex: 'test5',
-        //   // key: 'test5',
-        //   children: [
-        //     {
-        //       title: '测试5-001',
-        //       width: 100,
-        //       dataIndex: 'test5-001',
-        //       key: 'test5-001',
-        //     },
-        //     {
-        //       title: '测试5-002',
-        //       width: 100,
-        //       dataIndex: 'test5-002',
-        //       key: 'test5-002',
-        //     },
-        //   ],
-        // },
-        // {
-        //   title: '测试6',
-        //   width: 100,
-        //   dataIndex: 'test6',
-        //   key: 'test6',
-        // },
-        // {
-        //   title: '测试7',
-        //   width: 100,
-        //   dataIndex: 'test7',
-        //   key: 'test7',
-        // },
-        // {
-        //   title: '测试8',
-        //   width: 100,
-        //   dataIndex: 'test8',
-        //   key: 'test8',
-        // },
-        // {
-        //   title: '测试9',
-        //   width: 100,
-        //   dataIndex: 'test9',
-        //   key: 'test9',
-        // },
-        // {
-        //   title: '测试10',
-        //   width: 100,
-        //   dataIndex: 'test10',
-        //   key: 'test10',
-        // },
+        {
+            title: i18next.t('测试4'),
+            width: 100,
+            dataIndex: 'test4',
+            key: 'test4',
+        },
+        {
+            title: i18next.t('测试5'),
+            // width: 100,
+            // dataIndex: 'test5',
+            // key: 'test5',
+            children: [
+                {
+                    title: i18next.t('测试5-001'),
+                    width: 100,
+                    dataIndex: 'test5-001',
+                    key: 'test5-001',
+                },
+                {
+                    title: i18next.t('测试5-002'),
+                    width: 100,
+                    dataIndex: 'test5-002',
+                    key: 'test5-002',
+                },
+            ],
+        },
+        {
+            title: i18next.t('测试6'),
+            width: 100,
+            dataIndex: 'test6',
+            key: 'test6',
+        },
+        {
+            title: i18next.t('测试7'),
+            width: 100,
+            dataIndex: 'test7',
+            key: 'test7',
+        },
+        {
+            title: i18next.t('测试8'),
+            width: 100,
+            dataIndex: 'test8',
+            key: 'test8',
+        },
+        {
+            title: i18next.t('测试9'),
+            width: 100,
+            dataIndex: 'test9',
+            key: 'test9',
+        },
+        {
+            title: i18next.t('测试10'),
+            width: 100,
+            dataIndex: 'test10',
+            key: 'test10',
+        },
     ];
     // 初始化渲染，针对配置了editable、editableConfig的列配置
     useEffect(function () {
@@ -483,18 +541,18 @@ var EditableTable = function () {
     }, []);
     return (React.createElement("div", null,
         React.createElement("div", null,
-            "\u53EF\u7F16\u8F91\u8868\u683C\uFF1B\u5982\u679C\u662F\u8F93\u5165\u6846\uFF0C\u53EF\u4F7F\u7528\u8868\u683C\u9ED8\u8BA4\u63D0\u4F9B\u7684\u7F16\u8F91\u6846\uFF1B \u914D\u7F6Eeditable\u4E3Atrue\u5373\u53EF\uFF0C\u8FD8\u53EF\u914D\u7F6EeditableConfig\u914D\u7F6E\u6267\u884C\u7C7B\u578B\u7B49\uFF1B\u5177\u4F53editableConfig\u53EF\u67E5\u770B\u8BE6\u7EC6\u7B7E\u540D",
+            i18next.t('可编辑表格；如果是输入框，可使用表格默认提供的编辑框； 配置editable为true即可，还可配置editableConfig配置执行类型等；具体editableConfig可查看详细签名'),
             React.createElement("br", null),
-            React.createElement("b", null, "\u5BF9\u4E8E\u914D\u7F6E\u4E86\u7F16\u8F91\u7684\u8868\u683C\uFF0C\u4E00\u5B9A\u8981\u4F7F\u7528SCU\u6765\u4F18\u5316\u8868\u683C\u6E32\u67D3\uFF0C\u6B64\u4E3E\u53EF\u4EE5\u4F18\u5316\u8868\u683C\u6E32\u67D3"),
+            React.createElement("b", null, i18next.t('对于配置了编辑的表格，一定要使用SCU来优化表格渲染，此举可以优化表格渲染')),
             React.createElement("br", null),
-            React.createElement("b", null, "\u5982\u679C\u914D\u7F6E\u4E86editable\uFF0C\u5E76\u4E14\u914D\u7F6E\u4E86SCU\u6765\u4F18\u5316\u6E32\u67D3\uFF0C\u90A3\u4E48\u521D\u59CB\u5316\u7684\u65F6\u5019\u9700\u8981\u7528\u4E00\u4E2A\u53D8\u91CF\u6807\u8BC6\u9996\u6B21\u9700\u8981\u6E32\u67D3"),
+            React.createElement("b", null, i18next.t('如果配置了editable，并且配置了SCU来优化渲染，那么初始化的时候需要用一个变量标识首次需要渲染')),
             React.createElement("br", null),
-            React.createElement("b", null, "\u65B0\u589E\u5220\u9664\u884C\uFF0C\u8868\u683C\u62D6\u62FD\u6392\u5E8F\uFF1B"),
-            "\u5BF9\u4E8E\u914D\u7F6E\u4E86SCU\u7684\u5217\uFF0C\u9700\u8981\u5728\u65B0\u589E\u5220\u9664\u7684\u65F6\u5019\u91CD\u65B0\u6E32\u67D3\uFF0C\u901A\u8FC7\u8BBE\u7F6Estate\u6807\u8BC6",
+            React.createElement("b", null, i18next.t('新增删除行，表格拖拽排序；')),
+            i18next.t('对于配置了SCU的列，需要在新增删除的时候重新渲染，通过设置state标识'),
             React.createElement("br", null),
-            React.createElement("b", null, "\u8868\u683C\u81EA\u5B9A\u4E49\u9A8C\u8BC1\uFF0C\u4F20\u5165tableHandleRef\u4E00\u4E2ARef\u5BF9\u8C61\uFF0C\u53EF\u83B7\u53D6\u8868\u683C\u63D0\u4F9B\u76F8\u5173\u65B9\u6CD5"),
-            React.createElement("p", null, "1.\u7F16\u5199\u9A8C\u8BC1\u89C4\u5219\uFF0C\u5728\u5217\u91CC\u9762\u7F16\u5199\uFF0C\u901A\u8FC7\u4F20\u5165validate\u5C5E\u6027\u914D\u7F6E,\u5177\u4F53\u53EF\u67E5\u770B\u7B7E\u540D \u5982\u679C\u53EA\u662F\u7B80\u5355\u7684\u975E\u7A7A\u9A8C\u8BC1\uFF0C\u90A3\u4E48\u53EF\u4F20\u5165\u4E00\u4E2A\u7A7A\u5BF9\u8C61\u5373\u53EF \u5982\u679C\u662F\u590D\u6742\u9A8C\u8BC1\u53EF\u901A\u8FC7validate\u4F20\u5165\u66F4\u591A\u914D\u7F6E"),
-            React.createElement("p", null, "2.\u5982\u679C\u4F20\u5165\u4E86\u81EA\u5B9A\u4E49render\u51FD\u6570\uFF0C\u7EC4\u4EF6\u65E0\u6CD5\u638C\u63E1\u5728\u4F55\u65F6\u6E05\u7A7A\u9519\u8BEF\u4FE1\u606F\uFF0C\u6240\u4EE5\u9700\u8981\u8C03\u7528\u65B9\u4E3B\u52A8\u6E05\u7A7A\u9519\u8BEF\u4FE1\u606F")),
+            React.createElement("b", null, i18next.t('表格自定义验证，传入tableHandleRef一个Ref对象，可获取表格提供相关方法')),
+            React.createElement("p", null, i18next.t('1.编写验证规则，在列里面编写，通过传入validate属性配置,具体可查看签名 如果只是简单的非空验证，那么可传入一个空对象即可 如果是复杂验证可通过validate传入更多配置')),
+            React.createElement("p", null, i18next.t('2.如果传入了自定义render函数，组件无法掌握在何时清空错误信息，所以需要调用方主动清空错误信息'))),
         React.createElement(Button, { onClick: function () {
                 console.log(records);
                 (function () {
@@ -522,10 +580,25 @@ var EditableTable = function () {
                         });
                     });
                 })();
-            } }, "\u9A8C\u8BC1"),
+            } }, i18next.t('验证')),
         React.createElement(Button, { onClick: function () {
                 console.log(records);
-            } }, "\u83B7\u53D6\u6570\u636E"),
+                var ids = records.map(function (item) { return item.id; });
+                setExpandedRowKeys(ids);
+            } }, i18next.t('获取数据')),
+        React.createElement("button", { onClick: function () {
+                i++;
+                console.log(dataObj[i]);
+                setData(dataObj[i]);
+            } },
+            i18next.t('切换数据'),
+            i),
+        React.createElement("button", { onClick: function () {
+                i--;
+                setData(dataObj[i]);
+            } },
+            i18next.t('--切换数据'),
+            i),
         React.createElement(Table, { dataSource: records, columns: columns, rowKey: "id", 
             // 表格项可输入
             onEditableSave: onEditableSaveHandle, 
@@ -534,16 +607,29 @@ var EditableTable = function () {
             // 表格行拖拽
             onMoveRow: onMoveRowHandle, 
             // tableValidate
-            tableHandleRef: tableHandleRef, tableName: "\u6211\u662F\u4E00\u4E2A\u8868\u683C", 
+            tableHandleRef: tableHandleRef, tableName: i18next.t('我是一个表格'), 
             // 显隐配置
-            configInfo: tableConfig, showColumnDynamic: true, showColumnDynamicKey: "test-o-0011", onTableChange: onTableChange, showInnerPagination: true, expandable: {
-                expandedRowRender: function (record) { return React.createElement("p", { style: { margin: 0 } }, "111"); },
-                rowExpandable: function (record) { return true; },
-            }, 
-            // scroll={{ x: 1000, y: 200 }}
-            showDelAllBtn: true, delAllChange: onDelAllChange, rowSelection: {
+            // configInfo={tableConfig}
+            showColumnDynamic: true, showColumnDynamicKey: "test-o-0011", onTableChange: onTableChange, showInnerPagination: true, expandable: {
+                // expandedRowRender: (record) => <p style={{ margin: 0 }}>111</p>,
+                // rowExpandable: (record) => true,
+                expandedRowKeys: expandedRowKeys,
+                onExpand: function (expanded, record) {
+                    if (expanded) {
+                        setExpandedRowKeys(function (pre) { return __spreadArray(__spreadArray([], pre), [record === null || record === void 0 ? void 0 : record.id]); });
+                    }
+                    else {
+                        setExpandedRowKeys(function (pre) {
+                            var index = pre.findIndex(function (id) { return id === (record === null || record === void 0 ? void 0 : record.id); });
+                            var newRecord = pre.slice();
+                            newRecord.splice(index, 1);
+                            return newRecord;
+                        });
+                    }
+                },
+            }, isOpenVirtualScrollBar: true, scroll: { x: 1200, y: 400 }, showDelAllBtn: true, delAllChange: onDelAllChange, rowSelection: {
                 type: 'checkbox',
-            }, summaryConfig: [
+            }, summaryFixed: true, summaryConfig: [
                 {
                     type: 'subtotal',
                     fields: [