@para-ui/core 4.0.45 → 4.0.47

package/Table/index.js

@@ -1,9 +1,7 @@
-import { a as __rest, _ as __awaiter } from '../_verture/tslib.es6-f43aa41d.js';
+import { _ as __rest, a as __awaiter } from '../_verture/tslib.es6-55ed4bd2.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useRef, useState, useEffect, useMemo, useCallback, Fragment as Fragment$1 } from 'react';
 import { Get, Post, DeepClone, GetBrowserClass, Cancel, ArrayToObject } from '@paraview/lib';
-import { _ as _typeof, a as _defineProperty } from '../_verture/defineProperty-f0e15205.js';
-import { _ as _slicedToArray } from '../_verture/slicedToArray-75fa4188.js';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
 import { $ as $prefixCls } from '../_verture/constant-5317fc89.js';
 import { Popover } from '../Popover/index.js';
@@ -25,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';
@@ -64,23 +63,25 @@ import '@para-ui/icons/DoubleRight';
  * 发送请求
  * @param obj {ReqProps} 请求信息
  */
-var requestFunc = function requestFunc(obj) {
-  var method = obj.method,
-    url = obj.url,
-    ctx = obj.ctx,
-    data = obj.data,
+const requestFunc = obj => {
+  const {
+      method,
+      url,
+      ctx,
+      data
+    } = obj,
     otherProps = __rest(obj, ["method", "url", "ctx", "data"]);
   if (method === 'Get') {
     return Get(Object.assign({
       url: url,
-      ctx: ctx
+      ctx
     }, otherProps));
   }
   if (method === 'Post') {
     return Post(Object.assign({
       url: url,
-      ctx: ctx,
-      data: data
+      ctx,
+      data
     }, otherProps));
   }
 };
@@ -89,23 +90,23 @@ var requestFunc = function requestFunc(obj) {
  * @param obj {ReqProps} 请求信息
  * @return string get请求地址参数
  */
-var handGetReqParams = function handGetReqParams(obj) {
-  var str = obj.url;
-  var params = obj.data || {};
-  var arrKey = Object.keys(params);
-  var paramsArr = [];
-  for (var i = 0, l = arrKey.length; i < l; i++) {
-    var key = arrKey[i];
-    var val = params[key];
-    if (_typeof(val) === 'object') {
+const handGetReqParams = obj => {
+  let str = obj.url;
+  const params = obj.data || {};
+  const arrKey = Object.keys(params);
+  const paramsArr = [];
+  for (let i = 0, l = arrKey.length; i < l; i++) {
+    const key = arrKey[i];
+    let val = params[key];
+    if (typeof val === 'object') {
       val = encodeURIComponent(JSON.stringify(val));
     } else {
       val = encodeURIComponent(val);
     }
     paramsArr.push("".concat(key, "=").concat(val));
   }
-  var paramsStr = paramsArr.join('&');
-  var pos = str.indexOf('?');
+  const paramsStr = paramsArr.join('&');
+  const pos = str.indexOf('?');
   if (pos !== -1) {
     str += (pos === str.length - 1 ? '' : '&') + paramsStr;
   } else {
@@ -116,9 +117,9 @@ var handGetReqParams = function handGetReqParams(obj) {
 /**
  * 提取字符串里面的数字
  * */
-var getStringInNumber = function getStringInNumber(str) {
+const getStringInNumber = str => {
   if (typeof str === 'number') return str;
-  var strHand = str.replace(/[^0-9$]/gi, '');
+  const strHand = str.replace(/[^0-9$]/gi, '');
   return Number(strHand);
 };
 /**
@@ -126,23 +127,23 @@ var getStringInNumber = function getStringInNumber(str) {
  * @param key {string} 键值
  * @param num {number} 过期天数
  * */
-var getLocalStorageSelectHead = function getLocalStorageSelectHead(key, num) {
+const getLocalStorageSelectHead = (key, num) => {
   //debugger
-  var headJsonStr = window.localStorage.getItem('_paraui_table_head') || '{}';
-  var headJson = JSON.parse(headJsonStr);
-  var headJsonArr = Object.keys(headJson);
-  for (var i = 0, l = headJsonArr.length; i < l; i++) {
-    var keyStr = headJsonArr[i];
-    var item = headJson[i];
+  const headJsonStr = window.localStorage.getItem('_paraui_table_head') || '{}';
+  const headJson = JSON.parse(headJsonStr);
+  const headJsonArr = Object.keys(headJson);
+  for (let i = 0, l = headJsonArr.length; i < l; i++) {
+    const keyStr = headJsonArr[i];
+    const item = headJson[i];
     if (!item) continue;
-    var newDate = new Date().getTime(); // 当前时间
-    var endTime = item.storageTime + item.validity; // 过期时间
+    const newDate = new Date().getTime(); // 当前时间
+    const endTime = item.storageTime + item.validity; // 过期时间
     // 过期时间 小于 当前时间, 说明已经过期了, 删除当前表格列数据
     if (endTime < newDate) {
       delete headJson[keyStr];
     }
   }
-  var headJsonItem = headJson[key];
+  const headJsonItem = headJson[key];
   // 重置过期时间
   if (headJsonItem) {
     headJsonItem.storageTime = new Date().getTime();
@@ -155,9 +156,9 @@ var getLocalStorageSelectHead = function getLocalStorageSelectHead(key, num) {
  * @param key {string} 键值
  * @param val {HeadLocalStorageItem} 保存值
  * */
-var setLocalStorageSelectHead = function setLocalStorageSelectHead(key, val) {
-  var headJsonStr = window.localStorage.getItem('_paraui_table_head') || '{}';
-  var headJson = JSON.parse(headJsonStr);
+const setLocalStorageSelectHead = (key, val) => {
+  const headJsonStr = window.localStorage.getItem('_paraui_table_head') || '{}';
+  const headJson = JSON.parse(headJsonStr);
   headJson[key] = val;
   window.localStorage.setItem('_paraui_table_head', JSON.stringify(headJson));
 };
@@ -166,8 +167,8 @@ var setLocalStorageSelectHead = function setLocalStorageSelectHead(key, val) {
  * @param el 当前元素
  * @param selector 查找元素class
  */
-var closest = function closest(el, selector) {
-  var matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
+const closest = (el, selector) => {
+  const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
   while (el) {
     if (matchesSelector.call(el, selector)) {
       break;
@@ -363,70 +364,50 @@ var zh = {
 };
 
 var localeJson = {
-  zh: zh,
-  en: en
+  zh,
+  en
 };
 
-var TableHead$1 = function TableHead(props) {
-  var _props$headData = props.headData,
-    headData = _props$headData === void 0 ? [] : _props$headData,
-    sortTable = props.sortTable,
-    filter = props.filter,
-    expandable = props.expandable,
-    check = props.check,
-    radio = props.radio,
-    onRequestSort = props.onRequestSort,
-    _props$orderFieldArr = props.orderFieldArr,
-    orderFieldArr = _props$orderFieldArr === void 0 ? [] : _props$orderFieldArr,
-    _props$orderTypeArr = props.orderTypeArr,
-    orderTypeArr = _props$orderTypeArr === void 0 ? [] : _props$orderTypeArr,
-    selectAll = props.selectAll,
-    selectStatus = props.selectStatus,
-    align = props.align,
-    _props$showList = props.showList,
-    showList = _props$showList === void 0 ? [] : _props$showList,
-    changeShowList = props.changeShowList,
-    selectFilter = props.selectFilter,
-    changeFilter = props.changeFilter,
-    operate = props.operate,
-    showColumns = props.showColumns,
-    fixedTable = props.fixedTable,
-    fixedColumn = props.fixedColumn,
-    posFixed = props.posFixed,
-    beyondText = props.beyondText,
-    lineWidth = props.lineWidth,
-    dragColumn = props.dragColumn,
-    dragRow = props.dragRow,
-    changeColumnWidth = props.changeColumnWidth,
-    headDataConfig = props.headDataConfig,
-    getPopupContainer = props.getPopupContainer,
-    tipMaxWidth = props.tipMaxWidth;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    indeterminate = _useState2[0],
-    setIndeterminate = _useState2[1]; // 半选中
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    checked = _useState4[0],
-    setChecked = _useState4[1]; // 选中
-  var _useState5 = useState(null),
-    _useState6 = _slicedToArray(_useState5, 2),
-    anchorElColums = _useState6[0],
-    setAnchorElColums = _useState6[1]; // 显示列定位元素
-  var _useState7 = useState({}),
-    _useState8 = _slicedToArray(_useState7, 2),
-    headDataJson = _useState8[0],
-    setHeadDataJson = _useState8[1]; // 显示列json
-  var _useState9 = useState({}),
-    _useState10 = _slicedToArray(_useState9, 2),
-    filterHead = _useState10[0],
-    setFilterHead = _useState10[1]; // 过滤项当前表头数据
-  var _useState11 = useState({}),
-    _useState12 = _slicedToArray(_useState11, 2),
-    selectFilterCom = _useState12[0],
-    setSelectFilterCom = _useState12[1]; // 过滤项当前选中值
-  var intl = useFormatMessage('Table', localeJson);
-  useEffect(function () {
+const TableHead$1 = props => {
+  const {
+    headData = [],
+    sortTable,
+    filter,
+    expandable,
+    check,
+    radio,
+    onRequestSort,
+    orderFieldArr = [],
+    orderTypeArr = [],
+    selectAll,
+    selectStatus,
+    align,
+    showList = [],
+    changeShowList,
+    selectFilter,
+    changeFilter,
+    operate,
+    showColumns,
+    fixedTable,
+    fixedColumn,
+    posFixed,
+    beyondText,
+    lineWidth,
+    dragColumn,
+    dragRow,
+    changeColumnWidth,
+    headDataConfig,
+    getPopupContainer,
+    tipMaxWidth
+  } = props;
+  const [indeterminate, setIndeterminate] = useState(false); // 半选中
+  const [checked, setChecked] = useState(false); // 选中
+  const [anchorElColums, setAnchorElColums] = useState(null); // 显示列定位元素
+  const [headDataJson, setHeadDataJson] = useState({}); // 显示列json
+  const [filterHead, setFilterHead] = useState({}); // 过滤项当前表头数据
+  const [selectFilterCom, setSelectFilterCom] = useState({}); // 过滤项当前选中值
+  const intl = useFormatMessage('Table', localeJson);
+  useEffect(() => {
     // 全选
     if (selectStatus === 'all') {
       setChecked(true);
@@ -443,17 +424,17 @@ var TableHead$1 = function TableHead(props) {
       setIndeterminate(false);
     }
   }, [selectStatus]);
-  useEffect(function () {
+  useEffect(() => {
     if (headData) {
-      var json = [];
-      for (var i = 0, l = headData.length; i < l; i++) {
-        var item = headData[i];
+      const json = [];
+      for (let i = 0, l = headData.length; i < l; i++) {
+        const item = headData[i];
         json[item.name] = item;
       }
       setHeadDataJson(json);
     }
   }, [headData]);
-  useEffect(function () {
+  useEffect(() => {
     if (selectFilter) setSelectFilterCom(DeepClone(selectFilter));
   }, [selectFilter]);
   /**
@@ -461,30 +442,28 @@ var TableHead$1 = function TableHead(props) {
    * @param name 排序列
    * @param event 当前排序元素
    */
-  var createSortHandler = function createSortHandler(name, item) {
-    return function (event) {
-      // 不存在排序,不触发事件
-      if (!(sortTable && item.name && item.sort !== false)) return;
-      if (onRequestSort) onRequestSort(event, name);
-    };
+  const createSortHandler = (name, item) => event => {
+    // 不存在排序,不触发事件
+    if (!(sortTable && item.name && item.sort !== false)) return;
+    if (onRequestSort) onRequestSort(event, name);
   };
   /**
    * 全选 / 全不选
    * @param event 操作元素
    * @param bol 选中 / 不选中
    */
-  var onSelectAll = function onSelectAll(event, bol) {
+  const onSelectAll = (event, bol) => {
     if (selectAll) selectAll(event, bol);
   };
   /**
    * 点击显示选择列
    * @param event 点击元素
    */
-  var clickShowColums = function clickShowColums(event) {
+  const clickShowColums = event => {
     setAnchorElColums(event.currentTarget);
   };
   // 点击隐藏选择列
-  var clickHideColums = function clickHideColums(bol) {
+  const clickHideColums = bol => {
     if (bol) return;
     setAnchorElColums(null);
   };
@@ -492,29 +471,27 @@ var TableHead$1 = function TableHead(props) {
    * 点击显示列 列表
    * @param item 详细
    */
-  var clickColumsList = function clickColumsList(item) {
-    return function () {
-      if (item.disabledSelection) return;
-      var name = item.name;
-      var itemHead = headDataJson[name];
-      if (itemHead) {
-        // 取消勾选
-        delete headDataJson[name];
-        var arr = Object.keys(headDataJson);
-        var arr1 = [];
-        for (var i = 0, l = arr.length; i < l; i++) {
-          var _name = arr[i];
-          arr1.push(headDataJson[_name]);
-        }
-        changeShowList && changeShowList(arr1, false, item);
-      } else {
-        headData.push(item);
-        changeShowList && changeShowList(headData, false, item);
+  const clickColumsList = item => () => {
+    if (item.disabledSelection) return;
+    const name = item.name;
+    const itemHead = headDataJson[name];
+    if (itemHead) {
+      // 取消勾选
+      delete headDataJson[name];
+      const arr = Object.keys(headDataJson);
+      const arr1 = [];
+      for (let i = 0, l = arr.length; i < l; i++) {
+        const name = arr[i];
+        arr1.push(headDataJson[name]);
       }
-    };
+      changeShowList && changeShowList(arr1, false, item);
+    } else {
+      headData.push(item);
+      changeShowList && changeShowList(headData, false, item);
+    }
   };
   // 重置显示列
-  var resetShowList = function resetShowList() {
+  const resetShowList = () => {
     changeShowList && changeShowList(headData, true);
   };
   /**
@@ -522,69 +499,63 @@ var TableHead$1 = function TableHead(props) {
    * @param headCell 当前列信息
    * @param event 元素
    */
-  var clickShowFilter = function clickShowFilter(headCell) {
-    return function (event) {
-      setFilterHead(headCell);
-      setSelectFilterCom(Object.assign({}, selectFilter));
-    };
+  const clickShowFilter = headCell => event => {
+    setFilterHead(headCell);
+    setSelectFilterCom(Object.assign({}, selectFilter));
   };
   // 点击隐藏过滤
-  var clickHideFilter = function clickHideFilter(bol) {
+  const clickHideFilter = bol => {
     if (bol) return;
     setFilterHead({});
     setSelectFilterCom(Object.assign({}, selectFilter));
   };
   // 点击过滤
-  var clickFilter = function clickFilter(item) {
-    return function () {
-      var name = filterHead.name;
-      var filterValue = DeepClone(selectFilterCom[name] || []);
-      var index = filterValue.indexOf(item.value);
-      if (index !== -1) {
-        // 勾选 -> 不勾选
-        filterValue.splice(index, 1);
-      } else {
-        // 不勾选 -> 勾选
-        filterValue.push(item.value);
-      }
-      var filterRadio = filterHead.filterRadio;
-      if (filterRadio) {
-        // 过滤单个
-        var num = filterValue.indexOf(item.value);
-        if (num !== -1) {
-          filterValue = [filterValue[num]];
-        }
+  const clickFilter = item => () => {
+    const name = filterHead.name;
+    let filterValue = DeepClone(selectFilterCom[name] || []);
+    const index = filterValue.indexOf(item.value);
+    if (index !== -1) {
+      // 勾选 -> 不勾选
+      filterValue.splice(index, 1);
+    } else {
+      // 不勾选 -> 勾选
+      filterValue.push(item.value);
+    }
+    const filterRadio = filterHead.filterRadio;
+    if (filterRadio) {
+      // 过滤单个
+      const num = filterValue.indexOf(item.value);
+      if (num !== -1) {
+        filterValue = [filterValue[num]];
       }
-      selectFilterCom[name] = filterValue;
-      setSelectFilterCom(Object.assign({}, selectFilterCom));
-    };
+    }
+    selectFilterCom[name] = filterValue;
+    setSelectFilterCom(Object.assign({}, selectFilterCom));
   };
   /**
    * 重置 / 确定过滤
    * @param type {'reset' | 'confirm'}  重置 / 确定过滤
    */
-  var filterFunc = function filterFunc(type) {
-    return function () {
-      if (type === 'confirm') {
-        // 确定
-        changeFilter && changeFilter(Object.assign({}, selectFilterCom));
-        setFilterHead({});
-      } else {
-        // 重置
-        var json = DeepClone(selectFilterCom);
-        delete json[filterHead.name];
-        setSelectFilterCom(json);
-        changeFilter && changeFilter(Object.assign({}, json));
-        setFilterHead({});
-      }
-    };
+  const filterFunc = type => () => {
+    if (type === 'confirm') {
+      // 确定
+      changeFilter && changeFilter(Object.assign({}, selectFilterCom));
+      setFilterHead({});
+    } else {
+      // 重置
+      const json = DeepClone(selectFilterCom);
+      delete json[filterHead.name];
+      setSelectFilterCom(json);
+      changeFilter && changeFilter(Object.assign({}, json));
+      setFilterHead({});
+    }
   };
   /**
    * 自定义过滤确定
    * @param val {[name: string]: any[]}
    * */
-  var filterCustomConfirm = function filterCustomConfirm() {
-    var val = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const filterCustomConfirm = function () {
+    let val = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     changeFilter && changeFilter(Object.assign({}, val));
     setFilterHead({});
   };
@@ -592,12 +563,12 @@ var TableHead$1 = function TableHead(props) {
    * 处理TableCell
    * @param item 当前列信息
    */
-  var handCellClass = function handCellClass(item) {
-    var str = 'table-header-box';
+  const handCellClass = item => {
+    let str = 'table-header-box';
     // 排序
     if (sortTable && item.name && item.sort !== false) {
       str += ' table-header-box-sort';
-      var index = orderFieldArr.indexOf(item.name);
+      const index = orderFieldArr.indexOf(item.name);
       if (index !== -1) {
         // 升序
         if (orderTypeArr[index] === 'asc') {
@@ -616,10 +587,10 @@ var TableHead$1 = function TableHead(props) {
     return str;
   };
   // 复选框memo
-  var TableCheckMemo = useMemo(function () {
+  const TableCheckMemo = useMemo(() => {
     if (check) {
-      var handCls = function handCls() {
-        var str = 'table-checkbox table-head-btn';
+      const handCls = () => {
+        let str = 'table-checkbox table-head-btn';
         if (fixedColumn) {
           str += ' table-fixed-dom-left';
           // 左边没有定位,且没有单选,没有嵌套表格
@@ -647,10 +618,10 @@ var TableHead$1 = function TableHead(props) {
     }
   }, [check, indeterminate, checked, selectAll, posFixed, radio, expandable, fixedColumn]);
   // 单选框memo
-  var TableRadioMemo = useMemo(function () {
+  const TableRadioMemo = useMemo(() => {
     if (radio) {
-      var handCls = function handCls() {
-        var str = 'table-radio table-head-btn';
+      const handCls = () => {
+        let str = 'table-radio table-head-btn';
         if (fixedColumn) {
           str += ' table-fixed-dom-left';
           // 左边没有定位,没有嵌套表格
@@ -672,10 +643,10 @@ var TableHead$1 = function TableHead(props) {
     }
   }, [radio, posFixed, expandable, fixedColumn]);
   // 嵌套表格memo
-  var TableExpandableMemo = useMemo(function () {
+  const TableExpandableMemo = useMemo(() => {
     if (expandable) {
-      var handCls = function handCls() {
-        var str = 'table-expandable table-head-btn';
+      const handCls = () => {
+        let str = 'table-expandable table-head-btn';
         if (fixedColumn) {
           str += ' table-fixed-dom-left';
           // 左边没有定位,没有嵌套表格
@@ -697,21 +668,21 @@ var TableHead$1 = function TableHead(props) {
     }
   }, [expandable, posFixed, fixedColumn]);
   // 过滤弹窗内容
-  var filterPopoverContent = function filterPopoverContent() {
-    var name = filterHead.name;
+  const filterPopoverContent = () => {
+    const name = filterHead.name;
     if (!name) return;
-    var filterValue = selectFilterCom[name] || [];
+    const filterValue = selectFilterCom[name] || [];
     if (filterHead.filterRender) {
       // 自定义渲染过滤
       return filterHead.filterRender({
-        filterValue: filterValue,
+        filterValue,
         selectFilter: selectFilterCom,
-        filterHead: filterHead,
+        filterHead,
         setFilter: filterCustomConfirm
       });
     }
-    var arr = filterHead.enums || [];
-    var str = 'filter-select';
+    const arr = filterHead.enums || [];
+    let str = 'filter-select';
     if (arr.length === 0) str += ' filter-select-none';
     return jsx("div", Object.assign({
       className: str
@@ -726,8 +697,8 @@ var TableHead$1 = function TableHead(props) {
         children: [jsx("div", Object.assign({
           className: "filter-select-box"
         }, {
-          children: arr.map(function (item, index) {
-            var checked = filterValue.indexOf(item.value) !== -1;
+          children: arr.map((item, index) => {
+            const checked = filterValue.indexOf(item.value) !== -1;
             return jsxs("div", Object.assign({
               onClick: clickFilter(item),
               className: checked ? 'filter-select-item filter-select-item-select' : 'filter-select-item'
@@ -766,30 +737,28 @@ var TableHead$1 = function TableHead(props) {
     }));
   };
   // 表格列拖拽放下
-  var onDragDown = function onDragDown(headCell) {
-    return function (result) {
-      changeColumnWidth && changeColumnWidth(headCell, result);
-    };
+  const onDragDown = headCell => result => {
+    changeColumnWidth && changeColumnWidth(headCell, result);
   };
   // 获取宽度
-  var getWidth = function getWidth(item) {
-    var w = item.width || '';
-    var name = item.name || '';
-    var wDrag = headDataConfig[name] && headDataConfig[name].width;
+  const getWidth = item => {
+    let w = item.width || '';
+    const name = item.name || '';
+    const wDrag = headDataConfig[name] && headDataConfig[name].width;
     if (wDrag) w = "".concat(wDrag, "px");
     return w;
   };
   // 内容列memo
-  var TableContentMemo = useMemo(function () {
+  const TableContentMemo = useMemo(() => {
     // 处理过滤的class
-    var handFilterClass = function handFilterClass(item) {
-      var str = 'table-header-filter';
+    const handFilterClass = item => {
+      let str = 'table-header-filter';
       if (filterHead.name === item.name) str += ' table-header-filter-show';
       if (item.name && selectFilterCom[item.name] && selectFilterCom[item.name].length > 0) str += ' table-header-filter-select';
       return str;
     };
-    var handCls = function handCls(item) {
-      var str = '';
+    const handCls = item => {
+      let str = '';
       if (item.className) str += item.className;
       if (fixedColumn && item.fixed) {
         str += " table-fixed-dom-".concat(item.fixed);
@@ -804,8 +773,8 @@ var TableHead$1 = function TableHead(props) {
       }
       return str;
     };
-    var handStyle = function handStyle(item) {
-      var json = {
+    const handStyle = item => {
+      const json = {
         width: getWidth(item)
       };
       if (fixedColumn && item.fixed && item.width) {
@@ -819,13 +788,13 @@ var TableHead$1 = function TableHead(props) {
       return Object.assign(Object.assign({}, json), item.style);
     };
     // 处理拖拽
-    var handDrag = function handDrag(item) {
+    const handDrag = item => {
       if (item.name === 'table-serial-number') return false; // 序号不拖拽
       if (dragColumn && item.drag !== false) return true;
       return false;
     };
-    return headData.map(function (headCell, index) {
-      var str = "".concat($prefixCls, "-filter-popover ").concat($prefixCls, "-scrollbar-small");
+    return headData.map((headCell, index) => {
+      let str = "".concat($prefixCls, "-filter-popover ").concat($prefixCls, "-scrollbar-small");
       if (!headCell.filterRender) str += " ".concat($prefixCls, "-filter-popover-default");
       return jsx(ThElement, Object.assign({
         className: handCls(headCell),
@@ -845,9 +814,7 @@ var TableHead$1 = function TableHead(props) {
           content: headCell.name !== undefined && filterHead.name === headCell.name && filterPopoverContent(),
           onVisibleChange: clickHideFilter,
           overlayClassName: str,
-          getPopupContainer: getPopupContainer ? getPopupContainer : function () {
-            return document.body;
-          },
+          getPopupContainer: getPopupContainer ? getPopupContainer : () => document.body,
           maxWidth: headCell.filterMaxWidth
         }, {
           children: jsxs("div", Object.assign({
@@ -892,10 +859,10 @@ var TableHead$1 = function TableHead(props) {
     });
   }, [headData, sortTable, filter, orderFieldArr, orderTypeArr, align, filterHead, selectFilterCom, beyondText, selectFilter, fixedColumn, lineWidth, dragColumn, changeColumnWidth, headDataConfig, getPopupContainer, tipMaxWidth]);
   // 操作栏memo
-  var TableOperateMemo = useMemo(function () {
+  const TableOperateMemo = useMemo(() => {
     if (operate) {
-      var handCls = function handCls() {
-        var str = 'table-operate';
+      const handCls = () => {
+        let str = 'table-operate';
         if (operate.operateBtnRender) str += ' table-operate-small';
         if (showColumns === false) str += ' table-operate-not-columns';
         if (dragRow) str += ' table-operate-drag-row';
@@ -908,8 +875,8 @@ var TableHead$1 = function TableHead(props) {
         }
         return str;
       };
-      var handStyle = function handStyle() {
-        var json = {
+      const handStyle = () => {
+        const json = {
           width: operate.width
         };
         if (fixedColumn) {
@@ -945,16 +912,16 @@ var TableHead$1 = function TableHead(props) {
     }
   }, [operate, align, posFixed, showColumns, posFixed, beyondText, fixedColumn, tipMaxWidth, dragRow]);
   // 显示列弹窗内容
-  var showListContent = function showListContent() {
+  const showListContent = () => {
     return jsxs("div", Object.assign({
       className: "show-colums-select"
     }, {
       children: [jsx("div", Object.assign({
         className: "show-colums-select-box"
       }, {
-        children: showList.map(function (item, index) {
-          var checked = Boolean(headDataJson[item.name]);
-          var str = 'show-colums-select-item';
+        children: showList.map((item, index) => {
+          const checked = Boolean(headDataJson[item.name]);
+          let str = 'show-colums-select-item';
           if (checked) str += ' show-colums-select-item-select';
           if (item.disabledSelection) str += ' show-colums-select-item-disabled';
           return jsxs("div", Object.assign({
@@ -988,9 +955,9 @@ var TableHead$1 = function TableHead(props) {
     }));
   };
   // 显示列memo
-  var TableShowList = useMemo(function () {
-    var handCls = function handCls() {
-      var str = 'show-colums table-fixed-dom-right';
+  const TableShowList = useMemo(() => {
+    const handCls = () => {
+      let str = 'show-colums table-fixed-dom-right';
       // 没有固定列参数 或者 没有操作栏且没有右侧固定列
       if (!fixedColumn || !operate && !(posFixed === null || posFixed === void 0 ? void 0 : posFixed.rightBol)) {
         str += ' table-fixed-dom-right-first';
@@ -1003,9 +970,7 @@ var TableHead$1 = function TableHead(props) {
       content: showListContent(),
       onVisibleChange: clickHideColums,
       overlayClassName: "".concat($prefixCls, "-table-show-colums-popover ").concat($prefixCls, "-scrollbar-small"),
-      getPopupContainer: getPopupContainer ? getPopupContainer : function () {
-        return document.body;
-      }
+      getPopupContainer: getPopupContainer ? getPopupContainer : () => document.body
     }, {
       children: jsx(ThElement, Object.assign({
         align: "center",
@@ -1022,10 +987,10 @@ var TableHead$1 = function TableHead(props) {
     }));
   }, [showColumns, posFixed, operate, anchorElColums, showList, headDataJson, getPopupContainer, tipMaxWidth]);
   // 拖动行
-  var TbaleDragRow = useMemo(function () {
+  const TbaleDragRow = useMemo(() => {
     if (!dragRow || operate || showColumns === 'inside') return null;
-    var handCls = function handCls() {
-      var str = 'drag-row table-fixed-dom-right';
+    const handCls = () => {
+      let str = 'drag-row table-fixed-dom-right';
       // 没有固定列参数 或者 没有操作栏且没有右侧固定列
       if (!fixedColumn || !operate && !(posFixed === null || posFixed === void 0 ? void 0 : posFixed.rightBol)) {
         str += ' table-fixed-dom-right-first';
@@ -1039,8 +1004,8 @@ var TableHead$1 = function TableHead(props) {
     });
   }, [operate, showColumns, fixedColumn, posFixed, dragRow]);
   // 处理class
-  var handClass = function handClass() {
-    var str = 'table-head';
+  const handClass = () => {
+    let str = 'table-head';
     if (showColumns === 'inside') str += ' table-head-inside';
     if (!fixedTable) str += ' table-head-scroll'; // 防止长度过长
     // 没有 复选框,单选框,展开 按钮
@@ -1118,98 +1083,76 @@ var TdElement = function TdElement(props) {
   }));
 };
 
-var TableBody = function TableBody(props) {
-  var url = props.url,
-    emptyProps = props.emptyProps,
-    _props$rowData = props.rowData,
-    rowData = _props$rowData === void 0 ? [] : _props$rowData,
-    _props$rowKey = props.rowKey,
-    rowKey = _props$rowKey === void 0 ? 'key' : _props$rowKey,
-    check = props.check,
-    radio = props.radio,
-    tableCell = props.tableCell,
-    expandable = props.expandable,
-    _props$headData = props.headData,
-    headData = _props$headData === void 0 ? [] : _props$headData,
-    _props$disabledJson = props.disabledJson,
-    disabledJson = _props$disabledJson === void 0 ? {} : _props$disabledJson,
-    disabledArrStatus = props.disabledArrStatus,
-    _props$checkJson = props.checkJson,
-    checkJson = _props$checkJson === void 0 ? {} : _props$checkJson,
-    radioValue = props.radioValue,
-    selectCheck = props.selectCheck,
-    selectRadio = props.selectRadio,
-    align = props.align,
-    operate = props.operate,
-    showColumns = props.showColumns,
-    fixedTable = props.fixedTable,
-    fixedColumn = props.fixedColumn,
-    formatter = props.formatter,
-    _props$orderFieldArr = props.orderFieldArr,
-    orderFieldArr = _props$orderFieldArr === void 0 ? [] : _props$orderFieldArr,
-    _props$orderTypeArr = props.orderTypeArr,
-    orderTypeArr = _props$orderTypeArr === void 0 ? [] : _props$orderTypeArr,
-    sortTable = props.sortTable,
-    loadState = props.loadState,
-    loadMore = props.loadMore,
-    loadMoreRender = props.loadMoreRender,
-    onClickMore = props.onClickMore,
-    total = props.total,
-    page = props.page,
-    currentRowsPerPage = props.currentRowsPerPage,
-    changePage = props.changePage,
-    loadMoreUrl = props.loadMoreUrl,
-    _props$expandMultiple = props.expandMultiple,
-    expandMultiple = _props$expandMultiple === void 0 ? false : _props$expandMultiple,
-    _props$expandValue = props.expandValue,
-    expandValue = _props$expandValue === void 0 ? [] : _props$expandValue,
-    _props$disabledExpand = props.disabledExpand,
-    disabledExpand = _props$disabledExpand === void 0 ? [] : _props$disabledExpand,
-    _props$defaultExpandA = props.defaultExpandAllRows,
-    defaultExpandAllRows = _props$defaultExpandA === void 0 ? false : _props$defaultExpandA,
-    onExpand = props.onExpand,
-    _onRefresh = props.onRefresh,
-    posFixed = props.posFixed,
-    beyondText = props.beyondText,
-    onClickRow = props.onClickRow,
-    rowClassMapping = props.rowClassMapping,
-    tipMaxWidth = props.tipMaxWidth,
-    lineHeight = props.lineHeight,
-    dragRow = props.dragRow,
-    onDragRow = props.onDragRow;
-  var _useState = useState(0),
-    _useState2 = _slicedToArray(_useState, 2),
-    expandableColSpan = _useState2[0],
-    setExpandableColSpan = _useState2[1]; // 嵌套表格合并列数
-  var _useState3 = useState({}),
-    _useState4 = _slicedToArray(_useState3, 2),
-    expandableRow = _useState4[0],
-    setExpandableRow = _useState4[1]; // 当前哪行展开表格嵌套
-  var _useState5 = useState(true),
-    _useState6 = _slicedToArray(_useState5, 2),
-    showMoreBtn = _useState6[0],
-    setShowMoreBtn = _useState6[1]; // 加载更多
-  var _useState7 = useState({}),
-    _useState8 = _slicedToArray(_useState7, 2),
-    disabledExpandJson = _useState8[0],
-    setDisabledExpand = _useState8[1]; // 禁用加减部分嵌套
-  var _useState9 = useState(false),
-    _useState10 = _slicedToArray(_useState9, 2),
-    dragBol = _useState10[0],
-    setDragBol = _useState10[1];
-  var intl = useFormatMessage('Table', localeJson);
+const TableBody = props => {
+  const {
+    url,
+    emptyProps,
+    rowData = [],
+    rowKey = 'key',
+    check,
+    radio,
+    tableCell,
+    expandable,
+    headData = [],
+    disabledJson = {},
+    disabledArrStatus,
+    checkJson = {},
+    radioValue,
+    selectCheck,
+    selectRadio,
+    align,
+    operate,
+    showColumns,
+    fixedTable,
+    fixedColumn,
+    formatter,
+    orderFieldArr = [],
+    orderTypeArr = [],
+    sortTable,
+    loadState,
+    loadMore,
+    loadMoreRender,
+    onClickMore,
+    total,
+    page,
+    currentRowsPerPage,
+    changePage,
+    loadMoreUrl,
+    expandMultiple = false,
+    expandValue = [],
+    disabledExpand = [],
+    defaultExpandAllRows = false,
+    onExpand,
+    onRefresh,
+    posFixed,
+    beyondText,
+    onClickRow,
+    rowClassMapping,
+    tipMaxWidth,
+    lineHeight,
+    dragRow,
+    onDragRow,
+    virtualIndex,
+    virtual
+  } = props;
+  const [expandableColSpan, setExpandableColSpan] = useState(0); // 嵌套表格合并列数
+  const [expandableRow, setExpandableRow] = useState({}); // 当前哪行展开表格嵌套
+  const [showMoreBtn, setShowMoreBtn] = useState(true); // 加载更多
+  const [disabledExpandJson, setDisabledExpand] = useState({}); // 禁用加减部分嵌套
+  const [dragBol, setDragBol] = useState(false);
+  const intl = useFormatMessage('Table', localeJson);
   // 默认是否展开所有
-  useEffect(function () {
+  useEffect(() => {
     if (!defaultExpandAllRows) {
       setExpandableRow({});
       return;
     }
-    var json = {};
-    for (var i = 0, l = rowData.length; i < l; i++) {
-      var item = rowData[i] || {};
-      var id = item[rowKey];
+    const json = {};
+    for (let i = 0, l = rowData.length; i < l; i++) {
+      const item = rowData[i] || {};
+      const id = item[rowKey];
       json[id] = {
-        id: id,
+        id,
         status: 'develop'
       };
     }
@@ -1217,41 +1160,41 @@ var TableBody = function TableBody(props) {
   }, [defaultExpandAllRows, rowData, rowKey]);
   // 监听展开表格
   // 如果直接写expandMultiple, expandValue会死循环
-  useEffect(function () {
+  useEffect(() => {
     if (props.expandValue === undefined) return;
-    var json = {};
-    var expandValueHand = expandValue;
+    const json = {};
+    let expandValueHand = expandValue;
     // 只展开一个,去第一个值
     if (!expandMultiple && expandValue.length > 0) {
       expandValueHand = [expandValue[0]];
     }
-    for (var i = 0, l = expandValueHand.length; i < l; i++) {
-      var id = expandValueHand[i];
+    for (let i = 0, l = expandValueHand.length; i < l; i++) {
+      const id = expandValueHand[i];
       json[id] = {
-        id: id,
+        id,
         status: 'develop'
       };
     }
     setExpandableRow(json);
   }, [props.expandMultiple, props.expandValue, rowData]);
   // 监听禁用嵌套 props.disabledExpand 防止死循环
-  useEffect(function () {
-    var json = {};
-    for (var i = 0, l = disabledExpand.length; i < l; i++) {
-      var id = disabledExpand[i];
+  useEffect(() => {
+    const json = {};
+    for (let i = 0, l = disabledExpand.length; i < l; i++) {
+      const id = disabledExpand[i];
       json[id] = true;
     }
     setDisabledExpand(json);
   }, [props.disabledExpand]);
-  useEffect(function () {
+  useEffect(() => {
     if (loadMoreUrl) {
-      var bol = Number(total) > Number(page) * Number(currentRowsPerPage);
+      const bol = Number(total) > Number(page) * Number(currentRowsPerPage);
       setShowMoreBtn(bol);
     }
   }, [loadMoreUrl, total, page, currentRowsPerPage]);
   // 处理嵌套表格合并列数
-  useEffect(function () {
-    var num = headData.length;
+  useEffect(() => {
+    let num = headData.length;
     if (expandable) num += 1;
     if (check) num += 1;
     if (radio) num += 1;
@@ -1260,55 +1203,55 @@ var TableBody = function TableBody(props) {
     setExpandableColSpan(num);
   }, [headData, expandable, check, radio]);
   // 展开/收起嵌套表格
-  var handClickNestTable = function handClickNestTable(row) {
-    return function (event) {
-      var id = row[rowKey];
-      var expandItem = expandableRow[id] || {};
-      var status = 'develop';
-      if (expandItem.status === 'develop') status = 'retract';
-      expandItem = {
-        id: id,
-        status: status
-      };
-      if (expandMultiple) {
-        // 展开多个
-        expandableRow[id] = expandItem;
-        setExpandableRow(Object.assign({}, expandableRow));
-      } else {
-        // 展开一个
-        setExpandableRow(_defineProperty({}, id, expandItem));
-      }
-      onExpand && onExpand(row, status);
-      event.stopPropagation();
+  const handClickNestTable = row => event => {
+    const id = row[rowKey];
+    let expandItem = expandableRow[id] || {};
+    let status = 'develop';
+    if (expandItem.status === 'develop') status = 'retract';
+    expandItem = {
+      id,
+      status
     };
+    if (expandMultiple) {
+      // 展开多个
+      expandableRow[id] = expandItem;
+      setExpandableRow(Object.assign({}, expandableRow));
+    } else {
+      // 展开一个
+      setExpandableRow({
+        [id]: expandItem
+      });
+    }
+    onExpand && onExpand(row, status);
+    event.stopPropagation();
   };
   // 处理class
-  var handClass = function handClass() {
-    var str = 'table-body';
+  const handClass = () => {
+    let str = 'table-body';
     if (!fixedTable) str += ' table-body-scroll';
     // 没有 复选框,单选框,展开 按钮
     if (!check && !radio && !expandable) str += ' table-body-no-btn';
     return str;
   };
   // 处理嵌套表格class
-  var handExpandClass = function handExpandClass(row) {
-    var id = row[rowKey];
-    var expandItem = expandableRow[id] || {};
-    var str = 'retract';
+  const handExpandClass = row => {
+    const id = row[rowKey];
+    const expandItem = expandableRow[id] || {};
+    let str = 'retract';
     if (expandItem.status === 'develop') {
       str = 'expand';
     }
     return str;
   };
   // 点击加载更多
-  var clickMore = function clickMore() {
+  const clickMore = () => {
     if (loadMoreUrl) changePage && changePage();
     onClickMore && onClickMore();
   };
   // 暂无数据memo
-  var NodataMemo = useMemo(function () {
+  const NodataMemo = useMemo(() => {
     // 处理刷新按钮
-    var handRefreshBtn = function handRefreshBtn() {
+    const handRefreshBtn = () => {
       if ((emptyProps === null || emptyProps === void 0 ? void 0 : emptyProps.showRefresh) !== undefined) {
         return emptyProps === null || emptyProps === void 0 ? void 0 : emptyProps.showRefresh;
       }
@@ -1318,7 +1261,7 @@ var TableBody = function TableBody(props) {
       return false;
     };
     // 处理非首页非空状态
-    var handleDescription = function handleDescription() {
+    const handleDescription = () => {
       if (emptyProps === null || emptyProps === void 0 ? void 0 : emptyProps.description) return emptyProps === null || emptyProps === void 0 ? void 0 : emptyProps.description;
       if (Number(page) > 1) {
         return jsxs("div", Object.assign({
@@ -1336,7 +1279,7 @@ var TableBody = function TableBody(props) {
             children: jsx(Button, Object.assign({
               variant: "text",
               size: "small",
-              onClick: function onClick() {
+              onClick: () => {
                 changePage && changePage(Number(page) - 1);
               }
             }, {
@@ -1349,8 +1292,8 @@ var TableBody = function TableBody(props) {
       }
     };
     // 处理className
-    var handClassNoData = function handClassNoData() {
-      var str = 'table-no-data';
+    const handClassNoData = () => {
+      let str = 'table-no-data';
       if (emptyProps === null || emptyProps === void 0 ? void 0 : emptyProps.size) str += " table-no-data-".concat(emptyProps === null || emptyProps === void 0 ? void 0 : emptyProps.size);
       return str;
     };
@@ -1364,24 +1307,24 @@ var TableBody = function TableBody(props) {
         children: jsx(Empty, Object.assign({}, emptyProps, {
           description: handleDescription(),
           showRefresh: handRefreshBtn(),
-          onRefresh: function onRefresh(event) {
+          onRefresh: event => {
             if (emptyProps === null || emptyProps === void 0 ? void 0 : emptyProps.onRefresh) {
               emptyProps === null || emptyProps === void 0 ? void 0 : emptyProps.onRefresh(event);
               return;
             }
-            _onRefresh && _onRefresh();
+            onRefresh && onRefresh();
           }
         }))
       }))
     }));
-  }, [expandableColSpan, emptyProps, url, _onRefresh, page, changePage]);
+  }, [expandableColSpan, emptyProps, url, onRefresh, page, changePage]);
   // 复选框useCallback
-  var TableCheckCallback = useCallback(function (row) {
+  const TableCheckCallback = useCallback(row => {
     if (check) {
-      var handId = row[rowKey];
-      var disabledHand = Boolean(disabledJson[handId]);
-      var checkHand = checkJson[handId] || false;
-      var showCheck = true;
+      const handId = row[rowKey];
+      const disabledHand = Boolean(disabledJson[handId]);
+      let checkHand = checkJson[handId] || false;
+      let showCheck = true;
       if (disabledHand && disabledArrStatus) {
         // 选中
         if (disabledArrStatus[handId] === true) {
@@ -1396,8 +1339,8 @@ var TableBody = function TableBody(props) {
           showCheck = false;
         }
       }
-      var handCls = function handCls() {
-        var str = 'table-checkbox table-body-btn';
+      const handCls = () => {
+        let str = 'table-checkbox table-body-btn';
         if (fixedColumn) {
           str += ' table-fixed-dom-left';
           // 左边没有定位,且没有单选,没有嵌套表格
@@ -1414,7 +1357,7 @@ var TableBody = function TableBody(props) {
         children: showCheck && jsx(Checkbox, {
           disabled: disabledHand,
           checked: checkHand,
-          onChange: function onChange(event, bol) {
+          onChange: (event, bol) => {
             event.stopPropagation();
             selectCheck && selectCheck(event, bol, row[rowKey]);
           }
@@ -1423,12 +1366,12 @@ var TableBody = function TableBody(props) {
     }
   }, [check, disabledJson, rowKey, checkJson, selectCheck, disabledArrStatus, posFixed, expandable, radio, fixedColumn]);
   // 单选框useCallback
-  var TableRadioCallback = useCallback(function (row) {
+  const TableRadioCallback = useCallback(row => {
     if (radio) {
-      var handId = row[rowKey];
-      var disabledHand = Boolean(disabledJson[handId]);
-      var checkHand = radioValue === row[rowKey];
-      var showRadio = true;
+      const handId = row[rowKey];
+      const disabledHand = Boolean(disabledJson[handId]);
+      let checkHand = radioValue === row[rowKey];
+      let showRadio = true;
       if (disabledHand && disabledArrStatus) {
         // 选中
         if (disabledArrStatus[handId] === true) {
@@ -1443,8 +1386,8 @@ var TableBody = function TableBody(props) {
           showRadio = false;
         }
       }
-      var handCls = function handCls() {
-        var str = 'table-radio table-body-btn';
+      const handCls = () => {
+        let str = 'table-radio table-body-btn';
         if (fixedColumn) {
           str += ' table-fixed-dom-left';
           // 左边没有定位,没有嵌套表格
@@ -1461,7 +1404,7 @@ var TableBody = function TableBody(props) {
         children: showRadio && jsx(Radio, {
           disabled: disabledHand,
           checked: checkHand,
-          onChange: function onChange(event) {
+          onChange: event => {
             event.stopPropagation();
             selectRadio && selectRadio(event, row[rowKey]);
           }
@@ -1470,13 +1413,13 @@ var TableBody = function TableBody(props) {
     }
   }, [radio, disabledJson, radioValue, rowKey, selectRadio, disabledArrStatus, expandable, posFixed, fixedColumn]);
   // 嵌套加减useCallback
-  var TableExpandableMemo = useCallback(function (row) {
+  const TableExpandableMemo = useCallback(row => {
     if (!expandable) return null;
-    var expandableDemo = expandable(row);
+    const expandableDemo = expandable(row);
     // 禁用一行表格展开 或者 展开表格返回值为false,返回空列
     if (disabledExpandJson[row[rowKey]] || expandableDemo === false) return jsx(TdElement, {});
-    var handCls = function handCls() {
-      var str = 'table-expandable table-body-btn';
+    const handCls = () => {
+      let str = 'table-expandable table-body-btn';
       if (fixedColumn) {
         str += ' table-fixed-dom-left';
         // 左边没有定位,没有嵌套表格
@@ -1497,17 +1440,17 @@ var TableBody = function TableBody(props) {
     }));
   }, [expandable, expandableRow, rowKey, disabledExpandJson, onExpand, fixedColumn]);
   // 表格一行内容useCallback
-  var TableContentUseCallback = useCallback(function (row, rowIndex) {
-    var params = {
-      orderFieldArr: orderFieldArr,
-      orderTypeArr: orderTypeArr
+  const TableContentUseCallback = useCallback((row, rowIndex) => {
+    const params = {
+      orderFieldArr,
+      orderTypeArr
     };
-    var handContentClass = function handContentClass(item) {
-      var str = 'table-content-columms';
+    const handContentClass = item => {
+      let str = 'table-content-columms';
       if (item.className) str += " ".concat(item.className);
       // 排序
       if (sortTable && item.name && item.sort !== false) {
-        var index = orderFieldArr.indexOf(item.name);
+        const index = orderFieldArr.indexOf(item.name);
         if (index !== -1) {
           // 升序
           if (orderTypeArr[index] === 'asc') {
@@ -1532,8 +1475,8 @@ var TableBody = function TableBody(props) {
       }
       return str;
     };
-    var handStyle = function handStyle(item) {
-      var json = {};
+    const handStyle = item => {
+      const json = {};
       if (fixedColumn && item.fixed && item.width) {
         if (item.fixed === 'left') {
           json.left = "".concat(item.paraui_left_width, "px");
@@ -1544,12 +1487,12 @@ var TableBody = function TableBody(props) {
       }
       return json;
     };
-    return tableCell ? tableCell(row, params) : headData.map(function (item, index) {
-      var text = row[item.name];
-      var colSpan = 1;
+    return tableCell ? tableCell(row, params) : headData.map((item, index) => {
+      let text = row[item.name];
+      let colSpan = 1;
       if (item.render) text = item.render(row, item, row[item.name], index, rowIndex);
       if (formatter) text = formatter(row, item, row[item.name], index, rowIndex);
-      var itemStyle = handStyle(item);
+      const itemStyle = handStyle(item);
       // 存在显示列,最后一列占两格
       if (showColumns === 'inside' && !operate && index === headData.length - 1 && !dragRow) {
         colSpan = 2;
@@ -1573,25 +1516,25 @@ var TableBody = function TableBody(props) {
     });
   }, [tableCell, headData, align, formatter, orderFieldArr, orderTypeArr, sortTable, showColumns, operate, beyondText, fixedColumn, tipMaxWidth, dragRow]);
   // 操作栏useCallback
-  var TableOperateUseCallback = useCallback(function (row, rowIndex) {
+  const TableOperateUseCallback = useCallback((row, rowIndex) => {
     if (operate || dragRow) {
-      var colSpan = 1;
+      let colSpan = 1;
       if (showColumns === 'inside' && operate) colSpan = 2;
-      var handOperate = function handOperate() {
+      const handOperate = () => {
         if (operate === null || operate === void 0 ? void 0 : operate.render) return operate.render(row);
         if (operate === null || operate === void 0 ? void 0 : operate.operateBtnRender) {
-          var operateConfig = operate.operateBtnRender(row, rowIndex);
+          const operateConfig = operate.operateBtnRender(row, rowIndex);
           return jsx(OperateBtn, Object.assign({}, operateConfig));
         }
       };
-      var handStyle = function handStyle() {
-        var json = {
+      const handStyle = () => {
+        const json = {
           right: '0'
         };
         return json;
       };
-      var handCls = function handCls() {
-        var str = 'table-operate';
+      const handCls = () => {
+        let str = 'table-operate';
         if (!operate) str += ' table-operate-center';
         if (fixedColumn) {
           str += ' table-fixed-dom-right';
@@ -1632,11 +1575,11 @@ var TableBody = function TableBody(props) {
     }
   }, [operate, align, showColumns, posFixed, fixedColumn, dragRow, onDragRow, dragBol]);
   // 嵌套表格useCallback
-  var TableExpandableContentUseCallback = useCallback(function (row) {
-    var id = row[rowKey];
-    var expandItem = expandableRow[id] || {};
+  const TableExpandableContentUseCallback = useCallback(row => {
+    const id = row[rowKey];
+    const expandItem = expandableRow[id] || {};
     if (expandable && expandItem.status === 'develop') {
-      var expandableDemo = expandable(row);
+      const expandableDemo = expandable(row);
       if (expandableDemo === false) return null; // 展开表格返回值为false,不展示这一行
       return jsx(TrElement, Object.assign({
         className: "table-body-expand-row"
@@ -1651,7 +1594,7 @@ var TableBody = function TableBody(props) {
     }
   }, [expandable, expandableRow, expandableColSpan, rowKey]);
   // 加载更多
-  var MoreMemo = useMemo(function () {
+  const MoreMemo = useMemo(() => {
     if (!loadMore || !showMoreBtn) return null;
     return jsx(TrElement, Object.assign({
       className: "more-table-row",
@@ -1674,20 +1617,25 @@ var TableBody = function TableBody(props) {
       }))
     }));
   }, [expandableColSpan, loadMore, loadMoreRender, onClickMore, showMoreBtn, changePage, loadMoreUrl, lineHeight]);
-  var TableBodySubjectContentMemo = useMemo(function () {
+  const TableBodySubjectContentMemo = useMemo(() => {
+    let rowDataCom = rowData;
+    if (virtual) {
+      rowDataCom = rowDataCom.slice(virtualIndex[0], virtualIndex[1]);
+    }
     return jsx(Fragment, {
-      children: rowData.map(function (row, index) {
-        var str = 'table-body-row';
+      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,
             style: {
               height: "".concat(lineHeight, "px")
             },
-            onClick: function onClick(e) {
+            onClick: e => {
               onClickRow && onClickRow(row, e);
             }
           }, {
@@ -1696,79 +1644,85 @@ var TableBody = function 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
-  var TableBodyContentMemo = useMemo(function () {
+  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]);
   // 处理内容
-  var handContent = function handContent() {
+  const handContent = () => {
     // 无数据,且不再请求,显示暂无数据
     if (rowData.length === 0 && !loadState) return NodataMemo;
     return TableBodyContentMemo;
   };
-  var handleRowData = function handleRowData() {
-    var arr = [];
+  const handleRowData = () => {
+    const arr = [];
     if (dragRow) {
-      rowData.forEach(function (item) {
-        var obj = {};
+      rowData.forEach(item => {
+        const obj = {};
         obj[rowKey] = item[rowKey];
         arr.push(obj);
       });
     }
     return arr;
   };
-  var onChoose = function onChoose() {
+  const onChoose = () => {
     setDragBol(true);
   };
-  var onDragRowCom = function onDragRowCom(evt) {
+  const onDragRowCom = evt => {
     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()
   }));
 };
 
-var TableHead = function TableHead(props) {
-  var paginationType = props.paginationType,
-    flippingArrow = props.flippingArrow,
-    autoPagination = props.autoPagination,
-    total = props.total,
-    page = props.page,
-    rowsPerPage = props.rowsPerPage,
-    currentRowsPerPage = props.currentRowsPerPage,
-    changePage = props.changePage,
-    changeRowsPerPage = props.changeRowsPerPage,
-    refreshInside = props.refreshInside,
-    checkCount = props.checkCount,
-    onRefresh = props.onRefresh,
-    selectAll = props.selectAll,
-    selectStatus = props.selectStatus,
-    _props$checkNumber = props.checkNumber,
-    checkNumber = _props$checkNumber === void 0 ? 0 : _props$checkNumber,
-    _props$currentPageTot = props.currentPageTotal,
-    currentPageTotal = _props$currentPageTot === void 0 ? 0 : _props$currentPageTot,
-    resizePaginationLine = props.resizePaginationLine;
-  var intl = useFormatMessage('Table', localeJson);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    indeterminate = _useState2[0],
-    setIndeterminate = _useState2[1]; // 半选中
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    checked = _useState4[0],
-    setChecked = _useState4[1]; // 选中
-  useEffect(function () {
+const TableHead = props => {
+  const {
+    paginationType,
+    flippingArrow,
+    autoPagination,
+    total,
+    page,
+    rowsPerPage,
+    currentRowsPerPage,
+    changePage,
+    changeRowsPerPage,
+    refreshInside,
+    checkCount,
+    onRefresh,
+    selectAll,
+    selectStatus,
+    checkNumber = 0,
+    currentPageTotal = 0,
+    resizePaginationLine
+  } = props;
+  const intl = useFormatMessage('Table', localeJson);
+  const [indeterminate, setIndeterminate] = useState(false); // 半选中
+  const [checked, setChecked] = useState(false); // 选中
+  useEffect(() => {
     // 全选
     if (selectStatus === 'all') {
       setChecked(true);
@@ -1790,23 +1744,23 @@ var TableHead = function TableHead(props) {
    * @param event 操作元素
    * @param bol 选中 / 不选中
    */
-  var onSelectAll = function onSelectAll(event, bol) {
+  const onSelectAll = (event, bol) => {
     if (selectAll) selectAll(event, bol);
   };
   // 改变页面
-  var changePageCom = function changePageCom(num) {
+  const changePageCom = num => {
     changePage && changePage(num);
   };
   // 改变每页显示条数
-  var changeRowsPerPageCom = function changeRowsPerPageCom(num) {
+  const changeRowsPerPageCom = num => {
     changeRowsPerPage && changeRowsPerPage(num);
   };
   // 刷新
-  var clickRefresh = function clickRefresh() {
+  const clickRefresh = () => {
     onRefresh && onRefresh();
   };
   // 处理分页右侧
-  var handlePaginationRight = function handlePaginationRight() {
+  const handlePaginationRight = () => {
     if (!checkCount) return null;
     return jsxs("div", Object.assign({
       className: 'table-pagination-right'
@@ -1829,8 +1783,8 @@ var TableHead = function TableHead(props) {
     }));
   };
   // 处理样式
-  var handleClass = function handleClass() {
-    var str = 'table-pagination';
+  const handleClass = () => {
+    const str = 'table-pagination';
     return str;
   };
   return jsxs("div", Object.assign({
@@ -1848,9 +1802,7 @@ var TableHead = function TableHead(props) {
       currentRowsPerPage: currentRowsPerPage,
       changePage: changePageCom,
       changeRowsPerPage: changeRowsPerPageCom,
-      getPopupContainer: function getPopupContainer() {
-        return document.body;
-      },
+      getPopupContainer: () => document.body,
       resizeLine: resizePaginationLine
     }), refreshInside && jsx(Button.IconButton, Object.assign({
       className: 'refresh-btn',
@@ -1865,14 +1817,16 @@ var TableHead = function TableHead(props) {
 var css_248z$2 = ".table-container {\n  overflow-x: auto;\n}";
 styleInject(css_248z$2);
 
-var TableContainer = function TableContainer(props) {
-  var cRef = props.cRef,
-    className = props.className,
-    style = props.style,
-    children = props.children,
+const TableContainer = props => {
+  const {
+      cRef,
+      className,
+      style,
+      children
+    } = props,
     otherProps = __rest(props, ["cRef", "className", "style", "children"]);
-  var handClass = function handClass() {
-    var str = 'table-container';
+  const handClass = () => {
+    let str = 'table-container';
     if (className) str += " ".concat(className);
     return str;
   };
@@ -1888,27 +1842,31 @@ var TableContainer = function TableContainer(props) {
 var css_248z$1 = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.table-element {\n  width: 100%;\n  display: table;\n  border-collapse: separate;\n  border-spacing: 0;\n}\n.table-element.table-element-fixed-column > .table-body-element > .tr-element > .td-element {\n  position: sticky;\n}\n.table-element > .table-head-element > .tr-element > .th-element {\n  position: sticky;\n  top: 0;\n  z-index: 10;\n}\n.table-element > .table-head-element > .tr-element > .th-element.table-fixed-dom-left.table-fixed-dom-left-last::after {\n  height: 100%;\n  width: 30px;\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(100%);\n  content: \"\";\n  transition: box-shadow 0.3s;\n  pointer-events: none;\n}\n.table-element > .table-head-element > .tr-element > .th-element.table-fixed-dom-right.table-fixed-dom-right-first::after {\n  height: 100%;\n  width: 30px;\n  position: absolute;\n  top: 0;\n  left: 0;\n  transform: translate(-100%);\n  content: \"\";\n  transition: box-shadow 0.3s;\n  pointer-events: none;\n}\n.table-element > .table-head-element > .tr-element > .th-element.table-fixed-dom-left {\n  z-index: 11;\n}\n.table-element > .table-head-element > .tr-element > .th-element.table-fixed-dom-right {\n  z-index: 11;\n}\n.table-element > .table-body-element > .tr-element > .td-element {\n  z-index: 1;\n}\n.table-element > .table-body-element > .tr-element > .td-element.table-fixed-dom-left.table-fixed-dom-left-last::after {\n  height: 100%;\n  width: 30px;\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(100%);\n  content: \"\";\n  transition: box-shadow 0.3s;\n  pointer-events: none;\n}\n.table-element > .table-body-element > .tr-element > .td-element.table-fixed-dom-right.table-fixed-dom-right-first::after {\n  height: 100%;\n  width: 30px;\n  position: absolute;\n  top: 0;\n  left: 0;\n  transform: translate(-100%);\n  content: \"\";\n  transition: box-shadow 0.3s;\n  pointer-events: none;\n}\n.table-element > .table-body-element > .tr-element > .td-element.table-fixed-dom-left {\n  z-index: 2;\n}\n.table-element > .table-body-element > .tr-element > .td-element.table-fixed-dom-right {\n  z-index: 2;\n}\n\n.table-scroll-left .table-element > .table-head-element > .tr-element > .th-element.table-fixed-dom-right.table-fixed-dom-right-first::after {\n  box-shadow: inset -10px 0 10px -8px rgb(234, 236, 241);\n}\n.table-scroll-left .table-element > .table-body-element > .tr-element > .td-element.table-fixed-dom-right.table-fixed-dom-right-first::after {\n  box-shadow: inset -10px 0 10px -8px rgb(234, 236, 241);\n}\n\n.table-scroll-right .table-element > .table-head-element > .tr-element > .th-element.table-fixed-dom-left.table-fixed-dom-left-last::after {\n  box-shadow: inset 10px 0 10px -8px rgb(234, 236, 241);\n}\n.table-scroll-right .table-element > .table-body-element > .tr-element > .td-element.table-fixed-dom-left.table-fixed-dom-left-last::after {\n  box-shadow: inset 10px 0 10px -8px rgb(234, 236, 241);\n}\n\n.table-scroll-middle .table-element > .table-head-element > .tr-element > .th-element.table-fixed-dom-left.table-fixed-dom-left-last::after {\n  box-shadow: inset 10px 0 10px -8px rgb(234, 236, 241);\n}\n.table-scroll-middle .table-element > .table-head-element > .tr-element > .th-element.table-fixed-dom-right.table-fixed-dom-right-first::after {\n  box-shadow: inset -10px 0 10px -8px rgb(234, 236, 241);\n}\n.table-scroll-middle .table-element > .table-body-element > .tr-element > .td-element.table-fixed-dom-left.table-fixed-dom-left-last::after {\n  box-shadow: inset 10px 0 10px -8px rgb(234, 236, 241);\n}\n.table-scroll-middle .table-element > .table-body-element > .tr-element > .td-element.table-fixed-dom-right.table-fixed-dom-right-first::after {\n  box-shadow: inset -10px 0 10px -8px rgb(234, 236, 241);\n}";
 styleInject(css_248z$1);
 
-var TableElement = function TableElement(props) {
-  var className = props.className,
-    style = props.style,
-    fixedColumn = props.fixedColumn,
-    children = props.children,
-    otherProps = __rest(props, ["className", "style", "fixedColumn", "children"]);
-  var handClass = function handClass() {
-    var str = 'table-element';
+const TableElement = props => {
+  const {
+      className,
+      style,
+      fixedColumn,
+      children,
+      cRef
+    } = props,
+    otherProps = __rest(props, ["className", "style", "fixedColumn", "children", "cRef"]);
+  const handClass = () => {
+    let str = 'table-element';
     if (fixedColumn) str += ' table-element-fixed-column';
     if (className) str += " ".concat(className);
     return str;
   };
   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 => {
@@ -1989,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; // 过期天数
@@ -2017,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: {}
@@ -2067,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);
           // 数组排序
@@ -2262,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;
@@ -3074,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;
@@ -3137,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,
@@ -3154,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")
@@ -3164,7 +3189,7 @@ const Table = propsInit => {
       }, {
         children: [TableHeadMemo, TableBodyMemo]
       }))
-    })), loadState && jsx(Loading, {}), TablePaginationMemo]
+    })), handleVirtualScroll(), loadState && jsx(Loading, {}), TablePaginationMemo]
   }));
 };