@para-ui/core 4.0.46 → 4.0.48

package/Table/index.js

@@ -23,6 +23,7 @@ import Refresh from '@para-ui/icons/Refresh';
 import { Pagination } from '../Pagination/index.js';
 import { Loading } from '../Loading/index.js';
 import { u as useGlobalProps } from '../_verture/useGlobalProps-4ae1a007.js';
+import ScrollBar from '../ScrollBar/index.js';
 import '../Tooltip/index.js';
 import 'rc-tooltip';
 import 'rc-tooltip/lib/placements';
@@ -1130,7 +1131,9 @@ const TableBody = props => {
     tipMaxWidth,
     lineHeight,
     dragRow,
-    onDragRow
+    onDragRow,
+    virtualIndex,
+    virtual
   } = props;
   const [expandableColSpan, setExpandableColSpan] = useState(0); // 嵌套表格合并列数
   const [expandableRow, setExpandableRow] = useState({}); // 当前哪行展开表格嵌套
@@ -1615,12 +1618,17 @@ const TableBody = props => {
     }));
   }, [expandableColSpan, loadMore, loadMoreRender, onClickMore, showMoreBtn, changePage, loadMoreUrl, lineHeight]);
   const TableBodySubjectContentMemo = useMemo(() => {
+    let rowDataCom = rowData;
+    if (virtual) {
+      rowDataCom = rowDataCom.slice(virtualIndex[0], virtualIndex[1]);
+    }
     return jsx(Fragment, {
-      children: rowData.map((row, index) => {
+      children: rowDataCom.map((row, idx) => {
         let str = 'table-body-row';
         if (rowClassMapping && rowClassMapping[row[rowKey]]) {
           str += " ".concat(rowClassMapping[row[rowKey]]);
         }
+        const index = idx + virtualIndex[0];
         return jsxs(Fragment$1, {
           children: [jsxs(TrElement, Object.assign({
             className: str,
@@ -1636,13 +1644,15 @@ const TableBody = props => {
         }, index);
       })
     });
-  }, [rowData, rowKey, disabledJson, checkJson, radio, radioValue, expandable, expandableRow, tableCell, headData, align, operate, expandableColSpan, selectCheck, selectRadio, disabledExpandJson, onExpand, disabledArrStatus, showColumns, onClickRow, rowClassMapping, tipMaxWidth, lineHeight, dragRow, onDragRow, dragBol]);
+  }, [rowData, rowKey, disabledJson, checkJson, radio, radioValue, expandable, expandableRow, tableCell, headData, align, operate, expandableColSpan, selectCheck, selectRadio, disabledExpandJson, onExpand, disabledArrStatus, showColumns, onClickRow, rowClassMapping, tipMaxWidth, lineHeight, dragRow, onDragRow, dragBol, virtualIndex, virtual]);
   // 内容memo
   const TableBodyContentMemo = useMemo(() => {
     return jsxs(Fragment$1, {
-      children: [TableBodySubjectContentMemo, MoreMemo]
+      children: [TableBodySubjectContentMemo, MoreMemo, virtual && jsx(TrElement, {
+        className: 'virtual-scroll-height'
+      })]
     });
-  }, [rowData, rowKey, disabledJson, checkJson, radio, radioValue, expandable, expandableRow, tableCell, headData, align, operate, expandableColSpan, selectCheck, selectRadio, loadMore, loadMoreRender, onClickMore, changePage, loadMoreUrl, disabledExpandJson, onExpand, showMoreBtn, disabledArrStatus, showColumns, onClickRow, rowClassMapping, tipMaxWidth, lineHeight, dragRow, onDragRow, dragBol]);
+  }, [rowData, rowKey, disabledJson, checkJson, radio, radioValue, expandable, expandableRow, tableCell, headData, align, operate, expandableColSpan, selectCheck, selectRadio, loadMore, loadMoreRender, onClickMore, changePage, loadMoreUrl, disabledExpandJson, onExpand, showMoreBtn, disabledArrStatus, showColumns, onClickRow, rowClassMapping, tipMaxWidth, lineHeight, dragRow, onDragRow, dragBol, virtualIndex, virtual]);
   // 处理内容
   const handContent = () => {
     // 无数据,且不再请求,显示暂无数据
@@ -1667,13 +1677,23 @@ const TableBody = props => {
     setDragBol(false);
     onDragRow && onDragRow(evt);
   };
+  const handleStyle = () => {
+    const obj = {};
+    if (virtual) {
+      obj.height = rowData.length * lineHeight + 'px';
+      obj.position = 'relative';
+      obj.top = virtualIndex[0] * lineHeight + 'px';
+    }
+    return obj;
+  };
   return jsx(TableBodyElement, Object.assign({
     className: handClass(),
     drag: dragRow,
     handle: '.drag-row-btn',
     list: handleRowData(),
     onDrag: onDragRowCom,
-    onChoose: onChoose
+    onChoose: onChoose,
+    style: handleStyle()
   }, {
     children: handContent()
   }));
@@ -1827,9 +1847,10 @@ const TableElement = props => {
       className,
       style,
       fixedColumn,
-      children
+      children,
+      cRef
     } = props,
-    otherProps = __rest(props, ["className", "style", "fixedColumn", "children"]);
+    otherProps = __rest(props, ["className", "style", "fixedColumn", "children", "cRef"]);
   const handClass = () => {
     let str = 'table-element';
     if (fixedColumn) str += ' table-element-fixed-column';
@@ -1838,13 +1859,14 @@ const TableElement = props => {
   };
   return jsx("table", Object.assign({
     className: handClass(),
-    style: style
+    style: style,
+    ref: cRef
   }, otherProps, {
     children: children
   }));
 };
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-table {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  background-color: white;\n  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  position: relative;\n}\n.paraui-v4-table.paraui-v4-table-draggable * {\n  user-select: none !important;\n}\n.paraui-v4-table.paraui-v4-table-fixed-table > .table-contain > table {\n  table-layout: fixed;\n}\n.paraui-v4-table.paraui-v4-table-fixed-cloumn > .table-contain > table .table-checkbox {\n  left: 0;\n}\n.paraui-v4-table.paraui-v4-table-fixed-cloumn > .table-contain > table .table-radio {\n  left: 0;\n}\n.paraui-v4-table.paraui-v4-table-fixed-cloumn > .table-contain > table .table-expandable {\n  left: 0;\n}\n.paraui-v4-table.paraui-v4-table-fixed-cloumn.paraui-v4-table-radio.paraui-v4-table-check .table-radio {\n  left: 48px;\n}\n.paraui-v4-table.paraui-v4-table-fixed-cloumn.paraui-v4-table-expandable.paraui-v4-table-check .table-expandable {\n  left: 48px;\n}\n.paraui-v4-table.paraui-v4-table-fixed-cloumn.paraui-v4-table-expandable.paraui-v4-table-check.paraui-v4-table-radio .table-expandable {\n  left: 80px;\n}\n.paraui-v4-table.paraui-v4-table-no-data > .table-container > table {\n  height: 100%;\n}\n.paraui-v4-table.paraui-v4-table-no-data > .table-container > table .paraui-v4-empty {\n  overflow: hidden;\n}\n.paraui-v4-table.paraui-v4-table-load.paraui-v4-table-no-data > .table-container > table {\n  height: auto;\n}\n.paraui-v4-table.paraui-v4-table-pagination > .table-contain {\n  height: calc(100% - 36px);\n}\n.paraui-v4-table.paraui-v4-table-pagination.table-load-more > .table-contain {\n  height: 100%;\n}\n.paraui-v4-table.paraui-v4-table-load-more.paraui-v4-table-pagination > .table-contain {\n  height: 100%;\n}\n.paraui-v4-table > .table-contain {\n  height: 100%;\n  position: relative;\n}\n.paraui-v4-table > .table-contain > table {\n  height: auto;\n}\n.paraui-v4-table > .table-contain > table .table-checkbox > label {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v4-table > .table-contain > table .table-checkbox .table-header-box {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v4-table > .table-contain > table .table-radio > label {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v4-table > .table-contain > table .table-radio .table-header-box {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v4-table > .table-contain > table .table-expandable > svg {\n  vertical-align: middle;\n}\n.paraui-v4-table > .table-contain > table > .table-head {\n  width: 100%;\n  white-space: nowrap;\n}\n.paraui-v4-table > .table-contain > table > .table-head > tr th {\n  height: 48px;\n}\n.paraui-v4-table > .table-contain > table > .table-head.table-head-scroll tr th {\n  max-width: 240px;\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-serial-number .table-header-box .table-header-title {\n  padding-right: 0;\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box {\n  height: 47px;\n  line-height: 47px;\n  position: relative;\n  padding: 0 8px;\n  display: flex;\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-header-title {\n  max-width: 100%;\n  display: flex;\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-header-title > .table-header-title-label {\n  width: 100%;\n  color: rgb(92, 101, 115);\n  font-weight: 700;\n  font-size: 14px;\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-sort-svg {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-sort-svg > span {\n  width: 20px;\n  height: 20px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  border-radius: 2px;\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-sort-svg > span:hover {\n  background-color: rgba(46, 101, 230, 0.1);\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-sort-svg > span:hover > svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-sort-svg > span > svg {\n  font-size: 12px;\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-sort-svg > span > .up-svg {\n  position: relative;\n  top: 3px;\n  transform: scale(0.8);\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-sort-svg > span > .down-svg {\n  position: relative;\n  top: -3px;\n  transform: scale(0.8);\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-header-filter {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-header-filter > span {\n  width: 20px;\n  height: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  cursor: pointer;\n  border-radius: 2px;\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-header-filter > span:hover {\n  background-color: rgba(46, 101, 230, 0.1);\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-header-filter > span:hover > svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-header-filter > span > svg {\n  font-size: 14px;\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-header-filter.table-header-filter-show > span > svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-header-filter.table-header-filter-select > span > svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-header-filter.table-header-filter-select > span:after {\n  position: absolute;\n  width: 4px;\n  height: 4px;\n  border-radius: 50%;\n  background-color: rgb(244, 66, 66);\n  content: \"\";\n  right: 3px;\n  top: 2px;\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box.table-header-box-sort > .table-header-title {\n  padding-right: 8px;\n  max-width: calc(100% - 20px);\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box.table-header-box-filter > .table-header-title {\n  padding-right: 8px;\n  max-width: calc(100% - 20px);\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box.table-header-box-sort.table-header-box-filter > .table-header-title {\n  max-width: calc(100% - 40px);\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box.table-header-box-sort-asc > .table-sort-svg > span > .up-svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box.table-header-box-sort-desc > .table-sort-svg > span > .down-svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-table > .table-contain > table > .table-head .show-colums {\n  width: 53px;\n  cursor: pointer;\n  border-left: 1px solid rgb(234, 236, 241);\n  right: 0;\n}\n.paraui-v4-table > .table-contain > table > .table-head .show-colums .table-header-box {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n}\n.paraui-v4-table > .table-contain > table > .table-head .show-colums .table-header-box > svg {\n  font-size: 20px;\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-table > .table-contain > table > .table-head .show-colums .table-header-box:hover > svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-table > .table-contain > table > .table-head .drag-row {\n  width: 53px;\n  cursor: pointer;\n  border-left: 1px solid rgb(234, 236, 241);\n  right: 0;\n}\n.paraui-v4-table > .table-contain > table > .table-head.table-head-no-btn tr th:first-child .table-header-box {\n  padding-left: 20px;\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-head-btn {\n  width: 32px;\n  padding: 0;\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-head-btn > .table-header-box {\n  width: 32px;\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-head-btn:first-child {\n  width: 48px;\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-head-btn:first-child > .table-header-box {\n  width: 48px;\n}\n.paraui-v4-table > .table-contain > table > .table-body {\n  width: 100%;\n}\n.paraui-v4-table > .table-contain > table > .table-body.table-body-scroll tr td {\n  max-width: 240px;\n}\n.paraui-v4-table > .table-contain > table > .table-body tr td {\n  background-color: white;\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-table > .table-contain > table > .table-body tr td.table-operate {\n  padding-right: 16px;\n}\n.paraui-v4-table > .table-contain > table > .table-body tr td.table-operate > .table-operate-box {\n  display: flex;\n  align-items: center;\n}\n.paraui-v4-table > .table-contain > table > .table-body tr td.table-operate > .table-operate-box .drag-btn-line {\n  display: inline-block;\n  width: 1px;\n  height: 12px;\n  background-color: rgb(213, 224, 250);\n  margin: 0 10px;\n}\n.paraui-v4-table > .table-contain > table > .table-body tr td.table-operate > .table-operate-box .drag-row-btn {\n  cursor: all-scroll;\n}\n.paraui-v4-table > .table-contain > table > .table-body tr td.table-operate > .table-operate-box .drag-row-btn svg {\n  font-size: 18px;\n}\n.paraui-v4-table > .table-contain > table > .table-body tr td.table-operate.table-operate-center {\n  padding-right: 8px;\n}\n.paraui-v4-table > .table-contain > table > .table-body tr td.table-operate.table-operate-center > .table-operate-box {\n  justify-content: center;\n}\n.paraui-v4-table > .table-contain > table > .table-body tr:nth-of-type(2n) td {\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-table > .table-contain > table > .table-body tr:hover td {\n  background-color: rgb(233, 239, 255);\n}\n.paraui-v4-table > .table-contain > table > .table-body tr .table-expandable > svg {\n  transition: all 0.3s;\n  cursor: pointer;\n  font-size: 18px;\n  color: rgb(92, 101, 115);\n  transform: rotate(270deg);\n}\n.paraui-v4-table > .table-contain > table > .table-body tr .table-expandable > svg:hover {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-table > .table-contain > table > .table-body tr .table-expandable > .expand {\n  transform: rotate(360deg);\n}\n.paraui-v4-table > .table-contain > table > .table-body .more-table-row {\n  cursor: pointer;\n  position: sticky;\n  bottom: 0;\n  z-index: 10;\n}\n.paraui-v4-table > .table-contain > table > .table-body .more-table-row .more-btn {\n  color: rgb(46, 101, 230);\n  font-size: 14px;\n}\n.paraui-v4-table > .table-contain > table > .table-body .more-table-row > .td-element {\n  position: relative;\n  background: white;\n  box-shadow: 4px -4px 8px 0px rgb(234, 236, 241);\n}\n.paraui-v4-table > .table-contain > table > .table-body.table-body-no-btn tr td:first-child {\n  padding-left: 20px;\n}\n.paraui-v4-table > .table-contain > table > .table-body.table-body-no-btn tr.more-table-row td:first-child {\n  padding-left: 8px;\n}\n.paraui-v4-table > .table-contain > table > .table-body.table-body-no-btn > .table-no-data > td:first-child {\n  padding: 0;\n}\n.paraui-v4-table > .table-contain > table > .table-body .table-body-btn {\n  width: 32px;\n  padding: 0;\n}\n.paraui-v4-table > .table-contain > table > .table-body .table-body-btn:first-child {\n  width: 48px;\n}\n.paraui-v4-table > .table-contain > table > .table-body > .table-no-data {\n  height: calc(100% - 50px);\n}\n.paraui-v4-table > .table-contain > table > .table-body > .table-no-data:hover td {\n  background-color: white;\n}\n.paraui-v4-table > .table-contain > table > .table-body > .table-no-data > td {\n  padding: 56px 0 0 0;\n}\n.paraui-v4-table > .table-contain > .table-pos-line {\n  position: absolute;\n  top: 0;\n  width: 1px;\n  background-color: rgb(46, 101, 230);\n  z-index: 1000;\n}\n.paraui-v4-table > .table-pagination {\n  width: 100%;\n  height: 36px;\n  display: flex;\n  align-items: flex-end;\n}\n.paraui-v4-table > .table-pagination .table-pagination-right {\n  display: flex;\n  height: 32px;\n  align-items: center;\n  color: rgb(29, 33, 38);\n  line-height: 32px;\n  padding-left: 16px;\n}\n.paraui-v4-table > .table-pagination .table-pagination-right .all-select {\n  margin-left: 12px;\n}\n.paraui-v4-table > .table-pagination .table-pagination-right .line {\n  width: 1px;\n  height: 12px;\n  background-color: rgb(212, 218, 227);\n  margin: 0 10px;\n}\n.paraui-v4-table > .table-pagination .table-pagination-right .check-number {\n  width: 65px;\n  display: inline-block;\n}\n.paraui-v4-table > .table-pagination .table-pagination-com {\n  flex: 1;\n  justify-content: flex-end;\n}\n.paraui-v4-table > .table-pagination .refresh-btn {\n  margin-left: 20px;\n}\n\n.paraui-v4-table-show-colums-popover > .component-popover-content {\n  min-width: 200px;\n}\n.paraui-v4-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-box {\n  padding-top: 4px;\n  max-height: 320px;\n  overflow-y: auto;\n}\n.paraui-v4-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-box > .show-colums-select-item {\n  height: 30px;\n  line-height: 30px;\n  cursor: pointer;\n  display: flex;\n  padding: 0 10px;\n}\n.paraui-v4-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-box > .show-colums-select-item > label {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v4-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-box > .show-colums-select-item > span {\n  padding-left: 8px;\n  color: rgb(29, 33, 38);\n  font-size: 14px;\n  display: inline-block;\n  width: calc(100% - 14px);\n}\n.paraui-v4-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-box > .show-colums-select-item:hover {\n  background: rgb(247, 248, 250);\n}\n.paraui-v4-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-box > .show-colums-select-item.show-colums-select-item-disabled {\n  cursor: inherit;\n}\n.paraui-v4-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-box > .show-colums-select-item.show-colums-select-item-disabled > span {\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-box > .show-colums-select-item.show-colums-select-item-disabled:hover {\n  background: transparent;\n}\n.paraui-v4-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-footer {\n  height: 36px;\n  border-top: 1px solid rgb(247, 248, 250);\n  text-align: center;\n}\n.paraui-v4-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-footer > button {\n  width: 100%;\n  height: 100%;\n  margin: 0;\n}\n\n.paraui-v4-filter-popover > .component-popover-content .filter-select > .filter-select-box {\n  padding-top: 4px;\n  max-height: 320px;\n  overflow-y: auto;\n}\n.paraui-v4-filter-popover > .component-popover-content .filter-select > .filter-select-box > .filter-select-item {\n  height: 30px;\n  line-height: 30px;\n  cursor: pointer;\n  display: flex;\n  padding: 0 10px;\n}\n.paraui-v4-filter-popover > .component-popover-content .filter-select > .filter-select-box > .filter-select-item > label {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v4-filter-popover > .component-popover-content .filter-select > .filter-select-box > .filter-select-item > span {\n  padding-left: 8px;\n  color: rgb(29, 33, 38);\n  font-size: 14px;\n  display: inline-block;\n  width: calc(100% - 14px);\n}\n.paraui-v4-filter-popover > .component-popover-content .filter-select > .filter-select-box > .filter-select-item:hover {\n  background: rgb(247, 248, 250);\n}\n.paraui-v4-filter-popover > .component-popover-content .filter-select > .filter-select-footer {\n  height: 36px;\n  border-top: 1px solid rgb(247, 248, 250);\n  text-align: center;\n}\n.paraui-v4-filter-popover > .component-popover-content .filter-select > .filter-select-footer > button {\n  width: 50%;\n  height: 100%;\n  margin: 0;\n}\n.paraui-v4-filter-popover > .component-popover-content .filter-select.filter-select-none {\n  text-align: center;\n  padding: 20px 0;\n}\n.paraui-v4-filter-popover.paraui-v4-filter-popover-default > .component-popover-content {\n  min-width: 200px;\n}";
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-table {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  background-color: white;\n  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  position: relative;\n}\n.paraui-v4-table.paraui-v4-virtual > .table-contain {\n  margin-right: 8px;\n}\n.paraui-v4-table.paraui-v4-virtual > .table-contain::-webkit-scrollbar {\n  width: 0;\n}\n.paraui-v4-table.paraui-v4-virtual.paraui-v4-table-pagination .paraui-v4-scroll-bar {\n  height: calc(100% - 36px);\n}\n.paraui-v4-table.paraui-v4-virtual.table-scroll-left .paraui-v4-scroll-bar, .paraui-v4-table.paraui-v4-virtual.table-scroll-right .paraui-v4-scroll-bar, .paraui-v4-table.paraui-v4-virtual.table-scroll-middle .paraui-v4-scroll-bar {\n  padding-bottom: 8px;\n}\n.paraui-v4-table.paraui-v4-table-draggable * {\n  user-select: none !important;\n}\n.paraui-v4-table.paraui-v4-table-fixed-table > .table-contain > table {\n  table-layout: fixed;\n}\n.paraui-v4-table.paraui-v4-table-fixed-cloumn > .table-contain > table .table-checkbox {\n  left: 0;\n}\n.paraui-v4-table.paraui-v4-table-fixed-cloumn > .table-contain > table .table-radio {\n  left: 0;\n}\n.paraui-v4-table.paraui-v4-table-fixed-cloumn > .table-contain > table .table-expandable {\n  left: 0;\n}\n.paraui-v4-table.paraui-v4-table-fixed-cloumn.paraui-v4-table-radio.paraui-v4-table-check .table-radio {\n  left: 48px;\n}\n.paraui-v4-table.paraui-v4-table-fixed-cloumn.paraui-v4-table-expandable.paraui-v4-table-check .table-expandable {\n  left: 48px;\n}\n.paraui-v4-table.paraui-v4-table-fixed-cloumn.paraui-v4-table-expandable.paraui-v4-table-check.paraui-v4-table-radio .table-expandable {\n  left: 80px;\n}\n.paraui-v4-table.paraui-v4-table-no-data > .table-container > table {\n  height: 100%;\n}\n.paraui-v4-table.paraui-v4-table-no-data > .table-container > table .paraui-v4-empty {\n  overflow: hidden;\n}\n.paraui-v4-table.paraui-v4-table-load.paraui-v4-table-no-data > .table-container > table {\n  height: auto;\n}\n.paraui-v4-table.paraui-v4-table-pagination > .table-contain {\n  height: calc(100% - 36px);\n}\n.paraui-v4-table.paraui-v4-table-pagination.table-load-more > .table-contain {\n  height: 100%;\n}\n.paraui-v4-table.paraui-v4-table-load-more.paraui-v4-table-pagination > .table-contain {\n  height: 100%;\n}\n.paraui-v4-table > .table-contain {\n  height: 100%;\n  position: relative;\n}\n.paraui-v4-table > .table-contain > table {\n  height: auto;\n}\n.paraui-v4-table > .table-contain > table .table-checkbox > label {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v4-table > .table-contain > table .table-checkbox .table-header-box {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v4-table > .table-contain > table .table-radio > label {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v4-table > .table-contain > table .table-radio .table-header-box {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v4-table > .table-contain > table .table-expandable > svg {\n  vertical-align: middle;\n}\n.paraui-v4-table > .table-contain > table > .table-head {\n  width: 100%;\n  white-space: nowrap;\n}\n.paraui-v4-table > .table-contain > table > .table-head > tr th {\n  height: 48px;\n}\n.paraui-v4-table > .table-contain > table > .table-head.table-head-scroll tr th {\n  max-width: 240px;\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-serial-number .table-header-box .table-header-title {\n  padding-right: 0;\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box {\n  height: 47px;\n  line-height: 47px;\n  position: relative;\n  padding: 0 8px;\n  display: flex;\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-header-title {\n  max-width: 100%;\n  display: flex;\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-header-title > .table-header-title-label {\n  width: 100%;\n  color: rgb(92, 101, 115);\n  font-weight: 700;\n  font-size: 14px;\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-sort-svg {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-sort-svg > span {\n  width: 20px;\n  height: 20px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  border-radius: 2px;\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-sort-svg > span:hover {\n  background-color: rgba(46, 101, 230, 0.1);\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-sort-svg > span:hover > svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-sort-svg > span > svg {\n  font-size: 12px;\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-sort-svg > span > .up-svg {\n  position: relative;\n  top: 3px;\n  transform: scale(0.8);\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-sort-svg > span > .down-svg {\n  position: relative;\n  top: -3px;\n  transform: scale(0.8);\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-header-filter {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-header-filter > span {\n  width: 20px;\n  height: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  cursor: pointer;\n  border-radius: 2px;\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-header-filter > span:hover {\n  background-color: rgba(46, 101, 230, 0.1);\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-header-filter > span:hover > svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-header-filter > span > svg {\n  font-size: 14px;\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-header-filter.table-header-filter-show > span > svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-header-filter.table-header-filter-select > span > svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-header-filter.table-header-filter-select > span:after {\n  position: absolute;\n  width: 4px;\n  height: 4px;\n  border-radius: 50%;\n  background-color: rgb(244, 66, 66);\n  content: \"\";\n  right: 3px;\n  top: 2px;\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box.table-header-box-sort > .table-header-title {\n  padding-right: 8px;\n  max-width: calc(100% - 20px);\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box.table-header-box-filter > .table-header-title {\n  padding-right: 8px;\n  max-width: calc(100% - 20px);\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box.table-header-box-sort.table-header-box-filter > .table-header-title {\n  max-width: calc(100% - 40px);\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box.table-header-box-sort-asc > .table-sort-svg > span > .up-svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box.table-header-box-sort-desc > .table-sort-svg > span > .down-svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-table > .table-contain > table > .table-head .show-colums {\n  width: 53px;\n  cursor: pointer;\n  border-left: 1px solid rgb(234, 236, 241);\n  right: 0;\n}\n.paraui-v4-table > .table-contain > table > .table-head .show-colums .table-header-box {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n}\n.paraui-v4-table > .table-contain > table > .table-head .show-colums .table-header-box > svg {\n  font-size: 20px;\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-table > .table-contain > table > .table-head .show-colums .table-header-box:hover > svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-table > .table-contain > table > .table-head .drag-row {\n  width: 53px;\n  cursor: pointer;\n  border-left: 1px solid rgb(234, 236, 241);\n  right: 0;\n}\n.paraui-v4-table > .table-contain > table > .table-head.table-head-no-btn tr th:first-child .table-header-box {\n  padding-left: 20px;\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-head-btn {\n  width: 32px;\n  padding: 0;\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-head-btn > .table-header-box {\n  width: 32px;\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-head-btn:first-child {\n  width: 48px;\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-head-btn:first-child > .table-header-box {\n  width: 48px;\n}\n.paraui-v4-table > .table-contain > table > .table-body {\n  width: 100%;\n}\n.paraui-v4-table > .table-contain > table > .table-body.table-body-scroll tr td {\n  max-width: 240px;\n}\n.paraui-v4-table > .table-contain > table > .table-body tr td {\n  background-color: white;\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-table > .table-contain > table > .table-body tr td.table-operate {\n  padding-right: 16px;\n}\n.paraui-v4-table > .table-contain > table > .table-body tr td.table-operate > .table-operate-box {\n  display: flex;\n  align-items: center;\n}\n.paraui-v4-table > .table-contain > table > .table-body tr td.table-operate > .table-operate-box .drag-btn-line {\n  display: inline-block;\n  width: 1px;\n  height: 12px;\n  background-color: rgb(213, 224, 250);\n  margin: 0 10px;\n}\n.paraui-v4-table > .table-contain > table > .table-body tr td.table-operate > .table-operate-box .drag-row-btn {\n  cursor: all-scroll;\n}\n.paraui-v4-table > .table-contain > table > .table-body tr td.table-operate > .table-operate-box .drag-row-btn svg {\n  font-size: 18px;\n}\n.paraui-v4-table > .table-contain > table > .table-body tr td.table-operate.table-operate-center {\n  padding-right: 8px;\n}\n.paraui-v4-table > .table-contain > table > .table-body tr td.table-operate.table-operate-center > .table-operate-box {\n  justify-content: center;\n}\n.paraui-v4-table > .table-contain > table > .table-body tr:nth-of-type(2n) td {\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-table > .table-contain > table > .table-body tr:hover td {\n  background-color: rgb(233, 239, 255);\n}\n.paraui-v4-table > .table-contain > table > .table-body tr .table-expandable > svg {\n  transition: all 0.3s;\n  cursor: pointer;\n  font-size: 18px;\n  color: rgb(92, 101, 115);\n  transform: rotate(270deg);\n}\n.paraui-v4-table > .table-contain > table > .table-body tr .table-expandable > svg:hover {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-table > .table-contain > table > .table-body tr .table-expandable > .expand {\n  transform: rotate(360deg);\n}\n.paraui-v4-table > .table-contain > table > .table-body .more-table-row {\n  cursor: pointer;\n  position: sticky;\n  bottom: 0;\n  z-index: 10;\n}\n.paraui-v4-table > .table-contain > table > .table-body .more-table-row .more-btn {\n  color: rgb(46, 101, 230);\n  font-size: 14px;\n}\n.paraui-v4-table > .table-contain > table > .table-body .more-table-row > .td-element {\n  position: relative;\n  background: white;\n  box-shadow: 4px -4px 8px 0px rgb(234, 236, 241);\n}\n.paraui-v4-table > .table-contain > table > .table-body.table-body-no-btn tr td:first-child {\n  padding-left: 20px;\n}\n.paraui-v4-table > .table-contain > table > .table-body.table-body-no-btn tr.more-table-row td:first-child {\n  padding-left: 8px;\n}\n.paraui-v4-table > .table-contain > table > .table-body.table-body-no-btn > .table-no-data > td:first-child {\n  padding: 0;\n}\n.paraui-v4-table > .table-contain > table > .table-body .table-body-btn {\n  width: 32px;\n  padding: 0;\n}\n.paraui-v4-table > .table-contain > table > .table-body .table-body-btn:first-child {\n  width: 48px;\n}\n.paraui-v4-table > .table-contain > table > .table-body > .table-no-data {\n  height: calc(100% - 50px);\n}\n.paraui-v4-table > .table-contain > table > .table-body > .table-no-data:hover td {\n  background-color: white;\n}\n.paraui-v4-table > .table-contain > table > .table-body > .table-no-data > td {\n  padding: 56px 0 0 0;\n}\n.paraui-v4-table > .table-contain > .table-pos-line {\n  position: absolute;\n  top: 0;\n  width: 1px;\n  background-color: rgb(46, 101, 230);\n  z-index: 1000;\n}\n.paraui-v4-table > .table-pagination {\n  width: 100%;\n  height: 36px;\n  display: flex;\n  align-items: flex-end;\n}\n.paraui-v4-table > .table-pagination .table-pagination-right {\n  display: flex;\n  height: 32px;\n  align-items: center;\n  color: rgb(29, 33, 38);\n  line-height: 32px;\n  padding-left: 16px;\n}\n.paraui-v4-table > .table-pagination .table-pagination-right .all-select {\n  margin-left: 12px;\n}\n.paraui-v4-table > .table-pagination .table-pagination-right .line {\n  width: 1px;\n  height: 12px;\n  background-color: rgb(212, 218, 227);\n  margin: 0 10px;\n}\n.paraui-v4-table > .table-pagination .table-pagination-right .check-number {\n  width: 65px;\n  display: inline-block;\n}\n.paraui-v4-table > .table-pagination .table-pagination-com {\n  flex: 1;\n  justify-content: flex-end;\n}\n.paraui-v4-table > .table-pagination .refresh-btn {\n  margin-left: 20px;\n}\n\n.paraui-v4-table-show-colums-popover > .component-popover-content {\n  min-width: 200px;\n}\n.paraui-v4-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-box {\n  padding-top: 4px;\n  max-height: 320px;\n  overflow-y: auto;\n}\n.paraui-v4-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-box > .show-colums-select-item {\n  height: 30px;\n  line-height: 30px;\n  cursor: pointer;\n  display: flex;\n  padding: 0 10px;\n}\n.paraui-v4-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-box > .show-colums-select-item > label {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v4-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-box > .show-colums-select-item > span {\n  padding-left: 8px;\n  color: rgb(29, 33, 38);\n  font-size: 14px;\n  display: inline-block;\n  width: calc(100% - 14px);\n}\n.paraui-v4-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-box > .show-colums-select-item:hover {\n  background: rgb(247, 248, 250);\n}\n.paraui-v4-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-box > .show-colums-select-item.show-colums-select-item-disabled {\n  cursor: inherit;\n}\n.paraui-v4-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-box > .show-colums-select-item.show-colums-select-item-disabled > span {\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-box > .show-colums-select-item.show-colums-select-item-disabled:hover {\n  background: transparent;\n}\n.paraui-v4-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-footer {\n  height: 36px;\n  border-top: 1px solid rgb(247, 248, 250);\n  text-align: center;\n}\n.paraui-v4-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-footer > button {\n  width: 100%;\n  height: 100%;\n  margin: 0;\n}\n\n.paraui-v4-filter-popover > .component-popover-content .filter-select > .filter-select-box {\n  padding-top: 4px;\n  max-height: 320px;\n  overflow-y: auto;\n}\n.paraui-v4-filter-popover > .component-popover-content .filter-select > .filter-select-box > .filter-select-item {\n  height: 30px;\n  line-height: 30px;\n  cursor: pointer;\n  display: flex;\n  padding: 0 10px;\n}\n.paraui-v4-filter-popover > .component-popover-content .filter-select > .filter-select-box > .filter-select-item > label {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v4-filter-popover > .component-popover-content .filter-select > .filter-select-box > .filter-select-item > span {\n  padding-left: 8px;\n  color: rgb(29, 33, 38);\n  font-size: 14px;\n  display: inline-block;\n  width: calc(100% - 14px);\n}\n.paraui-v4-filter-popover > .component-popover-content .filter-select > .filter-select-box > .filter-select-item:hover {\n  background: rgb(247, 248, 250);\n}\n.paraui-v4-filter-popover > .component-popover-content .filter-select > .filter-select-footer {\n  height: 36px;\n  border-top: 1px solid rgb(247, 248, 250);\n  text-align: center;\n}\n.paraui-v4-filter-popover > .component-popover-content .filter-select > .filter-select-footer > button {\n  width: 50%;\n  height: 100%;\n  margin: 0;\n}\n.paraui-v4-filter-popover > .component-popover-content .filter-select.filter-select-none {\n  text-align: center;\n  padding: 20px 0;\n}\n.paraui-v4-filter-popover.paraui-v4-filter-popover-default > .component-popover-content {\n  min-width: 200px;\n}";
 styleInject(css_248z);
 
 const Table = propsInit => {
@@ -1925,7 +1947,8 @@ const Table = propsInit => {
     refreshInside = props.url ? true : false,
     checkCount = props.check ? true : false,
     onDragRow,
-    resizePaginationLine
+    resizePaginationLine,
+    virtual = false
   } = props;
   const intl = useFormatMessage('Table', localeJson);
   const dayNum = props.expirationTime ? props.expirationTime === 0 ? 100000000 : props.expirationTime : 7; // 过期天数
@@ -1953,8 +1976,13 @@ const Table = propsInit => {
   const [tableMinWidth, setTableMinWidth] = useState(0); // 表格最小width
   const [posFixed, setPosFixed] = useState({}); // 固定位置
   const [headDataConfig, setHeadDataConfig] = useState({}); // 表头配置
+  const [virtualCom, setVirtualCom] = useState(false);
+  const [virtualIndex, setVirtualIndex] = useState([0, 0]);
+  const [scrollTop, setScrollTop] = useState(0);
+  useState(0);
   const containerRef = useRef(); // 表格内容高度
   const tableRef = useRef(); // 表格
+  const tableEleRef = useRef(); // 表格元素
   const constData = useRef({
     page: props.page !== undefined ? props.page : 1,
     headDataConfig: {}
@@ -2003,13 +2031,7 @@ const Table = propsInit => {
       handSize(size);
     } else {
       if (containerRef && containerRef.current) {
-        let height = containerRef.current.clientHeight - 48;
-        if (props.loadMore) height -= lineHeight;
-        let num = Math.floor(height / lineHeight);
-        /*// 取余大于0.5，加一条
-        const numRemainder = height % lineHeight / lineHeight;
-        if (numRemainder > 0.5) num += 1;*/
-        const columnsNUmber = num < 1 ? size : num;
+        const columnsNUmber = getVisibleWinNum();
         if (sizeArr.indexOf(columnsNUmber) === -1) {
           sizeArr.unshift(columnsNUmber);
           // 数组排序
@@ -2198,12 +2220,27 @@ const Table = propsInit => {
       }
     }
   }, [checkJson, rowData, disabledJson]);
+  // 计算表格虚拟滚动
+  useEffect(() => {
+    handleVirtualizedIndex();
+  }, [virtual, rowData, expandable]);
   // 表格更新计算是否有滚动条
   useEffect(() => {
     tableBoxScroll({
       target: containerRef.current
     });
   });
+  // 可视化窗口显示条数 / 第一次显示条数
+  const getVisibleWinNum = () => {
+    let height = containerRef.current.clientHeight - 48;
+    if (props.loadMore) height -= lineHeight;
+    let num = Math.floor(height / lineHeight);
+    /*// 取余大于0.5，加一条
+    const numRemainder = height % lineHeight / lineHeight;
+    if (numRemainder > 0.5) num += 1;*/
+    const columnsNUmber = num < 1 ? size : num;
+    return columnsNUmber;
+  };
   /** 设置size */
   const handSize = num => {
     constData.current.size = num;
@@ -3010,9 +3047,11 @@ const Table = propsInit => {
       tipMaxWidth: tipMaxWidth,
       lineHeight: lineHeight,
       dragRow: dragRow,
-      onDragRow: onDragRowCom
+      onDragRow: onDragRowCom,
+      virtualIndex: virtualIndex,
+      virtual: virtualCom
     });
-  }, [showColumns, formatter, rowKey, rowData, headDataCom, expandable, check, radio, checkJson, sortTable, orderTypeArr, orderFieldArr, radioValue, disabledJson, align, tableCell, operate, setRadio, setCheck, totalDataJson, loadMore, loadMoreRender, onClickMore, total, pageCom, sizeCom, loadMoreUrl, expandValue, expandMultiple, disabledExpand, onExpand, defaultExpandAllRows, loadState, emptyProps, url, disabledArrStatus, posFixed, beyondText, fixedTable, fixedColumn, onClickRow, rowClassMapping, tipMaxWidth, lineHeight, dragRow, onDragRow]);
+  }, [showColumns, formatter, rowKey, rowData, headDataCom, expandable, check, radio, checkJson, sortTable, orderTypeArr, orderFieldArr, radioValue, disabledJson, align, tableCell, operate, setRadio, setCheck, totalDataJson, loadMore, loadMoreRender, onClickMore, total, pageCom, sizeCom, loadMoreUrl, expandValue, expandMultiple, disabledExpand, onExpand, defaultExpandAllRows, loadState, emptyProps, url, disabledArrStatus, posFixed, beyondText, fixedTable, fixedColumn, onClickRow, rowClassMapping, tipMaxWidth, lineHeight, dragRow, onDragRow, virtualIndex, virtual, virtualCom]);
   // 表格分页memo
   const TablePaginationMemo = useMemo(() => {
     if (constData.current.page === null || constData.current.size === null || loadMore) return;
@@ -3073,15 +3112,61 @@ const Table = propsInit => {
     if (expandable) str += " ".concat($prefixCls, "-table-expandable");
     if (rowData.length === 0) str += " ".concat($prefixCls, "-table-no-data");
     if (loadState) str += " ".concat($prefixCls, "-table-load");
+    if (virtualCom) str += " ".concat($prefixCls, "-virtual");
     if (className) str += " ".concat(className);
     return str;
   };
   // 改变屏幕大小
   const changeResize = () => {
+    handleVirtualizedIndex();
     tableBoxScroll({
       target: containerRef.current
     });
   };
+  // 计算虚拟列表滚动索引
+  const handleVirtualizedIndex = () => {
+    // 可视窗口显示条数
+    const visibleWinNum = getVisibleWinNum();
+    // 索引差量 上下10条
+    const indexDiff = 10;
+    // 每页显示条数 > 可视窗口显示条数 + 2倍索引差量 + 开启条数 开启虚拟滚动
+    if (virtual && !expandable && Number(sizeCom) > visibleWinNum + 2 * indexDiff) {
+      setVirtualCom(true);
+      // 最大滚动距离 超出说明到底部，定制向下滚动
+      const maxScroll = tableEleRef.current.clientHeight - containerRef.current.clientHeight;
+      if (containerRef.current.scrollTop >= maxScroll) {
+        // 滚动到底部
+        containerRef.current.scrollTop = maxScroll;
+        setScrollTop(maxScroll);
+      }
+      setScrollTop(containerRef.current.scrollTop);
+      const scrollDom = containerRef.current;
+      // 上索引
+      const topIndex = Math.floor(scrollDom.scrollTop / lineHeight);
+      // 下索引
+      const bottomIndex = topIndex + visibleWinNum + indexDiff;
+      setVirtualIndex([topIndex, bottomIndex]);
+    } else {
+      setVirtualIndex([0, 0]);
+      setVirtualCom(false); // 不显示虚拟滚动条
+    }
+  };
+  const handleVirtualScroll = () => {
+    if (!virtualCom) return null;
+    return jsx(ScrollBar, {
+      style: {
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        zIndex: 100
+      },
+      scrollTotalLength: tableEleRef.current.clientHeight - containerRef.current.clientHeight,
+      scrollLength: scrollTop,
+      onScroll: scrollH => {
+        containerRef.current.scrollTop = scrollH;
+      }
+    });
+  };
   return jsxs("div", Object.assign({
     className: handClass(),
     style: style,
@@ -3090,9 +3175,13 @@ const Table = propsInit => {
     children: [jsx(TableContainer, Object.assign({
       className: "table-contain",
       cRef: containerRef,
-      onScroll: tableBoxScroll
+      onScroll: e => {
+        handleVirtualizedIndex();
+        tableBoxScroll(e);
+      }
     }, {
       children: jsxs(TableElement, Object.assign({
+        cRef: tableEleRef,
         fixedColumn: fixedColumn,
         style: {
           minWidth: "".concat(tableMinWidth, "px")
@@ -3100,7 +3189,7 @@ const Table = propsInit => {
       }, {
         children: [TableHeadMemo, TableBodyMemo]
       }))
-    })), loadState && jsx(Loading, {}), TablePaginationMemo]
+    })), handleVirtualScroll(), loadState && jsx(Loading, {}), TablePaginationMemo]
   }));
 };
 

package/Table/interface.d.ts

@@ -223,6 +223,8 @@ export interface TableProps extends TableHeadBodyPublicProps {
     dragColumn?: boolean;
     /** 拖动行 */
     dragRow?: boolean;
+    /** 虚拟滚动 嵌套表格不适用 */
+    virtual?: boolean;
     /** 是否过滤 */
     filter?: boolean;
     /** 排序 多个/单个 */

package/Table/tableBodyInterface.d.ts

@@ -76,4 +76,8 @@ export interface TableBodyProps extends TableHeadBodyPublicProps {
     dragRow?: boolean;
     /** 拖动行事件 */
     onDragRow?: (evt: any) => void;
+    /** 虚拟滚动 */
+    virtual?: boolean;
+    /** 虚拟滚动下标 */
+    virtualIndex: [number, number];
 }

package/Table/tableElement/index.d.ts

@@ -11,6 +11,7 @@ export interface TableElementProps {
     /** 是否具有固定列 */
     fixedColumn?: boolean;
     children?: any;
+    cRef?: any;
     [name: string]: any;
 }
 export declare const TableElement: FunctionComponent<TableElementProps>;

package/Tag/index.js

@@ -4,9 +4,6 @@ import { useState, useRef, useEffect } from 'react';
 import Close from '@para-ui/icons/Close';
 import EditOutline from '@para-ui/icons/EditOutline';
 import clsx from 'clsx';
-import { _ as _toConsumableArray } from '../_verture/toConsumableArray-c7a8028f.js';
-import { _ as _typeof } from '../_verture/typeof-adeedc13.js';
-import { _ as _slicedToArray } from '../_verture/slicedToArray-75fa4188.js';
 import { $ as $prefixCls } from '../_verture/constant-5317fc89.js';
 import AutoTips from '../AutoTips/index.js';
 import { t as tinycolor } from '../_verture/tinycolor-ece3542d.js';
@@ -24,129 +21,102 @@ var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2022/1/12 上
 styleInject(css_248z);
 
 //tag group
-var TagGroup = function TagGroup(props) {
-  var _useGlobalProps = useGlobalProps(props, 'TagGroup'),
-    className = _useGlobalProps.className,
-    _useGlobalProps$size = _useGlobalProps.size,
-    size = _useGlobalProps$size === void 0 ? 'large' : _useGlobalProps$size,
-    style = _useGlobalProps.style,
-    defaultInputValue = _useGlobalProps.defaultInputValue,
-    _useGlobalProps$incre = _useGlobalProps.increased,
-    increased = _useGlobalProps$incre === void 0 ? false : _useGlobalProps$incre,
-    increasedTag = _useGlobalProps.increasedTag,
-    inputClassName = _useGlobalProps.inputClassName,
-    inputWidth = _useGlobalProps.inputWidth,
-    _useGlobalProps$margi = _useGlobalProps.marginBottom,
-    marginBottom = _useGlobalProps$margi === void 0 ? '8px' : _useGlobalProps$margi,
-    _useGlobalProps$margi2 = _useGlobalProps.marginRight,
-    marginRight = _useGlobalProps$margi2 === void 0 ? '8px' : _useGlobalProps$margi2,
-    onChange = _useGlobalProps.onChange;
-  var _useState = useState([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    inData = _useState2[0],
-    setInData = _useState2[1]; //数据源
-  var _useState3 = useState(defaultInputValue !== null && defaultInputValue !== void 0 ? defaultInputValue : ''),
-    _useState4 = _slicedToArray(_useState3, 2),
-    inputValue = _useState4[0],
-    setInputValue = _useState4[1]; //input value
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    inputVisible = _useState6[0],
-    setInputVisible = _useState6[1]; //input visible
-  var inputRef = useRef(); //input ref
-  var _useState7 = useState(),
-    _useState8 = _slicedToArray(_useState7, 2),
-    increasedInputWidth = _useState8[0],
-    setIncreasedInputWidth = _useState8[1]; //添加标签的最小宽
-  useEffect(function () {
+const TagGroup = props => {
+  const {
+    className,
+    size = 'large',
+    style,
+    defaultInputValue,
+    increased = false,
+    increasedTag,
+    inputClassName,
+    inputWidth,
+    marginBottom = '8px',
+    marginRight = '8px',
+    onChange
+  } = useGlobalProps(props, 'TagGroup');
+  const [inData, setInData] = useState([]); //数据源
+  const [inputValue, setInputValue] = useState(defaultInputValue !== null && defaultInputValue !== void 0 ? defaultInputValue : ''); //input value
+  const [inputVisible, setInputVisible] = useState(false); //input visible
+  const inputRef = useRef(); //input ref
+  const [increasedInputWidth, setIncreasedInputWidth] = useState(); //添加标签的最小宽
+  useEffect(() => {
     if (props.data) {
-      var tArr = props.data;
+      let tArr = props.data;
       //Item[]
-      var unObjType = tArr.some(function (v) {
-        return ['string', 'number'].includes(_typeof(v));
-      });
+      const unObjType = tArr.some(v => ['string', 'number'].includes(typeof v));
       if (unObjType) {
-        tArr = tArr.map(function (_) {
-          return {
-            value: _,
-            label: _
-          };
-        });
+        tArr = tArr.map(_ => ({
+          value: _,
+          label: _
+        }));
       }
-      setInData(_toConsumableArray(tArr));
+      setInData([...tArr]);
     }
   }, [props.data]);
   //tag value
-  var getTagGroupVal = function getTagGroupVal(data) {
-    return data.map(function (_) {
-      return _.value;
-    });
+  const getTagGroupVal = data => {
+    return data.map(_ => _.value);
   };
   //show input
-  var showInput = function showInput() {
+  const showInput = () => {
     setInputVisible(true);
-    setTimeout(function () {
+    setTimeout(() => {
       var _a;
       (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     });
   };
-  var handleTagEdit = function handleTagEdit(value, idx) {
+  const handleTagEdit = (value, idx) => {
     inData[idx].value = value;
-    setInData(_toConsumableArray(inData));
+    setInData([...inData]);
     onChange === null || onChange === void 0 ? void 0 : onChange(inData, getTagGroupVal(inData));
   };
   //input change
-  var handleInputChange = function handleInputChange(e) {
+  const handleInputChange = e => {
     setInputValue(e.target.value);
   };
   //input confirm
-  var handleInputConfirm = function handleInputConfirm() {
-    var val = inputValue.trim();
+  const handleInputConfirm = () => {
+    const val = inputValue.trim();
     if (val !== '') {
       inData.push({
         value: val,
         label: val,
         closable: true
       });
-      setInData(_toConsumableArray(inData));
+      setInData([...inData]);
       onChange === null || onChange === void 0 ? void 0 : onChange(inData, getTagGroupVal(inData));
     }
     setInputValue(defaultInputValue !== null && defaultInputValue !== void 0 ? defaultInputValue : '');
     setInputVisible(false);
   };
   //input enter
-  var handleInputEnter = function handleInputEnter(e) {
+  const handleInputEnter = e => {
     if (e.keyCode === 13 || e.which === 13) {
       handleInputConfirm();
     }
   };
   //handle close
-  var handleClose = function handleClose(item) {
-    return function (e) {
-      var idx = inData.findIndex(function (_) {
-        return _.value === item.value;
-      });
-      if (idx > -1) {
-        inData.splice(idx, 1);
-        setInData(_toConsumableArray(inData));
-      }
-      if (item.onClose) item.onClose(e);
-      onChange === null || onChange === void 0 ? void 0 : onChange(inData, getTagGroupVal(inData));
-    };
+  const handleClose = item => e => {
+    const idx = inData.findIndex(_ => _.value === item.value);
+    if (idx > -1) {
+      inData.splice(idx, 1);
+      setInData([...inData]);
+    }
+    if (item.onClose) item.onClose(e);
+    onChange === null || onChange === void 0 ? void 0 : onChange(inData, getTagGroupVal(inData));
   };
   //渲染Tag组
-  var renderTagGroup = function renderTagGroup() {
+  const renderTagGroup = () => {
     if (!(inData === null || inData === void 0 ? void 0 : inData.length)) return null;
-    return inData.map(function (item, idx) {
+    return inData.map((item, idx) => {
       return jsx(Tag, Object.assign({
         marginBottom: marginBottom,
         marginRight: marginRight
       }, item, {
         size: size,
         visible: true,
-        tagChange: function tagChange(value) {
-          return handleTagEdit(value, idx);
-        },
+        tagChange: value => handleTagEdit(value, idx),
         onClose: handleClose(item)
       }, {
         children: item.label
@@ -154,10 +124,10 @@ var TagGroup = function TagGroup(props) {
     });
   };
   //动态增加tag
-  var renderNewInput = function renderNewInput() {
+  const renderNewInput = () => {
     var _a;
     if (inputVisible) {
-      var inputCls = clsx('tag-group-input', {
+      const inputCls = clsx('tag-group-input', {
         'tag-group-input-large': size === 'large'
       }, inputClassName);
       return jsx("input", {
@@ -174,19 +144,17 @@ var TagGroup = function TagGroup(props) {
         onKeyDown: handleInputEnter
       });
     }
-    var icon = jsx(Plus, {});
-    var text = 'New Tag';
+    let icon = jsx(Plus, {});
+    let text = 'New Tag';
     if (increasedTag) {
       icon = increasedTag.icon || jsx(Plus, {});
       text = (_a = increasedTag.text) !== null && _a !== void 0 ? _a : 'New Tag';
     }
-    var newCls = clsx('tag-group-new', {
+    const newCls = clsx('tag-group-new', {
       'tag-group-new-icon': !text
     }, 'tag-group-add-btn');
     return jsx(Tag, Object.assign({
-      getWidth: function getWidth(width) {
-        return setIncreasedInputWidth(width);
-      },
+      getWidth: width => setIncreasedInputWidth(width),
       className: newCls,
       size: size,
       icon: icon,

package/TimePicker/index.js

@@ -24,13 +24,10 @@ import '@para-ui/icons/Forbid';
 import '../Tag/index.js';
 import '@para-ui/icons/Close';
 import '@para-ui/icons/EditOutline';
-import '../_verture/toConsumableArray-c7a8028f.js';
-import '../_verture/slicedToArray-75fa4188.js';
-import '../_verture/typeof-adeedc13.js';
 import '../_verture/tinycolor-ece3542d.js';
 import '../_verture/useGlobalProps-4ae1a007.js';
 import '@para-ui/icons/Plus';
-import '../_verture/defineProperty-6f62bb2a.js';
+import '../_verture/defineProperty-f0e15205.js';
 import 'rc-picker';
 import '@para-ui/icons/CloseCircleF';
 import '@para-ui/icons/Calendar';

package/Timeline/index.js

@@ -2,10 +2,9 @@ import { _ as __rest } from '../_verture/tslib.es6-55ed4bd2.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import clsx from 'clsx';
-import { _ as _defineProperty } from '../_verture/defineProperty-6f62bb2a.js';
+import { a as _defineProperty } from '../_verture/defineProperty-f0e15205.js';
 import { a as $rcPrefixCls, $ as $prefixCls } from '../_verture/constant-5317fc89.js';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
-import '../_verture/typeof-adeedc13.js';
 
 //TimelineItem
 var TimelineItem = function TimelineItem(props) {