@para-ui/core 3.0.1 → 3.0.3

package/Table/index.js

@@ -5,7 +5,7 @@ import { r as regenerator } from '../_verture/index-342379c6.js';
 import { _ as __rest, a as __awaiter } from '../_verture/tslib.es6-55ed4bd2.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useState, useEffect, useMemo, useCallback, Fragment as Fragment$1, useRef } from 'react';
-import { Get, Post, DeepClone, ArrayToObject, Cancel } from '@paraview/lib';
+import { Get, Post, DeepClone, GetBrowserClass, ArrayToObject, Cancel } from '@paraview/lib';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
 import { Popover } from '../Popover/index.js';
 import { Checkbox } from '../Checkbox/index.js';
@@ -16,6 +16,7 @@ import SolidArrowUp from '@para-ui/icons/UpTriangleF';
 import SolidArrowDown from '@para-ui/icons/DownTriangleF';
 import Panel from '@para-ui/icons/Panel';
 import { u as useFormatMessage } from '../_verture/useFormatMessage-ac9d6acf.js';
+import { $ as $prefixCls } from '../_verture/constant-bf34e6fa.js';
 import { _ as _defineProperty } from '../_verture/defineProperty-0590dc61.js';
 import { Radio } from '../Radio/index.js';
 import Empty from '../Empty/index.js';
@@ -23,6 +24,7 @@ import OperateBtn from '../OperateBtn/index.js';
 import Down from '@para-ui/icons/Down';
 import { Pagination } from '../Pagination/index.js';
 import { Loading } from '../Loading/index.js';
+import { u as useGlobalProps } from '../_verture/useGlobalProps-af9a2af6.js';
 import '../Tooltip/index.js';
 import 'rc-tooltip';
 import 'rc-tooltip/lib/placements';
@@ -35,7 +37,6 @@ import '@para-ui/icons/Forbid';
 import '../Dropdown/index.js';
 import 'rc-dropdown';
 import '@para-ui/core/GlobalContext';
-import '../_verture/useGlobalProps-af9a2af6.js';
 import '@para-ui/icons/More';
 import 'rc-pagination';
 import '@para-ui/icons/DoubleLeft';
@@ -124,8 +125,55 @@ var getStringInNumber = function getStringInNumber(str) {
   var strHand = str.replace(/[^0-9$]/ig, '');
   return Number(strHand);
 };
+/**
+ * 获取选择列localStorage
+ * @param key {string} 键值
+ * @param num {number} 过期天数
+ * */
+
+var getLocalStorageSelectHead = function 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];
+    if (!item) continue;
+    var newDate = new Date().getTime(); // 当前时间
+
+    var endTime = item.storageTime + item.validity; // 过期时间
+    // 过期时间 小于 当前时间, 说明已经过期了, 删除当前表格列数据
+
+    if (endTime < newDate) {
+      delete headJson[keyStr];
+    }
+  }
+
+  var headJsonItem = headJson[key]; // 重置过期时间
+
+  if (headJsonItem) {
+    headJsonItem.storageTime = new Date().getTime();
+    headJsonItem.validity = num * (60 * 60 * 24);
+  }
 
-var css_248z$7 = ".paraui-table-head-element {\n  display: table-header-group;\n}";
+  return headJsonItem || {};
+};
+/**
+ * 设置选择列localStorage
+ * @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);
+  headJson[key] = val;
+  window.localStorage.setItem('_paraui_table_head', JSON.stringify(headJson));
+};
+
+var css_248z$7 = ".table-head-element {\n  display: table-header-group;\n}";
 styleInject(css_248z$7);
 
 var TableHeadElement = function TableHeadElement(props) {
@@ -135,7 +183,7 @@ var TableHeadElement = function TableHeadElement(props) {
       otherProps = __rest(props, ["className", "style", "children"]);
 
   var handClass = function handClass() {
-    var str = 'paraui-table-head-element';
+    var str = 'table-head-element';
     if (className) str += ' ' + className;
     return str;
   };
@@ -148,7 +196,7 @@ var TableHeadElement = function TableHeadElement(props) {
   }));
 };
 
-var css_248z$6 = ".paraui-tr-element {\n  display: table-row;\n  outline: 0;\n  vertical-align: middle;\n}";
+var css_248z$6 = ".tr-element {\n  display: table-row;\n  outline: 0;\n  vertical-align: middle;\n}";
 styleInject(css_248z$6);
 
 var TrElement = function TrElement(props) {
@@ -158,7 +206,7 @@ var TrElement = function TrElement(props) {
       otherProps = __rest(props, ["className", "style", "children"]);
 
   var handClass = function handClass() {
-    var str = 'paraui-tr-element';
+    var str = 'tr-element';
     if (className) str += ' ' + className;
     return str;
   };
@@ -171,7 +219,7 @@ var TrElement = function TrElement(props) {
   }));
 };
 
-var css_248z$5 = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-th-element {\n  letter-spacing: 0.01071em;\n  line-height: 1.43;\n  padding: 0;\n  font-weight: 700;\n  font-size: 14px;\n  background-color: rgb(248, 249, 251);\n  border-bottom: 1px solid rgba(171, 176, 185, 0.12);\n  height: 100%;\n}\n.paraui-th-element:first-child {\n  border-top-left-radius: 4px;\n}\n.paraui-th-element:last-child {\n  border-top-right-radius: 4px;\n}\n.paraui-th-element:hover {\n  background-color: rgb(237, 241, 249);\n}\n.paraui-th-element.table-operate.table-operate-small {\n  width: 112px;\n}";
+var css_248z$5 = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n/**\n* @author linhd\n* @date 2022/8/12 5:28 PM\n* @description 全局css前缀\n*/\n.th-element {\n  letter-spacing: 0.01071em;\n  line-height: 1.43;\n  padding: 0;\n  font-weight: 700;\n  font-size: 14px;\n  background-color: rgb(248, 249, 251);\n  border-bottom: 1px solid rgba(171, 176, 185, 0.12);\n  height: 100%;\n}\n.th-element:first-child {\n  border-top-left-radius: 4px;\n}\n.th-element:last-child {\n  border-top-right-radius: 4px;\n}\n.th-element:hover {\n  background-color: rgb(237, 241, 249);\n}\n.th-element.table-operate.table-operate-small {\n  width: 112px;\n}\n.th-element.table-operate.table-operate-small > .table-header-box {\n  width: 112px;\n}";
 styleInject(css_248z$5);
 
 var ThElement = function ThElement(props) {
@@ -181,7 +229,7 @@ var ThElement = function ThElement(props) {
       otherProps = __rest(props, ["className", "style", "children"]);
 
   var handClass = function handClass() {
-    var str = 'paraui-th-element';
+    var str = 'th-element';
     if (className) str += ' ' + className;
     return str;
   };
@@ -235,6 +283,7 @@ var TableHead$1 = function TableHead(props) {
       operate = props.operate,
       showColumns = props.showColumns,
       fixedTable = props.fixedTable,
+      fixedColumn = props.fixedColumn,
       posFixed = props.posFixed,
       beyondText = props.beyondText;
 
@@ -490,10 +539,14 @@ var TableHead$1 = function TableHead(props) {
   var TableCheckMemo = useMemo(function () {
     if (check) {
       var handCls = function handCls() {
-        var str = 'table-checkbox table-head-btn paraui-table-fixed-dom-left'; // 左边没有定位,且没有单选,没有嵌套表格
+        var str = 'table-checkbox table-head-btn';
 
-        if (!(posFixed === null || posFixed === void 0 ? void 0 : posFixed.leftBol) && !radio && !expandable) {
-          str += ' paraui-table-fixed-dom-left-last';
+        if (fixedColumn) {
+          str += ' table-fixed-dom-left'; // 左边没有定位,且没有单选,没有嵌套表格
+
+          if (!(posFixed === null || posFixed === void 0 ? void 0 : posFixed.leftBol) && !radio && !expandable) {
+            str += ' table-fixed-dom-left-last';
+          }
         }
 
         return str;
@@ -504,7 +557,7 @@ var TableHead$1 = function TableHead(props) {
         className: handCls()
       }, {
         children: jsx("div", Object.assign({
-          className: 'table-header-box'
+          className: "table-header-box"
         }, {
           children: jsx(Checkbox, {
             indeterminate: indeterminate,
@@ -514,45 +567,61 @@ var TableHead$1 = function TableHead(props) {
         }))
       }));
     }
-  }, [check, indeterminate, checked, selectAll, posFixed, radio, expandable]); // 单选框memo
+  }, [check, indeterminate, checked, selectAll, posFixed, radio, expandable, fixedColumn]); // 单选框memo
 
   var TableRadioMemo = useMemo(function () {
     if (radio) {
       var handCls = function handCls() {
-        var str = 'table-radio table-head-btn paraui-table-fixed-dom-left'; // 左边没有定位,没有嵌套表格
+        var str = 'table-radio table-head-btn';
 
-        if (!(posFixed === null || posFixed === void 0 ? void 0 : posFixed.leftBol) && !expandable) {
-          str += ' paraui-table-fixed-dom-left-last';
+        if (fixedColumn) {
+          str += ' table-fixed-dom-left'; // 左边没有定位,没有嵌套表格
+
+          if (!(posFixed === null || posFixed === void 0 ? void 0 : posFixed.leftBol) && !expandable) {
+            str += ' table-fixed-dom-left-last';
+          }
         }
 
         return str;
       };
 
-      return jsx(ThElement, {
+      return jsx(ThElement, Object.assign({
         align: "center",
         className: handCls()
-      });
+      }, {
+        children: jsx("div", {
+          className: "table-header-box"
+        })
+      }));
     }
-  }, [radio, posFixed, expandable]); // 嵌套表格memo
+  }, [radio, posFixed, expandable, fixedColumn]); // 嵌套表格memo
 
   var TableExpandableMemo = useMemo(function () {
     if (expandable) {
       var handCls = function handCls() {
-        var str = 'table-expandable table-head-btn paraui-table-fixed-dom-left'; // 左边没有定位,没有嵌套表格
+        var str = 'table-expandable table-head-btn';
 
-        if (!(posFixed === null || posFixed === void 0 ? void 0 : posFixed.leftBol)) {
-          str += ' paraui-table-fixed-dom-left-last';
+        if (fixedColumn) {
+          str += ' table-fixed-dom-left'; // 左边没有定位,没有嵌套表格
+
+          if (!(posFixed === null || posFixed === void 0 ? void 0 : posFixed.leftBol)) {
+            str += ' table-fixed-dom-left-last';
+          }
         }
 
         return str;
       };
 
-      return jsx(ThElement, {
+      return jsx(ThElement, Object.assign({
         align: "center",
         className: handCls()
-      });
+      }, {
+        children: jsx("div", {
+          className: "table-header-box"
+        })
+      }));
     }
-  }, [expandable, posFixed]); // 过滤弹窗内容
+  }, [expandable, posFixed, fixedColumn]); // 过滤弹窗内容
 
   var filterPopoverContent = function filterPopoverContent() {
     return jsxs("div", Object.assign({
@@ -615,17 +684,18 @@ var TableHead$1 = function TableHead(props) {
 
     var handCls = function handCls(item) {
       var str = '';
+      if (item.className) str += item.className;
 
-      if (item.fixed) {
-        str = 'paraui-table-fixed-dom-' + item.fixed; // 固定左边,判断是否是最后一个
+      if (fixedColumn && item.fixed) {
+        str = 'table-fixed-dom-' + item.fixed; // 固定左边,判断是否是最后一个
 
         if (item.fixed === 'left' && item.paraui_fixed_left_last) {
-          str += ' paraui-table-fixed-dom-left-last';
+          str += ' table-fixed-dom-left-last';
         } // 固定右边,判断是否是第一个
 
 
         if (item.fixed === 'right' && item.paraui_fixed_right_first) {
-          str += ' paraui-table-fixed-dom-right-first';
+          str += ' table-fixed-dom-right-first';
         }
       }
 
@@ -637,7 +707,7 @@ var TableHead$1 = function TableHead(props) {
         width: item.width
       };
 
-      if (item.fixed && item.width) {
+      if (fixedColumn && item.fixed && item.width) {
         if (item.fixed === 'left') {
           json.left = item.paraui_left_width + 'px';
         }
@@ -657,13 +727,15 @@ var TableHead$1 = function TableHead(props) {
         visible: filterHead.name === item.name,
         content: filterPopoverContent(),
         onVisibleChange: clickHideFilter,
-        overlayClassName: 'paraui-filter-popover paraui-scrollbar-small'
+        overlayClassName: "".concat($prefixCls, "-filter-popover ").concat($prefixCls, "-scrollbar-small")
       }, {
-        children: jsx("span", Object.assign({
+        children: jsx("div", Object.assign({
           className: handFilterClass(item),
           onClick: clickShowFilter(item)
         }, {
-          children: jsx(Screen, {})
+          children: jsx("span", {
+            children: jsx(Screen, {})
+          })
         }))
       }));
     };
@@ -677,11 +749,10 @@ var TableHead$1 = function TableHead(props) {
         children: jsxs("div", Object.assign({
           className: handCellClass(headCell)
         }, {
-          children: [jsxs("div", Object.assign({
-            className: "table-header-title",
-            onClick: createSortHandler(headCell.name, headCell)
+          children: [jsx("div", Object.assign({
+            className: "table-header-title"
           }, {
-            children: [jsx("span", Object.assign({
+            children: jsx("span", Object.assign({
               className: "table-header-title-label"
             }, {
               children: jsx(AutoTips, Object.assign({
@@ -689,29 +760,37 @@ var TableHead$1 = function TableHead(props) {
               }, {
                 children: headCell.label
               }))
-            })), sortTable && headCell.name && headCell.sort !== false && jsxs("span", Object.assign({
-              className: "table-sort-svg"
+            }))
+          })), filter && headCell.name && headCell.filter && handFilterPopover(headCell), sortTable && headCell.name && headCell.sort !== false && jsx("div", Object.assign({
+            className: "table-sort-svg"
+          }, {
+            children: jsxs("span", Object.assign({
+              onClick: createSortHandler(headCell.name, headCell)
             }, {
               children: [jsx(SolidArrowUp, {
                 className: "up-svg"
               }), jsx(SolidArrowDown, {
                 className: "down-svg"
               })]
-            }))]
-          })), filter && headCell.name && headCell.filter && handFilterPopover(headCell)]
+            }))
+          }))]
         }))
       }), headCell.name || index);
     });
-  }, [headData, sortTable, filter, orderFieldArr, orderTypeArr, align, filterHead, selectFilterCom, beyondText, selectFilter]); // 操作栏memo
+  }, [headData, sortTable, filter, orderFieldArr, orderTypeArr, align, filterHead, selectFilterCom, beyondText, selectFilter, fixedColumn]); // 操作栏memo
 
   var TableOperateMemo = useMemo(function () {
     if (operate) {
       var handCls = function handCls() {
-        var str = 'table-operate paraui-table-fixed-dom-right';
+        var str = 'table-operate';
         if (operate.operateBtnRender) str += ' table-operate-small';
 
-        if (!(posFixed === null || posFixed === void 0 ? void 0 : posFixed.rightBol)) {
-          str += ' paraui-table-fixed-dom-right-first';
+        if (fixedColumn) {
+          str += ' table-fixed-dom-right'; // 存在显示列,且没有右侧固定列
+
+          if (!(posFixed === null || posFixed === void 0 ? void 0 : posFixed.rightBol)) {
+            str += ' table-fixed-dom-right-first';
+          }
         }
 
         return str;
@@ -719,9 +798,13 @@ var TableHead$1 = function TableHead(props) {
 
       var handStyle = function handStyle() {
         var json = {
-          width: operate.width,
-          right: showColumns === "inside" ? '56px' : '0px'
+          width: operate.width
         };
+
+        if (fixedColumn) {
+          json.right = showColumns === "inside" ? '56px' : '0px';
+        }
+
         return Object.assign(Object.assign({}, json), operate.style);
       };
 
@@ -749,7 +832,7 @@ var TableHead$1 = function TableHead(props) {
         }))
       }));
     }
-  }, [operate, align, posFixed, showColumns, posFixed, beyondText]); // 显示列弹窗内容
+  }, [operate, align, posFixed, showColumns, posFixed, beyondText, fixedColumn]); // 显示列弹窗内容
 
   var showListContent = function showListContent() {
     return jsxs("div", Object.assign({
@@ -791,10 +874,10 @@ var TableHead$1 = function TableHead(props) {
 
   var TableShowList = useMemo(function () {
     var handCls = function handCls() {
-      var str = 'show-colums paraui-table-fixed-dom-right';
+      var str = 'show-colums table-fixed-dom-right'; // 没有固定列参数 或者 没有操作栏且没有右侧固定列
 
-      if (!operate && !(posFixed === null || posFixed === void 0 ? void 0 : posFixed.rightBol)) {
-        str += ' paraui-table-fixed-dom-right-first';
+      if (!fixedColumn || !operate && !(posFixed === null || posFixed === void 0 ? void 0 : posFixed.rightBol)) {
+        str += ' table-fixed-dom-right-first';
       }
 
       return str;
@@ -805,7 +888,7 @@ var TableHead$1 = function TableHead(props) {
       visible: Boolean(anchorElColums),
       content: showListContent(),
       onVisibleChange: clickHideColums,
-      overlayClassName: 'paraui-table-show-colums-popover paraui-scrollbar-small'
+      overlayClassName: "".concat($prefixCls, "-table-show-colums-popover ").concat($prefixCls, "-scrollbar-small")
     }, {
       children: jsx(ThElement, Object.assign({
         align: "center",
@@ -813,7 +896,7 @@ var TableHead$1 = function TableHead(props) {
         onClick: clickShowColums
       }, {
         children: jsx("div", Object.assign({
-          className: 'table-header-box'
+          className: "table-header-box"
         }, {
           children: jsx(Panel, {})
         }))
@@ -824,7 +907,8 @@ var TableHead$1 = function TableHead(props) {
   var handClass = function handClass() {
     var str = 'table-head';
     if (showColumns === 'inside') str += ' table-head-inside';
-    if (!fixedTable) str += ' table-head-scroll'; // 没有 复选框,单选框,展开 按钮
+    if (!fixedTable) str += ' table-head-scroll'; // 防止长度过长
+    // 没有 复选框,单选框,展开 按钮
 
     if (!check && !radio && !expandable) str += ' table-head-no-btn';
     return str;
@@ -839,7 +923,7 @@ var TableHead$1 = function TableHead(props) {
   }));
 };
 
-var css_248z$4 = ".paraui-table-body-element {\n  display: table-row-group;\n}";
+var css_248z$4 = ".table-body-element {\n  display: table-row-group;\n}";
 styleInject(css_248z$4);
 
 var TableBodyElement = function TableBodyElement(props) {
@@ -849,7 +933,7 @@ var TableBodyElement = function TableBodyElement(props) {
       otherProps = __rest(props, ["className", "style", "children"]);
 
   var handClass = function handClass() {
-    var str = 'paraui-table-body-element';
+    var str = 'table-body-element';
     if (className) str += ' ' + className;
     return str;
   };
@@ -862,7 +946,7 @@ var TableBodyElement = function TableBodyElement(props) {
   }));
 };
 
-var css_248z$3 = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-td-element {\n  letter-spacing: 0.01071em;\n  padding: 0 8px;\n  fontWeight: 400;\n  font-size: 14px;\n  white-space: nowrap;\n  border: 0;\n  line-height: 1.43;\n}\n.paraui-td-element.table-operate {\n  /* position: sticky;\n   right: 0;*/\n}";
+var css_248z$3 = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n/**\n* @author linhd\n* @date 2022/8/12 5:28 PM\n* @description 全局css前缀\n*/\n.td-element {\n  letter-spacing: 0.01071em;\n  padding: 0 8px;\n  font-weight: 400;\n  font-size: 14px;\n  white-space: nowrap;\n  border: 0;\n  line-height: 1.43;\n}\n.td-element.table-operate {\n  /* position: sticky;\n   right: 0;*/\n}";
 styleInject(css_248z$3);
 
 var TdElement = function TdElement(props) {
@@ -872,7 +956,7 @@ var TdElement = function TdElement(props) {
       otherProps = __rest(props, ["className", "style", "children"]);
 
   var handClass = function handClass() {
-    var str = 'paraui-td-element';
+    var str = 'td-element';
     if (className) str += ' ' + className;
     return str;
   };
@@ -910,6 +994,7 @@ var TableBody = function TableBody(props) {
       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,
@@ -1152,10 +1237,14 @@ var TableBody = function TableBody(props) {
       }
 
       var handCls = function handCls() {
-        var str = 'table-checkbox table-body-btn paraui-table-fixed-dom-left'; // 左边没有定位,且没有单选,没有嵌套表格
+        var str = 'table-checkbox table-body-btn';
 
-        if (!(posFixed === null || posFixed === void 0 ? void 0 : posFixed.leftBol) && !radio && !expandable) {
-          str += ' paraui-table-fixed-dom-left-last';
+        if (fixedColumn) {
+          str += ' table-fixed-dom-left'; // 左边没有定位,且没有单选,没有嵌套表格
+
+          if (!(posFixed === null || posFixed === void 0 ? void 0 : posFixed.leftBol) && !radio && !expandable) {
+            str += ' table-fixed-dom-left-last';
+          }
         }
 
         return str;
@@ -1174,7 +1263,7 @@ var TableBody = function TableBody(props) {
         })
       }));
     }
-  }, [check, disabledJson, rowKey, checkJson, selectCheck, disabledArrStatus, posFixed, expandable, radio]); // 单选框useCallback
+  }, [check, disabledJson, rowKey, checkJson, selectCheck, disabledArrStatus, posFixed, expandable, radio, fixedColumn]); // 单选框useCallback
 
   var TableRadioCallback = useCallback(function (row) {
     if (radio) {
@@ -1201,10 +1290,14 @@ var TableBody = function TableBody(props) {
       }
 
       var handCls = function handCls() {
-        var str = 'table-radio table-body-btn paraui-table-fixed-dom-left'; // 左边没有定位,没有嵌套表格
+        var str = 'table-radio table-body-btn';
+
+        if (fixedColumn) {
+          str += ' table-fixed-dom-left'; // 左边没有定位,没有嵌套表格
 
-        if (!(posFixed === null || posFixed === void 0 ? void 0 : posFixed.leftBol) && !expandable) {
-          str += ' paraui-table-fixed-dom-left-last';
+          if (!(posFixed === null || posFixed === void 0 ? void 0 : posFixed.leftBol) && !expandable) {
+            str += ' table-fixed-dom-left-last';
+          }
         }
 
         return str;
@@ -1223,7 +1316,7 @@ var TableBody = function TableBody(props) {
         })
       }));
     }
-  }, [radio, disabledJson, radioValue, rowKey, selectRadio, disabledArrStatus, expandable, posFixed]); // 嵌套加减useCallback
+  }, [radio, disabledJson, radioValue, rowKey, selectRadio, disabledArrStatus, expandable, posFixed, fixedColumn]); // 嵌套加减useCallback
 
   var TableExpandableMemo = useCallback(function (row) {
     if (!expandable) return null;
@@ -1232,10 +1325,14 @@ var TableBody = function TableBody(props) {
     if (disabledExpandJson[row[rowKey]] || expandableDemo === false) return jsx(TdElement, {});
 
     var handCls = function handCls() {
-      var str = 'table-expandable table-body-btn paraui-table-fixed-dom-left'; // 左边没有定位,没有嵌套表格
+      var str = 'table-expandable table-body-btn';
+
+      if (fixedColumn) {
+        str += ' table-fixed-dom-left'; // 左边没有定位,没有嵌套表格
 
-      if (!(posFixed === null || posFixed === void 0 ? void 0 : posFixed.leftBol)) {
-        str += ' paraui-table-fixed-dom-left-last';
+        if (!(posFixed === null || posFixed === void 0 ? void 0 : posFixed.leftBol)) {
+          str += ' table-fixed-dom-left-last';
+        }
       }
 
       return str;
@@ -1250,7 +1347,7 @@ var TableBody = function TableBody(props) {
         onClick: handClickNestTable(row)
       })
     }));
-  }, [expandable, expandableRow, rowKey, disabledExpandJson, onExpand]); // 表格一行内容useCallback
+  }, [expandable, expandableRow, rowKey, disabledExpandJson, onExpand, fixedColumn]); // 表格一行内容useCallback
 
   var TableContentUseCallback = useCallback(function (row) {
     var params = {
@@ -1259,7 +1356,8 @@ var TableBody = function TableBody(props) {
     };
 
     var handContentClass = function handContentClass(item) {
-      var str = 'table-content-columms'; // 排序
+      var str = 'table-content-columms';
+      if (item.className) str += ' ' + item.className; // 排序
 
       if (sortTable && item.name && item.sort !== false) {
         var index = orderFieldArr.indexOf(item.name);
@@ -1277,16 +1375,16 @@ var TableBody = function TableBody(props) {
         }
       }
 
-      if (item.fixed) {
-        str = 'paraui-table-fixed-dom-' + item.fixed; // 固定左边,判断是否是最后一个
+      if (item.fixed && fixedColumn) {
+        str = 'table-fixed-dom-' + item.fixed; // 固定左边,判断是否是最后一个
 
         if (item.fixed === 'left' && item.paraui_fixed_left_last) {
-          str += ' paraui-table-fixed-dom-left-last';
+          str += ' table-fixed-dom-left-last';
         } // 固定右边,判断是否是第一个
 
 
         if (item.fixed === 'right' && item.paraui_fixed_right_first) {
-          str += ' paraui-table-fixed-dom-right-first';
+          str += ' table-fixed-dom-right-first';
         }
       }
 
@@ -1296,7 +1394,7 @@ var TableBody = function TableBody(props) {
     var handStyle = function handStyle(item) {
       var json = {};
 
-      if (item.fixed && item.width) {
+      if (fixedColumn && item.fixed && item.width) {
         if (item.fixed === 'left') {
           json.left = item.paraui_left_width + 'px';
         }
@@ -1312,7 +1410,7 @@ var TableBody = function TableBody(props) {
     return tableCell ? tableCell(row, params) : headData.map(function (item, index) {
       var text = row[item.name];
       var colSpan = 1;
-      if (item.render) text = item.render(row);
+      if (item.render) text = item.render(row, item, row[item.name], index);
       if (formatter) text = formatter(row, item, row[item.name], index); // 存在显示列,最后一列占两格
 
       if (showColumns === 'inside' && !operate && index === headData.length - 1) {
@@ -1332,7 +1430,7 @@ var TableBody = function TableBody(props) {
         }))
       }), item.name || index);
     });
-  }, [tableCell, headData, align, formatter, orderFieldArr, orderTypeArr, sortTable, showColumns, operate, beyondText]); // 操作栏useCallback
+  }, [tableCell, headData, align, formatter, orderFieldArr, orderTypeArr, sortTable, showColumns, operate, beyondText, fixedColumn]); // 操作栏useCallback
 
   var TableOperateUseCallback = useCallback(function (row) {
     if (operate) {
@@ -1356,10 +1454,14 @@ var TableBody = function TableBody(props) {
       };
 
       var handCls = function handCls() {
-        var str = 'table-operate paraui-table-fixed-dom-right';
+        var str = 'table-operate';
+
+        if (fixedColumn) {
+          str += ' table-fixed-dom-right';
 
-        if (!(posFixed === null || posFixed === void 0 ? void 0 : posFixed.rightBol)) {
-          str += ' paraui-table-fixed-dom-right-first';
+          if (!(posFixed === null || posFixed === void 0 ? void 0 : posFixed.rightBol)) {
+            str += ' table-fixed-dom-right-first';
+          }
         }
 
         return str;
@@ -1374,7 +1476,7 @@ var TableBody = function TableBody(props) {
         children: handOperate()
       }));
     }
-  }, [operate, align, showColumns, posFixed]); // 嵌套表格useCallback
+  }, [operate, align, showColumns, posFixed, fixedColumn]); // 嵌套表格useCallback
 
   var TableExpandableContentUseCallback = useCallback(function (row) {
     var id = row[rowKey];
@@ -1468,7 +1570,7 @@ var TableHead = function TableHead(props) {
   };
 
   return jsx("div", Object.assign({
-    className: 'table-pagination paraui-table-pagination'
+    className: 'table-pagination'
   }, {
     children: jsx(Pagination, {
       type: paginationType,
@@ -1483,7 +1585,7 @@ var TableHead = function TableHead(props) {
   }));
 };
 
-var css_248z$2 = ".paraui-table-container {\n  overflow-x: auto;\n}";
+var css_248z$2 = ".table-container {\n  overflow-x: auto;\n}";
 styleInject(css_248z$2);
 
 var TableContainer = function TableContainer(props) {
@@ -1494,7 +1596,7 @@ var TableContainer = function TableContainer(props) {
       otherProps = __rest(props, ["cRef", "className", "style", "children"]);
 
   var handClass = function handClass() {
-    var str = 'paraui-table-container table-container';
+    var str = 'table-container';
     if (className) str += ' ' + className;
     return str;
   };
@@ -1508,19 +1610,19 @@ var TableContainer = function TableContainer(props) {
   }));
 };
 
-var css_248z$1 = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-table-element {\n  width: 100%;\n  display: table;\n  border-collapse: separate;\n  border-spacing: 0;\n}\n.paraui-table-element.paraui-table-element-sticky > .paraui-table-head-element > .paraui-tr-element > .paraui-th-element {\n  position: sticky;\n  z-index: 10;\n  top: 0;\n}\n.paraui-table-element.paraui-table-element-sticky > .paraui-table-head-element > .paraui-tr-element > .paraui-th-element.paraui-table-fixed-dom-left {\n  z-index: 11;\n}\n.paraui-table-element.paraui-table-element-sticky > .paraui-table-head-element > .paraui-tr-element > .paraui-th-element.paraui-table-fixed-dom-left.paraui-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.paraui-table-element.paraui-table-element-sticky > .paraui-table-head-element > .paraui-tr-element > .paraui-th-element.paraui-table-fixed-dom-right {\n  z-index: 11;\n}\n.paraui-table-element.paraui-table-element-sticky > .paraui-table-head-element > .paraui-tr-element > .paraui-th-element.paraui-table-fixed-dom-right.paraui-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.paraui-table-element.paraui-table-element-sticky > .paraui-table-body-element > .paraui-tr-element > .paraui-td-element {\n  position: sticky;\n  z-index: 1;\n  top: 0;\n}\n.paraui-table-element.paraui-table-element-sticky > .paraui-table-body-element > .paraui-tr-element > .paraui-td-element.paraui-table-fixed-dom-left {\n  z-index: 2;\n}\n.paraui-table-element.paraui-table-element-sticky > .paraui-table-body-element > .paraui-tr-element > .paraui-td-element.paraui-table-fixed-dom-left.paraui-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.paraui-table-element.paraui-table-element-sticky > .paraui-table-body-element > .paraui-tr-element > .paraui-td-element.paraui-table-fixed-dom-right {\n  z-index: 2;\n}\n.paraui-table-element.paraui-table-element-sticky > .paraui-table-body-element > .paraui-tr-element > .paraui-td-element.paraui-table-fixed-dom-right.paraui-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\n.paraui-table-scroll-left .paraui-table-element.paraui-table-element-sticky > .paraui-table-head-element > .paraui-tr-element > .paraui-th-element.paraui-table-fixed-dom-right.paraui-table-fixed-dom-right-first::after {\n  box-shadow: inset -10px 0 10px -8px rgba(0, 0, 0, 0.1);\n}\n.paraui-table-scroll-left .paraui-table-element.paraui-table-element-sticky > .paraui-table-body-element > .paraui-tr-element > .paraui-td-element.paraui-table-fixed-dom-right.paraui-table-fixed-dom-right-first::after {\n  box-shadow: inset -10px 0 10px -8px rgba(0, 0, 0, 0.1);\n}\n\n.paraui-table-scroll-right .paraui-table-element.paraui-table-element-sticky > .paraui-table-head-element > .paraui-tr-element > .paraui-th-element.paraui-table-fixed-dom-left.paraui-table-fixed-dom-left-last::after {\n  box-shadow: inset 10px 0 10px -8px rgba(0, 0, 0, 0.1);\n}\n.paraui-table-scroll-right .paraui-table-element.paraui-table-element-sticky > .paraui-table-body-element > .paraui-tr-element > .paraui-td-element.paraui-table-fixed-dom-left.paraui-table-fixed-dom-left-last::after {\n  box-shadow: inset 10px 0 10px -8px rgba(0, 0, 0, 0.1);\n}\n\n.paraui-table-scroll-middle .paraui-table-element.paraui-table-element-sticky > .paraui-table-head-element > .paraui-tr-element > .paraui-th-element.paraui-table-fixed-dom-left.paraui-table-fixed-dom-left-last::after {\n  box-shadow: inset 10px 0 10px -8px rgba(0, 0, 0, 0.1);\n}\n.paraui-table-scroll-middle .paraui-table-element.paraui-table-element-sticky > .paraui-table-head-element > .paraui-tr-element > .paraui-th-element.paraui-table-fixed-dom-right.paraui-table-fixed-dom-right-first::after {\n  box-shadow: inset -10px 0 10px -8px rgba(0, 0, 0, 0.1);\n}\n.paraui-table-scroll-middle .paraui-table-element.paraui-table-element-sticky > .paraui-table-body-element > .paraui-tr-element > .paraui-td-element.paraui-table-fixed-dom-left.paraui-table-fixed-dom-left-last::after {\n  box-shadow: inset 10px 0 10px -8px rgba(0, 0, 0, 0.1);\n}\n.paraui-table-scroll-middle .paraui-table-element.paraui-table-element-sticky > .paraui-table-body-element > .paraui-tr-element > .paraui-td-element.paraui-table-fixed-dom-right.paraui-table-fixed-dom-right-first::after {\n  box-shadow: inset -10px 0 10px -8px rgba(0, 0, 0, 0.1);\n}";
+var css_248z$1 = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n/**\n* @author linhd\n* @date 2022/8/12 5:28 PM\n* @description 全局css前缀\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 rgba(0, 0, 0, 0.1);\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 rgba(0, 0, 0, 0.1);\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 rgba(0, 0, 0, 0.1);\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 rgba(0, 0, 0, 0.1);\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 rgba(0, 0, 0, 0.1);\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 rgba(0, 0, 0, 0.1);\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 rgba(0, 0, 0, 0.1);\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 rgba(0, 0, 0, 0.1);\n}";
 styleInject(css_248z$1);
 
 var TableElement = function TableElement(props) {
   var className = props.className,
       style = props.style,
-      sticky = props.sticky,
+      fixedColumn = props.fixedColumn,
       children = props.children,
-      otherProps = __rest(props, ["className", "style", "sticky", "children"]);
+      otherProps = __rest(props, ["className", "style", "fixedColumn", "children"]);
 
   var handClass = function handClass() {
-    var str = 'paraui-table-element';
-    if (sticky) str += ' paraui-table-element-sticky';
+    var str = 'table-element';
+    if (fixedColumn) str += ' table-element-fixed-column';
     if (className) str += ' ' + className;
     return str;
   };
@@ -1533,10 +1635,19 @@ var TableElement = function TableElement(props) {
   }));
 };
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-table {\n  width: 100%;\n  height: 100%;\n  display: inline-block;\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}\n.paraui-table.paraui-table-no-data > .paraui-table-container > table {\n  height: 100%;\n}\n.paraui-table.paraui-table-load.paraui-table-no-data > .paraui-table-container > table {\n  height: auto;\n}\n.paraui-table.paraui-table-radio.paraui-table-check .table-radio {\n  left: 48px;\n}\n.paraui-table.paraui-table-expandable.paraui-table-check .table-expandable {\n  left: 48px;\n}\n.paraui-table.paraui-table-expandable.paraui-table-check.paraui-table-radio .table-expandable {\n  left: 80px;\n}\n.paraui-table > .table-contain {\n  height: 100%;\n  position: relative;\n}\n.paraui-table > .table-contain > table {\n  height: auto;\n}\n.paraui-table > .table-contain > table .table-checkbox {\n  left: 0;\n}\n.paraui-table > .table-contain > table .table-checkbox > label {\n  vertical-align: middle;\n}\n.paraui-table > .table-contain > table .table-checkbox .table-header-box {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-table > .table-contain > table .table-radio {\n  left: 0;\n}\n.paraui-table > .table-contain > table .table-radio > label {\n  vertical-align: middle;\n}\n.paraui-table > .table-contain > table .table-radio .table-header-box {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-table > .table-contain > table .table-expandable {\n  left: 0;\n}\n.paraui-table > .table-contain > table .table-expandable > svg {\n  vertical-align: middle;\n}\n.paraui-table > .table-contain > table > .table-head {\n  width: 100%;\n  white-space: nowrap;\n}\n.paraui-table > .table-contain > table > .table-head > tr th {\n  height: 50px;\n}\n.paraui-table > .table-contain > table > .table-head.table-head-scroll tr th {\n  max-width: 240px;\n}\n.paraui-table > .table-contain > table > .table-head .table-header-box {\n  height: 49px;\n  line-height: 49px;\n  position: relative;\n  padding: 0 8px;\n}\n.paraui-table > .table-contain > table > .table-head .table-header-box > .table-header-title {\n  height: 100%;\n}\n.paraui-table > .table-contain > table > .table-head .table-header-box > .table-header-title > span {\n  height: 100%;\n  display: inline-block;\n}\n.paraui-table > .table-contain > table > .table-head .table-header-box > .table-header-title > .table-header-title-label {\n  width: 100%;\n  color: rgba(46, 55, 67, 0.7);\n  font-weight: 700;\n  font-size: 14px;\n}\n.paraui-table > .table-contain > table > .table-head .table-header-box > .table-header-title > .table-sort-svg {\n  line-height: 0;\n  width: 12px;\n  margin-left: 5px;\n  white-space: pre-wrap;\n  vertical-align: top;\n  height: inherit;\n  padding-top: 15px;\n}\n.paraui-table > .table-contain > table > .table-head .table-header-box > .table-header-title > .table-sort-svg > svg {\n  font-size: 12px;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-table > .table-contain > table > .table-head .table-header-box > .table-header-title > .table-sort-svg > .up-svg {\n  position: relative;\n}\n.paraui-table > .table-contain > table > .table-head .table-header-box > .table-header-title > .table-sort-svg > .down-svg {\n  position: relative;\n  top: -5px;\n}\n.paraui-table > .table-contain > table > .table-head .table-header-box > .table-header-filter {\n  position: absolute;\n  right: 0;\n  top: 0;\n  cursor: pointer;\n  width: 28px;\n  text-align: left;\n}\n.paraui-table > .table-contain > table > .table-head .table-header-box > .table-header-filter.table-header-filter-select > svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-table > .table-contain > table > .table-head .table-header-box > .table-header-filter.table-header-filter-show {\n  background-color: rgba(54, 102, 214, 0.05);\n}\n.paraui-table > .table-contain > table > .table-head .table-header-box > .table-header-filter.table-header-filter-show > svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-table > .table-contain > table > .table-head .table-header-box > .table-header-filter:hover {\n  background-color: rgb(227, 234, 247);\n}\n.paraui-table > .table-contain > table > .table-head .table-header-box > .table-header-filter:hover > svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-table > .table-contain > table > .table-head .table-header-box > .table-header-filter > svg {\n  font-size: 14px;\n  color: rgba(46, 55, 67, 0.7);\n  margin-left: 7px;\n  position: relative;\n  top: 2px;\n}\n.paraui-table > .table-contain > table > .table-head .table-header-box.table-header-box-sort {\n  cursor: pointer;\n}\n.paraui-table > .table-contain > table > .table-head .table-header-box.table-header-box-sort > .table-header-title > .table-header-title-label {\n  max-width: calc(100% - 18px);\n  width: auto;\n}\n.paraui-table > .table-contain > table > .table-head .table-header-box.table-header-box-filter > .table-header-title {\n  margin-right: 18px;\n}\n.paraui-table > .table-contain > table > .table-head .table-header-box.table-header-box-sort-asc > .table-header-title > .table-sort-svg > .up-svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-table > .table-contain > table > .table-head .table-header-box.table-header-box-sort-desc > .table-header-title > .table-sort-svg > .down-svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-table > .table-contain > table > .table-head .show-colums {\n  width: 56px;\n  cursor: pointer;\n  border-left: 1px solid rgba(171, 176, 185, 0.12);\n  right: 0;\n}\n.paraui-table > .table-contain > table > .table-head .show-colums .table-header-box {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.paraui-table > .table-contain > table > .table-head .show-colums .table-header-box > svg {\n  font-size: 24px;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-table > .table-contain > table > .table-head .show-colums .table-header-box:hover > svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-table > .table-contain > table > .table-head.table-head-no-btn tr th:first-child .table-header-box {\n  padding-left: 16px;\n}\n.paraui-table > .table-contain > table > .table-head .table-head-btn {\n  width: 32px;\n  padding: 0;\n}\n.paraui-table > .table-contain > table > .table-head .table-head-btn:first-child {\n  width: 48px;\n}\n.paraui-table > .table-contain > table > .table-body {\n  width: 100%;\n}\n.paraui-table > .table-contain > table > .table-body.table-body-scroll tr td {\n  max-width: 240px;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-table > .table-contain > table > .table-body tr {\n  height: 56px;\n}\n.paraui-table > .table-contain > table > .table-body tr td {\n  background-color: white;\n}\n.paraui-table > .table-contain > table > .table-body tr:nth-of-type(2n) td {\n  background-color: rgb(249, 250, 251);\n}\n.paraui-table > .table-contain > table > .table-body tr:hover td {\n  background-color: rgb(237, 241, 249);\n}\n.paraui-table > .table-contain > table > .table-body tr .table-expandable > svg {\n  transition: all 0.3s;\n  cursor: pointer;\n  font-size: 16px;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-table > .table-contain > table > .table-body tr .table-expandable > svg:hover {\n  color: rgb(54, 102, 214);\n}\n.paraui-table > .table-contain > table > .table-body tr .table-expandable > .expand {\n  transform: rotate(180deg);\n  color: rgb(54, 102, 214);\n}\n.paraui-table > .table-contain > table > .table-body .more-table-row {\n  cursor: pointer;\n}\n.paraui-table > .table-contain > table > .table-body .more-table-row .more-btn {\n  color: rgb(54, 102, 214);\n  font-size: 14px;\n}\n.paraui-table > .table-contain > table > .table-body.table-body-no-btn tr td:first-child {\n  padding-left: 16px;\n}\n.paraui-table > .table-contain > table > .table-body.table-body-no-btn > .table-no-data > td:first-child {\n  padding: 0;\n}\n.paraui-table > .table-contain > table > .table-body .table-body-btn {\n  width: 32px;\n  padding: 0;\n}\n.paraui-table > .table-contain > table > .table-body .table-body-btn:first-child {\n  width: 48px;\n}\n.paraui-table > .table-contain > table > .table-body > .table-no-data {\n  height: calc(100% - 50px);\n}\n.paraui-table > .table-contain > table > .table-body > .table-no-data:hover td {\n  background-color: white;\n}\n.paraui-table > .table-contain > table > .table-body > .table-no-data > td {\n  padding: 56px 0 0 0;\n}\n.paraui-table > .paraui-table-pagination {\n  width: 100%;\n  height: 60px;\n  padding-right: 10px;\n  display: flex;\n  align-items: flex-end;\n  justify-content: flex-end;\n}\n.paraui-table.table-pagination > .table-contain {\n  height: calc(100% - 60px);\n}\n.paraui-table.table-pagination.table-load-more > .table-contain {\n  height: 100%;\n}\n.paraui-table-show-colums-popover > .paraui-popover-content {\n  width: 200px;\n}\n.paraui-table-show-colums-popover > .paraui-popover-content .show-colums-select > .show-colums-select-box {\n  padding-top: 8px;\n  max-height: 224px;\n  overflow-y: auto;\n}\n.paraui-table-show-colums-popover > .paraui-popover-content .show-colums-select > .show-colums-select-box > .show-colums-select-item {\n  height: 36px;\n  line-height: 36px;\n  cursor: pointer;\n  display: flex;\n  padding: 0 4px;\n}\n.paraui-table-show-colums-popover > .paraui-popover-content .show-colums-select > .show-colums-select-box > .show-colums-select-item > label {\n  width: 32px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-table-show-colums-popover > .paraui-popover-content .show-colums-select > .show-colums-select-box > .show-colums-select-item > span {\n  color: rgb(46, 55, 67);\n  font-size: 14px;\n  display: inline-block;\n  width: calc(100% - 32px);\n}\n.paraui-table-show-colums-popover > .paraui-popover-content .show-colums-select > .show-colums-select-box > .show-colums-select-item:hover > span {\n  color: rgb(54, 102, 214);\n}\n.paraui-table-show-colums-popover > .paraui-popover-content .show-colums-select > .show-colums-select-box > .show-colums-select-item:hover > label .paraui-checkbox-box-inner {\n  border-color: rgb(54, 102, 214);\n}\n.paraui-table-show-colums-popover > .paraui-popover-content .show-colums-select > .show-colums-select-box > .show-colums-select-item.show-colums-select-item-select > span {\n  color: rgb(54, 102, 214);\n}\n.paraui-table-show-colums-popover > .paraui-popover-content .show-colums-select > .show-colums-select-box > .show-colums-select-item.show-colums-select-item-select > label .paraui-checkbox-box-inner {\n  border-color: rgb(54, 102, 214);\n}\n.paraui-table-show-colums-popover > .paraui-popover-content .show-colums-select > .show-colums-select-footer {\n  height: 45px;\n  border-top: 1px solid rgba(171, 176, 185, 0.2);\n  text-align: center;\n}\n.paraui-table-show-colums-popover > .paraui-popover-content .show-colums-select > .show-colums-select-footer > button {\n  width: 100%;\n  height: 100%;\n  border: 0;\n}\n.paraui-table-show-colums-popover > .paraui-popover-content .show-colums-select > .show-colums-select-footer > button > span {\n  font-size: 14px;\n}\n.paraui-table-show-colums-popover > .paraui-popover-content .show-colums-select > .show-colums-select-footer > button > span > span {\n  margin-right: 5px;\n  color: rgb(46, 55, 67);\n}\n.paraui-table-show-colums-popover > .paraui-popover-content .show-colums-select > .show-colums-select-footer > button > span > span svg {\n  font-size: 14px;\n  color: rgb(46, 55, 67);\n}\n.paraui-table-show-colums-popover > .paraui-popover-content .show-colums-select > .show-colums-select-footer > button:hover > span > span svg {\n  color: rgb(54, 102, 214);\n}\n\n.paraui-filter-popover > .paraui-popover-content {\n  width: 200px;\n}\n.paraui-filter-popover > .paraui-popover-content .filter-select > .filter-select-box {\n  padding-top: 8px;\n  max-height: 224px;\n  overflow-y: auto;\n}\n.paraui-filter-popover > .paraui-popover-content .filter-select > .filter-select-box > .filter-select-item {\n  height: 36px;\n  line-height: 36px;\n  cursor: pointer;\n  display: flex;\n  padding: 0 4px;\n}\n.paraui-filter-popover > .paraui-popover-content .filter-select > .filter-select-box > .filter-select-item > label {\n  width: 32px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-filter-popover > .paraui-popover-content .filter-select > .filter-select-box > .filter-select-item > span {\n  color: rgb(46, 55, 67);\n  font-size: 14px;\n  display: inline-block;\n  width: calc(100% - 32px);\n}\n.paraui-filter-popover > .paraui-popover-content .filter-select > .filter-select-box > .filter-select-item:hover > span {\n  color: rgb(54, 102, 214);\n}\n.paraui-filter-popover > .paraui-popover-content .filter-select > .filter-select-box > .filter-select-item:hover > label .rc-checkbox-inner {\n  border-color: rgb(54, 102, 214);\n}\n.paraui-filter-popover > .paraui-popover-content .filter-select > .filter-select-box > .filter-select-item.filter-select-item-select > span {\n  color: rgb(54, 102, 214);\n}\n.paraui-filter-popover > .paraui-popover-content .filter-select > .filter-select-box > .filter-select-item.filter-select-item-select > label .rc-checkbox-inner {\n  border-color: rgb(54, 102, 214);\n}\n.paraui-filter-popover > .paraui-popover-content .filter-select > .filter-select-footer {\n  height: 45px;\n  border-top: 1px solid rgba(171, 176, 185, 0.2);\n  text-align: center;\n}\n.paraui-filter-popover > .paraui-popover-content .filter-select > .filter-select-footer > button {\n  width: 50%;\n  height: 100%;\n  border: 0;\n}\n.paraui-filter-popover > .paraui-popover-content .filter-select > .filter-select-footer > button > span {\n  font-size: 14px;\n}\n.paraui-filter-popover > .paraui-popover-content .filter-select > .filter-select-footer > button > span > span {\n  margin-right: 5px;\n  color: rgb(46, 55, 67);\n}\n.paraui-filter-popover > .paraui-popover-content .filter-select > .filter-select-footer > button > span > span svg {\n  font-size: 14px;\n  color: rgb(46, 55, 67);\n}\n.paraui-filter-popover > .paraui-popover-content .filter-select > .filter-select-footer > button:hover > span > span svg {\n  color: rgb(54, 102, 214);\n}";
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n/**\n* @author linhd\n* @date 2022/8/12 5:28 PM\n* @description 全局css前缀\n*/\n.paraui-v3-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}\n.paraui-v3-table.paraui-v3-table-fixed-table > .table-contain > table {\n  table-layout: fixed;\n}\n.paraui-v3-table.paraui-v3-table-fixed-cloumn > .table-contain > table .table-checkbox {\n  left: 0;\n}\n.paraui-v3-table.paraui-v3-table-fixed-cloumn > .table-contain > table .table-radio {\n  left: 0;\n}\n.paraui-v3-table.paraui-v3-table-fixed-cloumn > .table-contain > table .table-expandable {\n  left: 0;\n}\n.paraui-v3-table.paraui-v3-table-fixed-cloumn.paraui-v3-table-radio.paraui-v3-table-check .table-radio {\n  left: 48px;\n}\n.paraui-v3-table.paraui-v3-table-fixed-cloumn.paraui-v3-table-expandable.paraui-v3-table-check .table-expandable {\n  left: 48px;\n}\n.paraui-v3-table.paraui-v3-table-fixed-cloumn.paraui-v3-table-expandable.paraui-v3-table-check.paraui-v3-table-radio .table-expandable {\n  left: 80px;\n}\n.paraui-v3-table.paraui-v3-table-no-data > .table-container > table {\n  height: 100%;\n}\n.paraui-v3-table.paraui-v3-table-load.paraui-v3-table-no-data > .table-container > table {\n  height: auto;\n}\n.paraui-v3-table.paraui-v3-table-pagination > .table-contain {\n  height: calc(100% - 60px);\n}\n.paraui-v3-table.paraui-v3-table-pagination.table-load-more > .table-contain {\n  height: 100%;\n}\n.paraui-v3-table.paraui-v3-table-load-more.paraui-v3-table-pagination > .table-contain {\n  height: 100%;\n}\n.paraui-v3-table > .table-contain {\n  height: 100%;\n  position: relative;\n}\n.paraui-v3-table > .table-contain > table {\n  height: auto;\n}\n.paraui-v3-table > .table-contain > table .table-checkbox > label {\n  vertical-align: middle;\n}\n.paraui-v3-table > .table-contain > table .table-checkbox .table-header-box {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v3-table > .table-contain > table .table-radio > label {\n  vertical-align: middle;\n}\n.paraui-v3-table > .table-contain > table .table-radio .table-header-box {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v3-table > .table-contain > table .table-expandable > svg {\n  vertical-align: middle;\n}\n.paraui-v3-table > .table-contain > table > .table-head {\n  width: 100%;\n  white-space: nowrap;\n}\n.paraui-v3-table > .table-contain > table > .table-head > tr th {\n  height: 50px;\n}\n.paraui-v3-table > .table-contain > table > .table-head.table-head-scroll tr th {\n  max-width: 240px;\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box {\n  height: 49px;\n  line-height: 49px;\n  position: relative;\n  padding: 0 8px;\n  display: flex;\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box > .table-header-title {\n  max-width: 100%;\n  padding-right: 8px;\n  display: flex;\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box > .table-header-title > .table-header-title-label {\n  width: 100%;\n  color: rgba(46, 55, 67, 0.7);\n  font-weight: 700;\n  font-size: 14px;\n}\n.paraui-v3-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-v3-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-v3-table > .table-contain > table > .table-head .table-header-box > .table-sort-svg > span:hover {\n  background-color: rgb(227, 234, 247);\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box > .table-sort-svg > span:hover > svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box > .table-sort-svg > span > svg {\n  font-size: 12px;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box > .table-sort-svg > span > .up-svg {\n  position: relative;\n  top: 2px;\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box > .table-sort-svg > span > .down-svg {\n  position: relative;\n  top: -3px;\n}\n.paraui-v3-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-v3-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-v3-table > .table-contain > table > .table-head .table-header-box > .table-header-filter > span:hover {\n  background-color: rgb(227, 234, 247);\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box > .table-header-filter > span:hover > svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box > .table-header-filter > span > svg {\n  font-size: 14px;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box > .table-header-filter.table-header-filter-show > span > svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box > .table-header-filter.table-header-filter-select > span > svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-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(235, 96, 84);\n  content: \"\";\n  right: 3px;\n  top: 2px;\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box.table-header-box-sort > .table-header-title {\n  max-width: calc(100% - 20px);\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box.table-header-box-filter > .table-header-title {\n  max-width: calc(100% - 20px);\n}\n.paraui-v3-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-v3-table > .table-contain > table > .table-head .table-header-box.table-header-box-sort-asc > .table-sort-svg > span > .up-svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box.table-header-box-sort-desc > .table-sort-svg > span > .down-svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-table > .table-contain > table > .table-head .show-colums {\n  width: 56px;\n  cursor: pointer;\n  border-left: 1px solid rgba(171, 176, 185, 0.12);\n  right: 0;\n}\n.paraui-v3-table > .table-contain > table > .table-head .show-colums .table-header-box {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 55px;\n}\n.paraui-v3-table > .table-contain > table > .table-head .show-colums .table-header-box > svg {\n  font-size: 24px;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-table > .table-contain > table > .table-head .show-colums .table-header-box:hover > svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-table > .table-contain > table > .table-head.table-head-no-btn tr th:first-child .table-header-box {\n  padding-left: 16px;\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-head-btn {\n  width: 32px;\n  padding: 0;\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-head-btn > .table-header-box {\n  width: 32px;\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-head-btn:first-child {\n  width: 48px;\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-head-btn:first-child > .table-header-box {\n  width: 48px;\n}\n.paraui-v3-table > .table-contain > table > .table-body {\n  width: 100%;\n}\n.paraui-v3-table > .table-contain > table > .table-body.table-body-scroll tr td {\n  max-width: 240px;\n}\n.paraui-v3-table > .table-contain > table > .table-body tr {\n  height: 56px;\n}\n.paraui-v3-table > .table-contain > table > .table-body tr td {\n  background-color: white;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-table > .table-contain > table > .table-body tr:nth-of-type(2n) td {\n  background-color: rgb(249, 250, 251);\n}\n.paraui-v3-table > .table-contain > table > .table-body tr:hover td {\n  background-color: rgb(237, 241, 249);\n}\n.paraui-v3-table > .table-contain > table > .table-body tr .table-expandable > svg {\n  transition: all 0.3s;\n  cursor: pointer;\n  font-size: 16px;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-table > .table-contain > table > .table-body tr .table-expandable > svg:hover {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-table > .table-contain > table > .table-body tr .table-expandable > .expand {\n  transform: rotate(180deg);\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-table > .table-contain > table > .table-body .more-table-row {\n  cursor: pointer;\n}\n.paraui-v3-table > .table-contain > table > .table-body .more-table-row .more-btn {\n  color: rgb(54, 102, 214);\n  font-size: 14px;\n}\n.paraui-v3-table > .table-contain > table > .table-body .more-table-row > .td-element {\n  bottom: 0;\n  background: white;\n  box-shadow: 4px -4px 8px 0px rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-table > .table-contain > table > .table-body.table-body-no-btn tr td:first-child {\n  padding-left: 16px;\n}\n.paraui-v3-table > .table-contain > table > .table-body.table-body-no-btn > .table-no-data > td:first-child {\n  padding: 0;\n}\n.paraui-v3-table > .table-contain > table > .table-body .table-body-btn {\n  width: 32px;\n  padding: 0;\n}\n.paraui-v3-table > .table-contain > table > .table-body .table-body-btn:first-child {\n  width: 48px;\n}\n.paraui-v3-table > .table-contain > table > .table-body > .table-no-data {\n  height: calc(100% - 50px);\n}\n.paraui-v3-table > .table-contain > table > .table-body > .table-no-data:hover td {\n  background-color: white;\n}\n.paraui-v3-table > .table-contain > table > .table-body > .table-no-data > td {\n  padding: 56px 0 0 0;\n}\n.paraui-v3-table > .table-pagination {\n  width: 100%;\n  height: 60px;\n  padding-right: 10px;\n  display: flex;\n  align-items: flex-end;\n  justify-content: flex-end;\n}\n\n.paraui-v3-table-show-colums-popover > .component-popover-content {\n  width: 200px;\n}\n.paraui-v3-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-box {\n  padding-top: 8px;\n  max-height: 224px;\n  overflow-y: auto;\n}\n.paraui-v3-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-box > .show-colums-select-item {\n  height: 36px;\n  line-height: 36px;\n  cursor: pointer;\n  display: flex;\n  padding: 0 4px;\n}\n.paraui-v3-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-box > .show-colums-select-item > label {\n  width: 32px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v3-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-box > .show-colums-select-item > span {\n  color: rgb(46, 55, 67);\n  font-size: 14px;\n  display: inline-block;\n  width: calc(100% - 32px);\n}\n.paraui-v3-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-box > .show-colums-select-item:hover > span {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-box > .show-colums-select-item:hover > label .checkbox-box-inner {\n  border-color: rgb(54, 102, 214);\n}\n.paraui-v3-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-box > .show-colums-select-item.show-colums-select-item-select > span {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-box > .show-colums-select-item.show-colums-select-item-select > label .checkbox-box-inner {\n  border-color: rgb(54, 102, 214);\n}\n.paraui-v3-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-footer {\n  height: 45px;\n  border-top: 1px solid rgba(171, 176, 185, 0.2);\n  text-align: center;\n}\n.paraui-v3-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-footer > button {\n  width: 100%;\n  height: 100%;\n  border: 0;\n}\n.paraui-v3-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-footer > button > span {\n  font-size: 14px;\n}\n.paraui-v3-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-footer > button > span > span {\n  margin-right: 5px;\n  color: rgb(46, 55, 67);\n}\n.paraui-v3-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-footer > button > span > span svg {\n  font-size: 14px;\n  color: rgb(46, 55, 67);\n}\n.paraui-v3-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-footer > button:hover > span > span svg {\n  color: rgb(54, 102, 214);\n}\n\n.paraui-v3-filter-popover > .component-popover-content {\n  width: 200px;\n}\n.paraui-v3-filter-popover > .component-popover-content .filter-select > .filter-select-box {\n  padding-top: 8px;\n  max-height: 224px;\n  overflow-y: auto;\n}\n.paraui-v3-filter-popover > .component-popover-content .filter-select > .filter-select-box > .filter-select-item {\n  height: 36px;\n  line-height: 36px;\n  cursor: pointer;\n  display: flex;\n  padding: 0 4px;\n}\n.paraui-v3-filter-popover > .component-popover-content .filter-select > .filter-select-box > .filter-select-item > label {\n  width: 32px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v3-filter-popover > .component-popover-content .filter-select > .filter-select-box > .filter-select-item > span {\n  color: rgb(46, 55, 67);\n  font-size: 14px;\n  display: inline-block;\n  width: calc(100% - 32px);\n}\n.paraui-v3-filter-popover > .component-popover-content .filter-select > .filter-select-box > .filter-select-item:hover > span {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-filter-popover > .component-popover-content .filter-select > .filter-select-box > .filter-select-item:hover > label .checkbox-box-inner {\n  border-color: rgb(54, 102, 214);\n}\n.paraui-v3-filter-popover > .component-popover-content .filter-select > .filter-select-box > .filter-select-item.filter-select-item-select > span {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-filter-popover > .component-popover-content .filter-select > .filter-select-box > .filter-select-item.filter-select-item-select > label .checkbox-box-inner {\n  border-color: rgb(54, 102, 214);\n}\n.paraui-v3-filter-popover > .component-popover-content .filter-select > .filter-select-footer {\n  height: 45px;\n  border-top: 1px solid rgba(171, 176, 185, 0.2);\n  text-align: center;\n}\n.paraui-v3-filter-popover > .component-popover-content .filter-select > .filter-select-footer > button {\n  width: 50%;\n  height: 100%;\n  border: 0;\n}\n.paraui-v3-filter-popover > .component-popover-content .filter-select > .filter-select-footer > button > span {\n  font-size: 14px;\n}\n.paraui-v3-filter-popover > .component-popover-content .filter-select > .filter-select-footer > button > span > span {\n  margin-right: 5px;\n  color: rgb(46, 55, 67);\n}\n.paraui-v3-filter-popover > .component-popover-content .filter-select > .filter-select-footer > button > span > span svg {\n  font-size: 14px;\n  color: rgb(46, 55, 67);\n}\n.paraui-v3-filter-popover > .component-popover-content .filter-select > .filter-select-footer > button:hover > span > span svg {\n  color: rgb(54, 102, 214);\n}";
 styleInject(css_248z);
 
-var Table = function Table(props) {
+var Table = function Table(propsInit) {
+  var props = useGlobalProps(propsInit, 'Table'); // 判断浏览器
+
+  var Browser = GetBrowserClass();
+
+  if (Browser === 'ie') {
+    // IE浏览器没有固定列
+    props.fixedColumn = false;
+  }
+
   var url = props.url,
       ctx = props.ctx,
       emptyProps = props.emptyProps,
@@ -1589,6 +1700,8 @@ var Table = function Table(props) {
       showColumns = _props$showColumns === void 0 ? 'inside' : _props$showColumns,
       _props$fixedTable = props.fixedTable,
       fixedTable = _props$fixedTable === void 0 ? true : _props$fixedTable,
+      _props$fixedColumn = props.fixedColumn,
+      fixedColumn = _props$fixedColumn === void 0 ? true : _props$fixedColumn,
       formatter = props.formatter,
       _props$lineHeight = props.lineHeight,
       lineHeight = _props$lineHeight === void 0 ? 56 : _props$lineHeight,
@@ -1612,8 +1725,9 @@ var Table = function Table(props) {
       _props$beyondText = props.beyondText,
       beyondText = _props$beyondText === void 0 ? true : _props$beyondText,
       loading = props.loading;
+  var dayNum = props.expirationTime ? props.expirationTime : 7; // 过期天数
 
-  var _useState = useState(null),
+  var _useState = useState(props.page !== undefined ? props.page : 1),
       _useState2 = _slicedToArray(_useState, 2),
       pageCom = _useState2[0],
       setPageCom = _useState2[1]; // 页数
@@ -1621,160 +1735,159 @@ var Table = function Table(props) {
 
   var _useState3 = useState(null),
       _useState4 = _slicedToArray(_useState3, 2),
-      pagePagination = _useState4[0],
-      setPagePagination = _useState4[1]; // 分页显示的页数
+      sizeCom = _useState4[0],
+      setSizeCom = _useState4[1]; // 每页条数
 
 
-  var _useState5 = useState(null),
+  var _useState5 = useState(sizeArr),
       _useState6 = _slicedToArray(_useState5, 2),
-      sizeCom = _useState6[0],
-      setSizeCom = _useState6[1]; // 每页条数
+      sizeArrCom = _useState6[0],
+      setSizeArrCom = _useState6[1]; // 每页条数数组
 
 
-  var _useState7 = useState(sizeArr),
+  var _useState7 = useState(0),
       _useState8 = _slicedToArray(_useState7, 2),
-      sizeArrCom = _useState8[0],
-      setSizeArrCom = _useState8[1]; // 每页条数数组
+      total = _useState8[0],
+      setTotal = _useState8[1]; // 总数
 
 
-  var _useState9 = useState(0),
+  var _useState9 = useState([]),
       _useState10 = _slicedToArray(_useState9, 2),
-      total = _useState10[0],
-      setTotal = _useState10[1]; // 总数
+      rowData = _useState10[0],
+      setRowData = _useState10[1]; // 当前页数据
 
 
-  var _useState11 = useState([]),
+  var _useState11 = useState({}),
       _useState12 = _slicedToArray(_useState11, 2),
-      rowData = _useState12[0],
-      setRowData = _useState12[1]; // 当前页数据
+      rowDataJson = _useState12[0],
+      setRowDataJson = _useState12[1]; // 当前页数据对象
 
 
   var _useState13 = useState({}),
       _useState14 = _slicedToArray(_useState13, 2),
-      rowDataJson = _useState14[0],
-      setRowDataJson = _useState14[1]; // 当前页数据对象
+      totalDataJson = _useState14[0],
+      setTotalDataJson = _useState14[1]; // 数据总数对象--用来分页记录数据的
 
 
-  var _useState15 = useState({}),
+  var _useState15 = useState([]),
       _useState16 = _slicedToArray(_useState15, 2),
-      totalDataJson = _useState16[0],
-      setTotalDataJson = _useState16[1]; // 数据总数对象--用来分页记录数据的
+      orderTypeArr = _useState16[0],
+      setOrderTypeArr = _useState16[1]; // 排序类型
 
 
   var _useState17 = useState([]),
       _useState18 = _slicedToArray(_useState17, 2),
-      orderTypeArr = _useState18[0],
-      setOrderTypeArr = _useState18[1]; // 排序类型
+      orderFieldArr = _useState18[0],
+      setOrderFieldArr = _useState18[1]; // 排序字段
 
 
-  var _useState19 = useState([]),
+  var _useState19 = useState('not'),
       _useState20 = _slicedToArray(_useState19, 2),
-      orderFieldArr = _useState20[0],
-      setOrderFieldArr = _useState20[1]; // 排序字段
+      headSelectStatus = _useState20[0],
+      setHeadSelectStatus = _useState20[1]; // 表格头复选框状态
 
 
-  var _useState21 = useState('not'),
+  var _useState21 = useState({}),
       _useState22 = _slicedToArray(_useState21, 2),
-      headSelectStatus = _useState22[0],
-      setHeadSelectStatus = _useState22[1]; // 表格头复选框状态
+      checkJson = _useState22[0],
+      setCheckJson = _useState22[1]; // 多选 选中的数据
 
 
-  var _useState23 = useState({}),
+  var _useState23 = useState(),
       _useState24 = _slicedToArray(_useState23, 2),
-      checkJson = _useState24[0],
-      setCheckJson = _useState24[1]; // 多选 选中的数据
+      radioValue = _useState24[0],
+      setRadioValue = _useState24[1]; // 单选 选中的数据
 
 
-  var _useState25 = useState(),
+  var _useState25 = useState({}),
       _useState26 = _slicedToArray(_useState25, 2),
-      radioValue = _useState26[0],
-      setRadioValue = _useState26[1]; // 单选 选中的数据
+      disabledJson = _useState26[0],
+      setDisabledJson = _useState26[1]; // 禁用对象
 
 
   var _useState27 = useState({}),
       _useState28 = _slicedToArray(_useState27, 2),
-      disabledJson = _useState28[0],
-      setDisabledJson = _useState28[1]; // 禁用对象
+      originalHead = _useState28[0],
+      setOriginalHead = _useState28[1]; // 接口原数据表头json
 
 
-  var _useState29 = useState({}),
+  var _useState29 = useState([]),
       _useState30 = _slicedToArray(_useState29, 2),
-      originalHead = _useState30[0],
-      setOriginalHead = _useState30[1]; // 接口原数据表头json
+      showHeadList = _useState30[0],
+      setShowHeadList = _useState30[1]; // 显示列下拉值 所有头部的配置
 
 
   var _useState31 = useState([]),
       _useState32 = _slicedToArray(_useState31, 2),
-      showHeadList = _useState32[0],
-      setShowHeadList = _useState32[1]; // 显示列下拉值 所有头部的配置
+      headDataCom = _useState32[0],
+      setHeadDataCom = _useState32[1]; // 表格当前显示列 集合本地数据
 
 
-  var _useState33 = useState([]),
+  var _useState33 = useState({}),
       _useState34 = _slicedToArray(_useState33, 2),
-      headDataCom = _useState34[0],
-      setHeadDataCom = _useState34[1]; // 表格当前显示列
+      selectFilterCom = _useState34[0],
+      setSelectFilterCom = _useState34[1]; // 过滤值
 
 
-  var _useState35 = useState({}),
+  var _useState35 = useState(true),
       _useState36 = _slicedToArray(_useState35, 2),
-      selectFilterCom = _useState36[0],
-      setSelectFilterCom = _useState36[1]; // 过滤值
+      loadState = _useState36[0],
+      setLoadState = _useState36[1]; // 加载进度条状态
 
 
-  var _useState37 = useState(true),
+  var _useState37 = useState(false),
       _useState38 = _slicedToArray(_useState37, 2),
-      loadState = _useState38[0],
-      setLoadState = _useState38[1]; // 加载进度条状态
-
+      loadMoreUrl = _useState38[0],
+      setLoadMoreUrl = _useState38[1];
 
-  var _useState39 = useState(false),
-      _useState40 = _slicedToArray(_useState39, 2),
-      loadMoreUrl = _useState40[0],
-      setLoadMoreUrl = _useState40[1];
+  var _useState39 = useState(Math.random().toString()),
+      _useState40 = _slicedToArray(_useState39, 1),
+      reqId = _useState40[0];
 
-  var _useState41 = useState(Math.random().toString()),
-      _useState42 = _slicedToArray(_useState41, 1),
-      reqId = _useState42[0];
+  var _useState41 = useState(),
+      _useState42 = _slicedToArray(_useState41, 2),
+      refreshCom = _useState42[0],
+      setRefreshCom = _useState42[1];
 
-  var _useState43 = useState(),
+  var _useState43 = useState(0),
       _useState44 = _slicedToArray(_useState43, 2),
-      refreshCom = _useState44[0],
-      setRefreshCom = _useState44[1];
-
-  var _useState45 = useState(0),
-      _useState46 = _slicedToArray(_useState45, 2),
-      tableMinWidth = _useState46[0],
-      setTableMinWidth = _useState46[1]; // 表格最小width
+      tableMinWidth = _useState44[0],
+      setTableMinWidth = _useState44[1]; // 表格最小width
 
 
-  var _useState47 = useState({}),
-      _useState48 = _slicedToArray(_useState47, 2),
-      posFixed = _useState48[0],
-      setPosFixed = _useState48[1];
+  var _useState45 = useState({}),
+      _useState46 = _slicedToArray(_useState45, 2),
+      posFixed = _useState46[0],
+      setPosFixed = _useState46[1];
 
   var containerRef = useRef(); // 表格内容高度
 
   var tableRef = useRef(); // 表格
 
-  var _useState49 = useState({}),
-      _useState50 = _slicedToArray(_useState49, 1),
-      constData = _useState50[0]; // 存储常量
+  var constData = useRef({
+    page: props.page !== undefined ? props.page : 1
+  }); // 存储常量
 
+  constData.current.loadMoreUrl = loadMore && url; // 用来判断加载更多请求是否放在表格里面
 
-  constData.loadMoreUrl = loadMore && url; // 用来判断加载更多请求是否放在表格里面
-
+  constData.current.search = search;
+  constData.current.url = url;
+  constData.current.orderTypeArr = orderTypeArr;
+  constData.current.orderFieldArr = orderFieldArr;
+  constData.current.selectFilterCom = selectFilterCom;
+  constData.current.data = data;
   useEffect(function () {
     window.addEventListener('resize', changeResize);
     return function () {
-      clearTimeout(constData.reqTimer);
-      clearTimeout(constData.loadingTimer);
+      clearTimeout(constData.current.reqTimer);
+      clearTimeout(constData.current.loadingTimer);
       window.removeEventListener('resize', changeResize);
     };
   }, []);
   useEffect(function () {
     if (loading !== undefined) {
-      clearTimeout(constData.loadingTimer);
-      constData.loadingTimer = setTimeout(function () {
+      clearTimeout(constData.current.loadingTimer);
+      constData.current.loadingTimer = setTimeout(function () {
         setLoadState(loading);
       }, 50);
     }
@@ -1784,18 +1897,16 @@ var Table = function Table(props) {
   }, [loadMore, url]); // 监听page
 
   useEffect(function () {
-    setPageCom(page);
-  }, [page]); // 监听page
-
-  useEffect(function () {
-    setPagePagination(pageCom);
-  }, [pageCom]); // 自动计算表格一页展示条数
+    if (props.page !== undefined) {
+      handPage(props.page);
+    }
+  }, [page]); // 自动计算表格一页展示条数
 
   useEffect(function () {
-    if (!autoSize) return setSizeCom(size);
+    if (!autoSize) return handSize(size);
 
     if (props.size) {
-      setSizeCom(size);
+      handSize(size);
     } else {
       if (containerRef && containerRef.current) {
         var height = containerRef.current.clientHeight - 50;
@@ -1812,37 +1923,14 @@ var Table = function Table(props) {
           setSizeArrCom(sizeArr);
         }
 
-        setSizeCom(columnsNUmber);
+        handSize(columnsNUmber);
       }
     }
   }, [size, autoSize]); // 处理表格头部
 
   useEffect(function () {
     if (props.headData !== undefined) {
-      var headShowArr = []; // 表格显示列
-
-      var headArr = []; // 显示列列表
-
-      var json = {};
-
-      for (var i = 0, l = headData.length; i < l; i++) {
-        var item = headData[i];
-        if (typeof item.width === 'number') item.width += 'px';
-        item.orderNum = i;
-        if (showColumns === false) item.selected = true; // 如果不显示选择列,全部显示
-
-        if (item.selected) {
-          headShowArr.push(item);
-        }
-
-        headArr.push(item);
-        json[item.name] = item;
-      }
-
-      handHeadDataCom(headShowArr);
-      setHeadDataCom(headShowArr);
-      setShowHeadList(headArr);
-      constData.headDataJson = json;
+      handInitHead(headData, false);
     }
   }, [headData]); // 设置总数对象
 
@@ -1850,29 +1938,31 @@ var Table = function Table(props) {
     if (data) {
       var handTotalDataJson = ArrayToObject(rowKey, data);
       setTotalDataJson(handTotalDataJson);
+      constData.current.data = data;
+      setRefreshCom(Math.random());
     }
   }, [data]);
   useEffect(function () {
     // 第一次初始化不设置
-    if (!constData.initReq) return;
-    setPageCom(1);
-    constData.historyData = [];
+    if (!constData.current.initReq) return;
+    handPage(1);
+    constData.current.historyData = [];
   }, [search, url]); // 表格数据获取赋值
 
   useEffect(function () {
-    clearTimeout(constData.reqTimer);
-    if (url) Cancel(reqId);
-    constData.reqTimer = setTimeout(function () {
-      constData.initReq = true;
+    clearTimeout(constData.current.reqTimer);
+    if (constData.current.url) Cancel(reqId);
+    constData.current.reqTimer = setTimeout(function () {
+      constData.current.initReq = true;
 
-      if (url) {
+      if (constData.current.url) {
         // 提交参数
         var postBody = {};
 
         if (pagination) {
-          if (pageCom === null || sizeCom === null) return;
-          postBody.size = sizeCom;
-          postBody.page = pageCom;
+          if (constData.current.page === null || constData.current.size === null) return;
+          postBody.size = constData.current.size;
+          postBody.page = constData.current.page;
         }
 
         if (orderFieldArr.length > 0) {
@@ -1889,14 +1979,14 @@ var Table = function Table(props) {
           postBody.filter = handFilterReq();
         }
 
-        if (search) {
-          if (_typeof(search) === 'object') {
-            postBody = Object.assign(Object.assign({}, postBody), search);
+        if (constData.current.search) {
+          if (_typeof(constData.current.search) === 'object') {
+            postBody = Object.assign(Object.assign({}, postBody), constData.current.search);
           }
         }
 
         var obj = {
-          url: url,
+          url: constData.current.url,
           ctx: ctx,
           method: method,
           data: postBody
@@ -1930,19 +2020,19 @@ var Table = function Table(props) {
         }
       }
 
-      if (data) {
+      if (constData.current.data) {
         var dataT = [];
 
-        if (data instanceof Array) {
-          dataT = data;
+        if (constData.current.data instanceof Array) {
+          dataT = constData.current.data;
         } else {
-          dataT = data.list;
+          dataT = constData.current.data.list;
         }
 
         if (pagination) {
-          if (pageCom === null || sizeCom === null) return; // 分页
+          if (constData.current.page === null || constData.current.size === null) return; // 分页
 
-          var sliceData = dataT.slice((pageCom - 1) * sizeCom, (pageCom - 1) * sizeCom + sizeCom);
+          var sliceData = dataT.slice((constData.current.page - 1) * constData.current.size, (constData.current.page - 1) * constData.current.size + constData.current.size);
           setNowPageData(sliceData);
           setTotal(dataT.length);
         } else {
@@ -1953,7 +2043,7 @@ var Table = function Table(props) {
         if (props.loading === undefined) setLoadState(false);
       }
     }, 50);
-  }, [pageCom, sizeCom, orderTypeArr, orderFieldArr, refresh, data, selectFilterCom, search, url, refreshCom]); // 单选赋值默认值
+  }, [refresh, refreshCom]); // 单选赋值默认值
 
   useEffect(function () {
     if (radioDefaultValue !== undefined && radioDefaultValue !== radioValue) {
@@ -2034,7 +2124,139 @@ var Table = function Table(props) {
     tableBoxScroll({
       target: containerRef.current
     });
-  }); // 计算左边的差量
+  });
+  /** 设置size */
+
+  var handSize = function handSize(num) {
+    constData.current.size = num;
+    setSizeCom(num);
+    setRefreshCom(Math.random());
+  };
+  /** 本地显示列key */
+
+
+  var getTableHeadKey = function getTableHeadKey() {
+    // 自定义key
+    if (props.tableKey) {
+      return props.tableKey;
+    } // 本地数据
+
+
+    if (props.data) {
+      return window.location.origin + window.location.pathname + window.location.hash;
+    } // url
+
+
+    if (props.url) {
+      return props.url + '_' + (props.method || 'Get');
+    }
+
+    return '';
+  };
+  /** 获取储存的表头列 */
+
+
+  var getLocalStorageHeadCom = function getLocalStorageHeadCom() {
+    if (props.rememberColumns === false) return {};
+    var json = getLocalStorageSelectHead(getTableHeadKey(), dayNum);
+    return json;
+  };
+  /** 设置本地表格列 */
+
+
+  var setLocalStorageHeadCom = function setLocalStorageHeadCom(headArr) {
+    if (props.rememberColumns === false) return;
+    var selectHeadJson = ArrayToObject('name', headArr);
+    var json = {
+      headName: {},
+      storageTime: new Date().getTime(),
+      validity: dayNum * (60 * 60 * 24)
+    };
+
+    for (var i = 0, l = showHeadList.length; i < l; i++) {
+      var item = showHeadList[i];
+      var name = item.name || '';
+      json.headName[name] = false;
+
+      if (selectHeadJson[name]) {
+        json.headName[name] = true;
+      }
+    }
+
+    setLocalStorageSelectHead(getTableHeadKey(), json);
+  };
+  /**
+   * 处理表格列是否显示
+   * @param item {HeadDataProps} 当前列
+   * @param showHeadArr {HeadDataProps[]} 显示列与本地数据集合
+   * @param localHead {HeadLocalStorageItem} 本地显示列数据
+   * */
+
+
+  var handHeadShow = function handHeadShow(item, showHeadArr, localHead) {
+    if (showColumns === false) {
+      // 如果不显示选择列,全部显示
+      showHeadArr.push(item);
+      return;
+    }
+
+    if (props.rememberColumns === false) {
+      // 不记住列
+      if (item.selected) showHeadArr.push(item);
+    } else {
+      // 记住列
+      var nameSelectJson = localHead.headName || {};
+      var name = item.name || '';
+      var nameSelect = nameSelectJson[name];
+
+      if (nameSelect !== undefined) {
+        // 存在本地选择列里面,选中添加到显示列
+        if (nameSelect) showHeadArr.push(item);
+      } else {
+        // 不存在本地选择列里面,当前选中,则添加进去
+        if (item.selected) showHeadArr.push(item);
+      }
+    }
+  };
+  /**
+   * 初始化设置表头
+   * @param arr {(HeadDataProps | HeadDataReqProps)[]} 表头数据
+   * @param bol {boolean} true请求表头
+   * */
+
+
+  var handInitHead = function handInitHead(arr, bol) {
+    var headShowArr = []; // 表格显示列
+
+    var headArr = []; // 显示列列表
+
+    var json = {};
+    var localHead = getLocalStorageHeadCom();
+
+    for (var i = 0, l = arr.length; i < l; i++) {
+      var item = arr[i];
+      if (typeof item.width === 'number') item.width += 'px';
+      if (!bol) item.orderNum = i;
+      handHeadShow(item, headShowArr, localHead);
+      headArr.push(item);
+      json[item.name] = item;
+    }
+
+    if (bol) {
+      headShowArr.sort(function (a, b) {
+        return Number(a.orderNum) - Number(b.orderNum);
+      });
+      headArr.sort(function (a, b) {
+        return Number(a.orderNum) - Number(b.orderNum);
+      });
+    }
+
+    handHeadDataCom(headShowArr);
+    setHeadDataCom(headShowArr);
+    setShowHeadList(headArr);
+    constData.current.headDataJson = json;
+  }; // 计算左边的差量
+
 
   var handLeftWidth = function handLeftWidth() {
     var leftNum = 0; // 复选
@@ -2188,7 +2410,7 @@ var Table = function Table(props) {
   var handFilterReq = function handFilterReq() {
     var json = {};
     var arr = Object.keys(selectFilterCom);
-    var headDataJson = constData.headDataJson || {};
+    var headDataJson = constData.current.headDataJson || {};
 
     for (var i = 0, l = arr.length; i < l; i++) {
       var name = arr[i];
@@ -2279,41 +2501,22 @@ var Table = function Table(props) {
       if (str !== JSON.stringify(originalHead)) {
         setOriginalHead(data.columns);
         var arr = Object.keys(data.columns);
-        var headShowArr = []; // 表格显示列
-
-        var headArr = []; // 显示列列表
-
-        var json = {};
+        var headDataArr = []; // 表头数据
 
         for (var i = 0, l = arr.length; i < l; i++) {
           var key = arr[i];
           var item = data.columns[key];
-          item.label = item.displayName;
           item.name = key;
+          item.label = item.displayName;
           item.filter = item.filterFlag;
           item.filterRadio = item.filterRadioFlag;
           item.sort = item.orderFlag;
           item.selected = item.selectedFlag;
-
-          if (item && item.selected) {
-            // 当前显示字段
-            headShowArr.push(item);
-          }
-
-          headArr.push(item);
-          json[item.name] = item;
+          item.width = item.width;
+          headDataArr.push(item);
         }
 
-        headShowArr.sort(function (a, b) {
-          return a.orderNum - b.orderNum;
-        });
-        headArr.sort(function (a, b) {
-          return a.orderNum - b.orderNum;
-        });
-        handHeadDataCom(headShowArr);
-        setHeadDataCom(headShowArr);
-        setShowHeadList(headArr);
-        constData.headDataJson = json;
+        handInitHead(headDataArr, true);
       }
     }
 
@@ -2321,7 +2524,11 @@ var Table = function Table(props) {
       // 分页 data是对象
       setNowPageData(data.list || []);
       setTotal(data.total);
-      if (data.page !== undefined && data.page !== null) setPagePagination(Number(data.page));
+
+      if (data.page !== undefined && data.page !== null) {
+        constData.current.page = Number(data.page);
+        setPageCom(Number(data.page));
+      }
     } else {
       var handData1 = [];
 
@@ -2342,8 +2549,8 @@ var Table = function Table(props) {
 
   var setNowPageData = function setNowPageData(nowPageData) {
     // 加载更多请求放在里面
-    if (constData.loadMoreUrl) {
-      var historyData = constData.historyData || [];
+    if (constData.current.loadMoreUrl) {
+      var historyData = constData.current.historyData || [];
 
       if (historyData.length > 0) {
         nowPageData = [].concat(_toConsumableArray(historyData), _toConsumableArray(nowPageData));
@@ -2351,7 +2558,7 @@ var Table = function Table(props) {
     }
 
     var handDataJson = ArrayToObject(rowKey, nowPageData);
-    constData.historyData = nowPageData;
+    constData.current.historyData = nowPageData;
     setRowDataJson(handDataJson);
     setRowData(nowPageData); // 设置总数对象
 
@@ -2359,6 +2566,16 @@ var Table = function Table(props) {
       setTotalDataJson(Object.assign(Object.assign({}, totalDataJson), handDataJson));
     }
   };
+  /**
+   * 处理page
+   * */
+
+
+  var handPage = function handPage(num) {
+    constData.current.page = num;
+    setPageCom(num);
+    setRefreshCom(Math.random());
+  };
   /**
    * 改变页数
    * @param num {number | undefined} 页数
@@ -2366,7 +2583,7 @@ var Table = function Table(props) {
 
 
   var changePage = function changePage(num) {
-    if (num !== undefined) setPageCom(num);
+    if (num !== undefined) handPage(num);
     clearCheckValue();
   };
   /**
@@ -2376,8 +2593,17 @@ var Table = function Table(props) {
 
 
   var changeRowsPerPage = function changeRowsPerPage(num) {
-    if (num !== undefined) setSizeCom(num);
-    setPageCom(1);
+    if (num !== undefined) handSize(num);
+    handPage(1);
+  };
+  /**
+   * 加载更多,点击改变分页
+   */
+
+
+  var changePageMore = function changePageMore() {
+    var pageHnad = Number(pageCom) + 1;
+    handPage(pageHnad);
   };
   /**
    * 排序
@@ -2428,6 +2654,9 @@ var Table = function Table(props) {
 
     setOrderFieldArr(orderFieldArrHand);
     setOrderTypeArr(orderTypeArrHand);
+    constData.current.orderFieldArr = orderFieldArrHand;
+    constData.current.orderTypeArr = orderTypeArrHand;
+    setRefreshCom(Math.random());
   };
   /**
    * 处理复选框往外抛值
@@ -2513,6 +2742,15 @@ var Table = function Table(props) {
       handCheckValue({});
     }
   };
+  /** 改变选择列 */
+
+
+  var changeSelectHead = function changeSelectHead(arr, item) {
+    handHeadDataCom(arr);
+    setHeadDataCom(arr);
+    setLocalStorageHeadCom(arr);
+    onClickColumns && onClickColumns(arr, item);
+  };
   /**
    * 改变显示列 bol true重置
    * @param headShowArr 当前显示列
@@ -2534,21 +2772,17 @@ var Table = function Table(props) {
         }
       }
 
-      handHeadDataCom(arr);
-      setHeadDataCom(arr);
-      onClickColumns && onClickColumns(arr, item);
+      changeSelectHead(arr, item);
       return;
     }
 
     headShowArr.sort(function (a, b) {
-      return a.orderNum - b.orderNum;
+      return Number(a.orderNum) - Number(b.orderNum);
     });
 
     var headShowArrHand = _toConsumableArray(headShowArr);
 
-    handHeadDataCom(headShowArrHand);
-    setHeadDataCom(headShowArrHand);
-    onClickColumns && onClickColumns(headShowArrHand, item);
+    changeSelectHead(headShowArrHand, item);
   };
   /**
    * 改变过滤
@@ -2556,16 +2790,9 @@ var Table = function Table(props) {
 
 
   var changeFilter = function changeFilter(val) {
+    constData.current.selectFilterCom = DeepClone(val);
     setSelectFilterCom(DeepClone(val));
-  };
-  /**
-   * 加载更多,点击改变分页
-   */
-
-
-  var changePageMore = function changePageMore() {
-    var pageHnad = Number(pageCom) + 1;
-    setPageCom(pageHnad);
+    handPage(1);
   }; // 表格头部memo
 
 
@@ -2591,10 +2818,11 @@ var Table = function Table(props) {
       showColumns: showColumns,
       rowKey: rowKey,
       fixedTable: fixedTable,
+      fixedColumn: fixedColumn,
       posFixed: posFixed,
       beyondText: beyondText
     });
-  }, [totalDataJson, showColumns, rowKey, rowData, checkJson, disabledJson, orderTypeArr, orderFieldArr, sortTable, filter, expandable, check, headSelectStatus, radio, align, showHeadList, headDataCom, selectFilterCom, operate, onClickColumns, sortTableRadio, fixedTable, posFixed, beyondText]); // 表格内容memo
+  }, [totalDataJson, showColumns, rowKey, rowData, checkJson, disabledJson, orderTypeArr, orderFieldArr, sortTable, filter, expandable, check, headSelectStatus, radio, align, showHeadList, headDataCom, selectFilterCom, operate, onClickColumns, sortTableRadio, fixedTable, posFixed, beyondText, fixedColumn]); // 表格内容memo
 
   var TableBodyMemo = useMemo(function () {
     return jsx(TableBody, {
@@ -2638,57 +2866,60 @@ var Table = function Table(props) {
         return setRefreshCom(Math.random());
       },
       posFixed: posFixed,
-      beyondText: beyondText
+      beyondText: beyondText,
+      fixedColumn: fixedColumn,
+      fixedTable: fixedTable
     });
-  }, [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]); // 表格分页memo
+  }, [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]); // 表格分页memo
 
   var TablePaginationMemo = useMemo(function () {
-    if (pagePagination === null || sizeCom === null || loadMore) return;
+    if (constData.current.page === null || constData.current.size === null || loadMore) return;
     return pagination && jsx(TableHead, {
       paginationType: paginationType,
       autoPagination: autoPagination,
       total: total,
-      page: pagePagination,
+      page: pageCom,
       currentRowsPerPage: sizeCom,
       rowsPerPage: sizeArrCom,
       changePage: changePage,
       changeRowsPerPage: changeRowsPerPage
     });
-  }, [total, pagePagination, sizeCom, sizeArrCom, pagination, loadMore, autoPagination, paginationType]); // 表格内容滚动
+  }, [total, pageCom, sizeCom, sizeArrCom, pagination, loadMore, autoPagination, paginationType]); // 表格内容滚动
 
   var tableBoxScroll = function tableBoxScroll(e) {
     var dom = tableRef.current;
     var scrollDom = e.target;
     if (!dom || !scrollDom) return;
-    dom.classList.remove('paraui-table-scroll-left', 'paraui-table-scroll-right', 'paraui-table-scroll-middle');
+    dom.classList.remove('table-scroll-left', 'table-scroll-right', 'table-scroll-middle');
     if (scrollDom.scrollWidth <= scrollDom.clientWidth) return; // 最左边
 
     if (scrollDom.scrollLeft === 0) {
-      dom.classList.add('paraui-table-scroll-left');
+      dom.classList.add('table-scroll-left');
       return;
     } // 最右边
 
 
     if (scrollDom.scrollLeft + scrollDom.clientWidth === scrollDom.scrollWidth) {
-      dom.classList.add('paraui-table-scroll-right');
+      dom.classList.add('table-scroll-right');
       return;
     }
 
-    dom.classList.add('paraui-table-scroll-middle');
+    dom.classList.add('table-scroll-middle');
   }; // 处理class
 
 
   var handClass = function handClass() {
-    var str = 'table paraui-table';
-    if (showColumns === 'inside') str += ' table-columns-inside';
-    if (pagination) str += ' table-pagination';
-    if (loadMore) str += ' table-load-more';
-    if (fixedTable) str += ' fixed-table';
-    if (check) str += ' paraui-table-check';
-    if (radio) str += ' paraui-table-radio';
-    if (expandable) str += ' paraui-table-expandable';
-    if (rowData.length === 0) str += ' paraui-table-no-data';
-    if (loadState) str += ' paraui-table-load';
+    var str = $prefixCls + '-table';
+    if (showColumns === 'inside') str += " ".concat($prefixCls, "-table-columns-inside");
+    if (pagination) str += " ".concat($prefixCls, "-table-pagination");
+    if (loadMore) str += " ".concat($prefixCls, "-table-load-more");
+    if (fixedTable) str += " ".concat($prefixCls, "-table-fixed-table");
+    if (fixedColumn) str += " ".concat($prefixCls, "-table-fixed-cloumn");
+    if (check) str += " ".concat($prefixCls, "-table-check");
+    if (radio) str += " ".concat($prefixCls, "-table-radio");
+    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 (className) str += ' ' + className;
     return str;
   }; // 改变屏幕大小
@@ -2711,11 +2942,8 @@ var Table = function Table(props) {
       onScroll: tableBoxScroll
     }, {
       children: [jsxs(TableElement, Object.assign({
-        sticky: true,
-        style: fixedTable ? {
-          tableLayout: 'fixed',
-          minWidth: tableMinWidth + 'px'
-        } : {
+        fixedColumn: fixedColumn,
+        style: {
           minWidth: tableMinWidth + 'px'
         }
       }, {