@para-ui/core 4.0.46 → 4.0.47

package/ComboSelect/index.js

@@ -59,6 +59,7 @@ import 'rc-pagination';
 import '@para-ui/icons/Right';
 import '@para-ui/icons/DoubleLeft';
 import '@para-ui/icons/DoubleRight';
+import '../ScrollBar/index.js';
 import '../_verture/toConsumableArray-c7a8028f.js';
 import '../_verture/slicedToArray-75fa4188.js';
 import '../_verture/defineProperty-6f62bb2a.js';

package/DynamicMultiBox/index.js

@@ -70,6 +70,7 @@ import 'rc-pagination';
 import '@para-ui/icons/Right';
 import '@para-ui/icons/DoubleLeft';
 import '@para-ui/icons/DoubleRight';
+import '../ScrollBar/index.js';
 import '../_verture/index-6647cbf6.js';
 import '../_verture/toConsumableArray-c7a8028f.js';
 import '../_verture/slicedToArray-75fa4188.js';

package/Form/index.js

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { DeepClone } from '@paraview/lib';
 import React__default from 'react';
-import { F as FormItem, l as localeJson, v as validate } from '../_verture/index-bc7b7394.js';
+import { F as FormItem, l as localeJson, v as validate } from '../_verture/index-73a0446f.js';
 import { $ as $prefixCls } from '../_verture/constant-5317fc89.js';
 import { u as useFormatMessage } from '../_verture/useFormatMessage-1fc7c957.js';
 import '../TextField/index.js';
@@ -71,6 +71,7 @@ import 'rc-pagination';
 import '@para-ui/icons/Right';
 import '@para-ui/icons/DoubleLeft';
 import '@para-ui/icons/DoubleRight';
+import '../ScrollBar/index.js';
 import '../_verture/index-6647cbf6.js';
 import '../_verture/toConsumableArray-c7a8028f.js';
 import '../_verture/defineProperty-6f62bb2a.js';

package/FormItem/index.js

@@ -1,6 +1,6 @@
 import 'react/jsx-runtime';
 import 'react';
-export { F as default } from '../_verture/index-bc7b7394.js';
+export { F as default } from '../_verture/index-73a0446f.js';
 import 'clsx';
 import '../Label/index.js';
 import '../_verture/constant-5317fc89.js';
@@ -71,6 +71,7 @@ import 'rc-pagination';
 import '@para-ui/icons/Right';
 import '@para-ui/icons/DoubleLeft';
 import '@para-ui/icons/DoubleRight';
+import '../ScrollBar/index.js';
 import '../_verture/index-6647cbf6.js';
 import '../_verture/toConsumableArray-c7a8028f.js';
 import '../_verture/defineProperty-6f62bb2a.js';

package/README.md

@@ -1,3 +1,8 @@
+## 🎉 para-ui/core@4.0.47 发布
+
+🔧【Bugfix】
+- 【表格-Table】表格新增虚拟滚动
+
 ## 🎉 para-ui/core@4.0.46 发布
 
 🎁【Feature】

package/ScrollBar/index.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @author linhd
+ * @date 2024/12/13 11:15
+ * @description 自定义滚动条
+ */
+import React, { FunctionComponent } from 'react';
+import './index.scss';
+interface Props {
+    /** 样式class */
+    className?: string;
+    /** style */
+    style?: React.CSSProperties;
+    /** 模式 横 竖 */
+    type?: 'horizontal' | 'vertical';
+    /** 滚动总长 */
+    scrollTotalLength?: number;
+    /** 大小 */
+    size?: 'small' | 'medium' | 'large';
+    /** 颜色 */
+    color?: 'deep' | 'light';
+    /** 外部滚动距离 */
+    scrollLength?: number;
+    /** 滚动事件 */
+    onScroll?: (val: number) => void;
+}
+declare const ScrollBar: FunctionComponent<Props>;
+export default ScrollBar;

package/ScrollBar/index.js

@@ -0,0 +1,153 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import clsx from 'clsx';
+import { $ as $prefixCls } from '../_verture/constant-5317fc89.js';
+import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
+
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-scroll-bar {\n  overflow: hidden;\n  position: relative;\n}\n.paraui-v4-scroll-bar > .slider {\n  position: relative;\n}\n.paraui-v4-scroll-bar.paraui-v4-scroll-bar-horizontal {\n  width: 100%;\n}\n.paraui-v4-scroll-bar.paraui-v4-scroll-bar-horizontal > .slider {\n  height: 100%;\n}\n.paraui-v4-scroll-bar.paraui-v4-scroll-bar-vertical {\n  height: 100%;\n}\n.paraui-v4-scroll-bar.paraui-v4-scroll-bar-vertical > .slider {\n  width: 100%;\n}\n.paraui-v4-scroll-bar.paraui-v4-scroll-bar-small > .slider, .paraui-v4-scroll-bar.paraui-v4-scroll-bar-medium > .slider {\n  border-radius: 4px;\n}\n.paraui-v4-scroll-bar.paraui-v4-scroll-bar-small.paraui-v4-scroll-bar-horizontal, .paraui-v4-scroll-bar.paraui-v4-scroll-bar-medium.paraui-v4-scroll-bar-horizontal {\n  height: 4px;\n}\n.paraui-v4-scroll-bar.paraui-v4-scroll-bar-small.paraui-v4-scroll-bar-vertical, .paraui-v4-scroll-bar.paraui-v4-scroll-bar-medium.paraui-v4-scroll-bar-vertical {\n  width: 4px;\n}\n.paraui-v4-scroll-bar.paraui-v4-scroll-bar-large > .slider {\n  border-radius: 8px;\n}\n.paraui-v4-scroll-bar.paraui-v4-scroll-bar-large.paraui-v4-scroll-bar-horizontal {\n  height: 8px;\n}\n.paraui-v4-scroll-bar.paraui-v4-scroll-bar-large.paraui-v4-scroll-bar-vertical {\n  width: 8px;\n}\n.paraui-v4-scroll-bar.paraui-v4-scroll-bar-light {\n  background-color: rgb(234, 236, 241);\n}\n.paraui-v4-scroll-bar.paraui-v4-scroll-bar-light > .slider {\n  background-color: rgb(161, 168, 179);\n}\n.paraui-v4-scroll-bar.paraui-v4-scroll-bar-light > .slider:hover {\n  background-color: rgb(212, 218, 227);\n}\n.paraui-v4-scroll-bar.paraui-v4-scroll-bar-light.paraui-v4-scroll-bar-move > .slider {\n  background-color: rgb(212, 218, 227);\n}\n.paraui-v4-scroll-bar.paraui-v4-scroll-bar-deep {\n  background-color: rgb(92, 101, 115);\n}\n.paraui-v4-scroll-bar.paraui-v4-scroll-bar-deep > .slider {\n  background-color: rgb(212, 218, 227);\n}\n.paraui-v4-scroll-bar.paraui-v4-scroll-bar-deep > .slider:hover {\n  background-color: rgb(161, 168, 179);\n}\n.paraui-v4-scroll-bar.paraui-v4-scroll-bar-deep.paraui-v4-scroll-bar-move > .slider {\n  background-color: rgb(161, 168, 179);\n}";
+styleInject(css_248z);
+
+const ScrollBar = props => {
+  const {
+    className,
+    style,
+    type = 'vertical',
+    size = 'large',
+    color = 'light',
+    scrollTotalLength,
+    scrollLength,
+    onScroll
+  } = props;
+  const boxRef = useRef(null);
+  const sliderRef = useRef(null);
+  const constData = useRef({
+    typeMap: {
+      vertical: {
+        length: 'height',
+        movePage: 'pageY',
+        pos: 'top',
+        startPos: 'offsetTop'
+      },
+      horizontal: {
+        length: 'width',
+        movePage: 'pageX',
+        pos: 'left',
+        startPos: 'offsetLeft'
+      }
+    },
+    moveMaxLength: 0,
+    startLength: 0,
+    visualWindowLength: 0,
+    scrollTotalLength: 0,
+    sliderLength: 0,
+    scrollLength: 0
+  });
+  constData.current.scrollTotalLength = scrollTotalLength;
+  constData.current.scrollLength = scrollLength;
+  useEffect(() => {
+    intl();
+    window.addEventListener('resize', resize);
+    return () => {
+      window.removeEventListener("resize", resize);
+    };
+  }, []);
+  useEffect(() => {
+    handleSliderLength();
+    handleTop();
+  }, [scrollLength, scrollTotalLength]);
+  const resize = () => {
+    handleSliderLength();
+    handleTop();
+  };
+  // 计算滑块的 宽 高
+  const handleSliderLength = () => {
+    const boxRefEle = boxRef.current;
+    const sliderRefEle = sliderRef.current;
+    if (!scrollTotalLength || !boxRefEle || !sliderRefEle) return;
+    const boxRefEleRect = boxRefEle.getBoundingClientRect();
+    const lengthName = constData.current.typeMap[type].length;
+    const visualWindowLengthCom = boxRefEleRect[lengthName];
+    // 可视窗口长度 / 总长 * 可视窗口长度
+    let sliderLength = visualWindowLengthCom / scrollTotalLength * visualWindowLengthCom;
+    if (sliderLength < 16) sliderLength = 16;
+    sliderRefEle.style[lengthName] = sliderLength / visualWindowLengthCom * 100 + '%';
+    constData.current.moveMaxLength = visualWindowLengthCom - sliderLength;
+    constData.current.visualWindowLength = visualWindowLengthCom;
+    constData.current.sliderLength = sliderLength;
+  };
+  // 初始化
+  const intl = () => {
+    const boxRefEle = boxRef.current;
+    const sliderRefEle = sliderRef.current;
+    if (!boxRefEle || !sliderRefEle) return;
+    const pos = constData.current.typeMap[type].pos;
+    const startPos = constData.current.typeMap[type].startPos;
+    const movePage = constData.current.typeMap[type].movePage;
+    // 移动
+    const moveFunc = (event, e) => {
+      let moveLength = event[movePage] - e[movePage]; // 鼠标移动的距离
+      moveLength = constData.current.startLength + moveLength;
+      if (moveLength < 0) moveLength = 0;
+      if (moveLength > constData.current.moveMaxLength) moveLength = constData.current.moveMaxLength;
+      sliderRefEle.style[pos] = moveLength / constData.current.visualWindowLength * 100 + '%';
+      onScroll && onScroll(moveLength / constData.current.moveMaxLength * constData.current.scrollTotalLength);
+    };
+    // 抬起
+    const endFunc = () => {
+      boxRefEle.classList.remove("".concat($prefixCls, "-scroll-bar-move"));
+    };
+    boxRefEle.onmousedown = e => {
+      boxRefEle.classList.add("".concat($prefixCls, "-scroll-bar-move"));
+      constData.current.startLength = sliderRefEle[startPos];
+      document.onmousemove = event => {
+        moveFunc(event, e);
+      };
+      document.onmouseup = () => {
+        document.onmousemove = null;
+        document.onmouseup = null;
+        endFunc();
+      };
+    };
+    boxRefEle.ontouchstart = touchE => {
+      touchE.preventDefault();
+      const e = touchE.touches[0];
+      constData.current.startLength = sliderRefEle[startPos];
+      document.ontouchmove = touchEvent => {
+        touchEvent.preventDefault();
+        const event = touchEvent.touches[0];
+        moveFunc(event, e);
+        return false;
+      };
+      // 鼠标抬起
+      document.ontouchend = () => {
+        document.ontouchmove = null;
+        document.ontouchend = null;
+        endFunc();
+      };
+      return false;
+    };
+  };
+  // 处理鼠标滚轮滚动top定位
+  const handleTop = () => {
+    const sliderRefEle = sliderRef.current;
+    if (!sliderRefEle) return;
+    const pos = constData.current.typeMap[type].pos;
+    // 当前组件滚动总长与总长比
+    const a = constData.current.moveMaxLength / constData.current.visualWindowLength;
+    // 真实滚动总长与总长比
+    let b = Number(constData.current.scrollLength) / constData.current.scrollTotalLength;
+    sliderRefEle.style[pos] = a * b * 100 + '%';
+  };
+  return jsx("div", Object.assign({
+    className: clsx("".concat($prefixCls, "-scroll-bar ").concat($prefixCls, "-scroll-bar-").concat(type, " ").concat($prefixCls, "-scroll-bar-").concat(size, " ").concat($prefixCls, "-scroll-bar-").concat(color), className),
+    style: style,
+    ref: boxRef
+  }, {
+    children: jsx("div", {
+      ref: sliderRef,
+      className: 'slider'
+    })
+  }));
+};
+
+export { ScrollBar as default };

package/Stepper/index.js

@@ -24,7 +24,7 @@ import '@para-ui/icons/Forbid';
 import '@paraview/lib';
 
 //默认图标
-var Icons = {
+const Icons = {
   1: jsx(One, {
     size: "medium"
   }),

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>;