@qsxy/element-plus-react 1.0.0-next.10 → 1.0.0-next.12

package/dist/Table/hooks/useTable.js

@@ -1,409 +1,511 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+/* eslint-disable indent */
+import { useDebounceFn } from 'ahooks';
+import cloneDeep from 'lodash/cloneDeep';
+import { Children, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { isNotEmpty } from "../../Util";
+import { useChildrenInstance } from "../../hooks";
+import { flatTreeData } from "../treeUtil";
+import { TableIdManager, getRowIdentity } from "../util";
 
-// src/Table/hooks/useTable.ts
-var useTable_exports = {};
-__export(useTable_exports, {
-  useTable: () => useTable
-});
-module.exports = __toCommonJS(useTable_exports);
-var import_ahooks = require("ahooks");
-var import_cloneDeep = __toESM(require("lodash/cloneDeep"));
-var import_react = require("react");
-var import_Util = require("../../Util");
-var import_hooks = require("../../hooks");
-var import_treeUtil = require("../treeUtil");
-var import_util = require("../util");
-var useTable = (props, refs, tableId) => {
-  const getChildren = (0, import_hooks.useChildrenInstance)("TableColumn");
-  const _children = getChildren(props.children);
-  const maxLevel = (0, import_react.useRef)(0);
-  const flatColumns = (0, import_react.useRef)([]);
-  const oldBodyWidth = (0, import_react.useRef)(400);
-  const bodyWidth = (0, import_react.useRef)(400);
-  const scrollX = (0, import_react.useRef)(false);
-  const initialData = (0, import_react.useRef)([]);
-  const sortedData = (0, import_react.useRef)([]);
-  const isTree = (0, import_react.useRef)(false);
-  const treeNodes = (0, import_react.useRef)([]);
-  const [data, setData] = (0, import_react.useState)([]);
-  const treeProps = (0, import_react.useMemo)(() => {
-    return { hasChildren: "hasChildren", children: "children", ...props.treeProps ?? {} };
+/**
+ * @author	Parker
+ * @CreateTime	2022/9/11 12:24:23
+ * @LastEditor	Parker
+ * @LastEditor	Parker
+ * @ModifyTime	2022/11/19 23:23:42
+ */
+export var useTable = function useTable(props, refs, tableId) {
+  var getChildren = useChildrenInstance('TableColumn');
+  var _children = getChildren(props.children);
+  var maxLevel = useRef(0);
+  var flatColumns = useRef([]);
+  // 表格宽度
+  var oldBodyWidth = useRef(400);
+  var bodyWidth = useRef(400);
+  var scrollX = useRef(false);
+  var initialData = useRef([]);
+  var sortedData = useRef([]);
+  var isTree = useRef(false);
+  var treeNodes = useRef([]);
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    data = _useState2[0],
+    setData = _useState2[1];
+  var treeProps = useMemo(function () {
+    var _props$treeProps;
+    return _objectSpread({
+      hasChildren: 'hasChildren',
+      children: 'children'
+    }, (_props$treeProps = props.treeProps) !== null && _props$treeProps !== void 0 ? _props$treeProps : {});
   }, [props.treeProps]);
-  (0, import_react.useEffect)(() => {
-    isTree.current = props.rowKey && props.data.some((item) => treeProps.children in item || treeProps.hasChildren in item);
-    sortedData.current = initialData.current = (0, import_cloneDeep.default)(props.data);
+  useEffect(function () {
+    isTree.current = props.rowKey && props.data.some(function (item) {
+      return treeProps.children in item || treeProps.hasChildren in item;
+    });
+    sortedData.current = initialData.current = cloneDeep(props.data);
     if (isTree.current) {
-      const _data = (0, import_treeUtil.flatTreeData)((0, import_cloneDeep.default)(props.data), treeProps, props.rowKey, props.defaultExpandAll, props.expandRowKeys);
-      treeNodes.current = _data.map((item) => {
-        const { parentId, expanded, loading, display, level, noLazyChildren, indent } = item;
-        const id = (0, import_util.getRowIdentity)(item, props.rowKey);
-        return { id, parentId, expanded, loading, display, level, noLazyChildren, indent };
+      var _data = flatTreeData(cloneDeep(props.data), treeProps, props.rowKey, props.defaultExpandAll, props.expandRowKeys);
+      treeNodes.current = _data.map(function (item) {
+        var parentId = item.parentId,
+          expanded = item.expanded,
+          loading = item.loading,
+          display = item.display,
+          level = item.level,
+          noLazyChildren = item.noLazyChildren,
+          indent = item.indent;
+        var id = getRowIdentity(item, props.rowKey);
+        return {
+          id: id,
+          parentId: parentId,
+          expanded: expanded,
+          loading: loading,
+          display: display,
+          level: level,
+          noLazyChildren: noLazyChildren,
+          indent: indent
+        };
       });
       setData(_data);
     } else {
       setData(props.data);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.data]);
-  const [columns, setColumns] = (0, import_react.useState)([]);
-  const [flattenColumns, setFlattenColumns] = (0, import_react.useState)([]);
-  const [fixedLeftColumns, setFixedLeftColumns] = (0, import_react.useState)([]);
-  const [fixedRightColumns, setFixedRightColumns] = (0, import_react.useState)([]);
-  const [isGroup, setIsGroup] = (0, import_react.useState)(false);
-  const initColumns = (0, import_react.useCallback)(
-    (cols, level = 0) => {
-      return import_react.Children.map(cols, (item) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _i;
-        if (level > maxLevel.current) {
-          maxLevel.current = level;
-        }
-        let children = [], renderCell;
-        if ((_a = item.props) == null ? void 0 : _a.children) {
-          if (item.props.children instanceof Function) {
-            renderCell = item.props.children;
+
+  // 多级列
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    columns = _useState4[0],
+    setColumns = _useState4[1];
+  // 最后一级列
+  var _useState5 = useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    flattenColumns = _useState6[0],
+    setFlattenColumns = _useState6[1];
+  // 固定列
+  // const [fixedColumns, setFixedColumns] = useState<TableColumnCtx<T>[]>([]);
+  // 左固定列
+  var _useState7 = useState([]),
+    _useState8 = _slicedToArray(_useState7, 2),
+    fixedLeftColumns = _useState8[0],
+    setFixedLeftColumns = _useState8[1];
+  // 右固定列
+  var _useState9 = useState([]),
+    _useState10 = _slicedToArray(_useState9, 2),
+    fixedRightColumns = _useState10[0],
+    setFixedRightColumns = _useState10[1];
+  // 是否组合列
+  var _useState11 = useState(false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    isGroup = _useState12[0],
+    setIsGroup = _useState12[1];
+
+  /** 初始化列 */
+  var initColumns = useCallback(function (cols) {
+    var level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    return Children.map(cols, function (item) {
+      var _item$props, _item$props2, _item$props$width, _item$props3, _item$props4, _item$props5, _item$props$align, _item$props6, _item$props$align2, _item$props7, _item$props8, _item$props9;
+      if (level > maxLevel.current) {
+        maxLevel.current = level;
+      }
+      var children = [],
+        renderCell;
+      if ((_item$props = item.props) !== null && _item$props !== void 0 && _item$props.children) {
+        if (item.props.children instanceof Function) {
+          renderCell = item.props.children;
+        } else {
+          var _columns = getChildren(item.props.children);
+          if (_columns.length > 0) {
+            children = initColumns(item.props.children, level + 1);
           } else {
-            const _columns = getChildren(item.props.children);
-            if (_columns.length > 0) {
-              children = initColumns(item.props.children, level + 1);
-            } else {
-              renderCell = () => item.props.children;
-            }
+            renderCell = function renderCell() {
+              return item.props.children;
+            };
           }
         }
-        const column = {
-          ...item.props,
-          id: tableId + "_" + import_util.TableIdManager.nextColumnId(),
-          children,
-          level,
-          colSpan: children.length > 0 ? children.reduce((prev, child) => {
-            var _a2;
-            const len = ((_a2 = child == null ? void 0 : child.children) == null ? void 0 : _a2.length) ?? 1;
-            return prev + (len >= 1 ? len : 1);
-          }, 0) : 1,
-          isColumnGroup: children.length > 0,
-          isSubColumn: children.length === 0,
-          renderCell,
-          width: ((_b = item.props) == null ? void 0 : _b.type) === "expand" ? ((_c = item.props) == null ? void 0 : _c.width) ?? 48 : (_d = item.props) == null ? void 0 : _d.width,
-          align: ["index", "selection", "expand"].includes((_e = item.props) == null ? void 0 : _e.type) ? ((_f = item.props) == null ? void 0 : _f.align) ?? "center" : ((_g = item.props) == null ? void 0 : _g.align) ?? "left",
-          resizable: ((_h = item.props) == null ? void 0 : _h.type) === "expand" ? false : (_i = item.props) == null ? void 0 : _i.resizable
-        };
-        return column;
-      }).filter((item) => item !== null);
-    },
-    [getChildren, tableId]
-  );
-  const groupColumns = (0, import_react.useCallback)((cols, level = 0) => {
-    return cols.map((item) => {
+      }
+      var column = _objectSpread(_objectSpread({}, item.props), {}, {
+        id: tableId + '_' + TableIdManager.nextColumnId(),
+        children: children,
+        level: level,
+        colSpan: children.length > 0 ? children.reduce(function (prev, child) {
+          var _child$children$lengt, _child$children;
+          var len = (_child$children$lengt = child === null || child === void 0 || (_child$children = child.children) === null || _child$children === void 0 ? void 0 : _child$children.length) !== null && _child$children$lengt !== void 0 ? _child$children$lengt : 1;
+          return prev + (len >= 1 ? len : 1);
+        }, 0) : 1,
+        isColumnGroup: children.length > 0,
+        isSubColumn: children.length === 0,
+        renderCell: renderCell,
+        width: ((_item$props2 = item.props) === null || _item$props2 === void 0 ? void 0 : _item$props2.type) === 'expand' ? (_item$props$width = (_item$props3 = item.props) === null || _item$props3 === void 0 ? void 0 : _item$props3.width) !== null && _item$props$width !== void 0 ? _item$props$width : 48 : (_item$props4 = item.props) === null || _item$props4 === void 0 ? void 0 : _item$props4.width,
+        align: ['index', 'selection', 'expand'].includes((_item$props5 = item.props) === null || _item$props5 === void 0 ? void 0 : _item$props5.type) ? (_item$props$align = (_item$props6 = item.props) === null || _item$props6 === void 0 ? void 0 : _item$props6.align) !== null && _item$props$align !== void 0 ? _item$props$align : 'center' : (_item$props$align2 = (_item$props7 = item.props) === null || _item$props7 === void 0 ? void 0 : _item$props7.align) !== null && _item$props$align2 !== void 0 ? _item$props$align2 : 'left',
+        resizable: ((_item$props8 = item.props) === null || _item$props8 === void 0 ? void 0 : _item$props8.type) === 'expand' ? false : (_item$props9 = item.props) === null || _item$props9 === void 0 ? void 0 : _item$props9.resizable
+      });
+      return column;
+    }).filter(function (item) {
+      return item !== null;
+    });
+  }, [getChildren, tableId]);
+
+  /** 分组列 */
+  var groupColumns = useCallback(function (cols) {
+    var level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    return cols.map(function (item) {
       if (!flatColumns.current[level]) {
         flatColumns.current[level] = [];
       }
-      let children = [];
+      var children = [];
       if (item.children) {
         children = groupColumns(item.children, level + 1);
       }
-      const column = { ...item, children, rowSpan: children.length > 0 ? 1 : maxLevel.current - level + 1 };
+      var column = _objectSpread(_objectSpread({}, item), {}, {
+        children: children,
+        rowSpan: children.length > 0 ? 1 : maxLevel.current - level + 1
+      });
       flatColumns.current[level].push(column);
       return column;
     });
   }, []);
-  const getFlattenColumns = (0, import_react.useCallback)(
-    (immediate = true) => {
-      const result = [];
-      columns.forEach((row) => {
-        row.forEach((col) => {
-          if (col.isSubColumn) {
-            const find = flattenColumns.find((item) => item.id === col.id);
-            if (find && immediate) {
-              col = ["width", "minWidth", "realWidth"].reduce((prev, item) => {
-                if (find[item]) {
-                  return { ...prev, [item]: find[item] };
-                }
-                return prev;
-              }, col);
-              result.push(col);
-            } else {
-              result.push(col);
-            }
+  var getFlattenColumns = useCallback(function () {
+    var immediate = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+    var result = [];
+    columns.forEach(function (row) {
+      row.forEach(function (col) {
+        if (col.isSubColumn) {
+          var find = flattenColumns.find(function (item) {
+            return item.id === col.id;
+          });
+          if (find && immediate) {
+            // 表格重新布局后，同步下自定义宽度
+            col = ['width', 'minWidth', 'realWidth'].reduce(function (prev, item) {
+              if (find[item]) {
+                return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, item, find[item]));
+              }
+              return prev;
+            }, col);
+            result.push(col);
+          } else {
+            result.push(col);
           }
-        });
+        }
       });
-      return result;
-    },
-    [columns, flattenColumns]
-  );
-  const getFixedColumns = (0, import_react.useCallback)(() => {
-    const fixed = [];
-    const fixedLeft = [];
-    const fixedRight = [];
-    const dataColumns = getFlattenColumns();
-    dataColumns.forEach((item) => {
+    });
+    return result;
+  }, [columns, flattenColumns]);
+  var getFixedColumns = useCallback(function () {
+    var fixed = [];
+    var fixedLeft = [];
+    var fixedRight = [];
+    var dataColumns = getFlattenColumns();
+    dataColumns.forEach(function (item) {
       if (item.level === 0 && item.isSubColumn) {
-        if (item.fixed === true || item.fixed === "left") {
+        if (item.fixed === true || item.fixed === 'left') {
           fixed.push(item);
           fixedLeft.push(item);
-        } else if (item.fixed === "right") {
+        } else if (item.fixed === 'right') {
           fixedRight.push(item);
         }
       }
     });
     return {
-      fixed,
-      fixedLeft,
-      fixedRight
+      fixed: fixed,
+      fixedLeft: fixedLeft,
+      fixedRight: fixedRight
     };
   }, [getFlattenColumns]);
-  const setbodyWidth = (0, import_react.useCallback)(
-    (width) => {
-      if (width > 0 && oldBodyWidth.current !== width) {
-        oldBodyWidth.current = bodyWidth.current;
-        bodyWidth.current = width;
-        if (refs.tableHeader.current) {
-          refs.tableHeader.current.style.width = width + "px";
-        }
-        if (refs.tableBody.current) {
-          refs.tableBody.current.style.width = width + "px";
-        }
+  var setbodyWidth = useCallback(function (width) {
+    if (width > 0 && oldBodyWidth.current !== width) {
+      oldBodyWidth.current = bodyWidth.current;
+      bodyWidth.current = width;
+      if (refs.tableHeader.current) {
+        refs.tableHeader.current.style.width = width + 'px';
       }
-    },
-    [refs.tableBody, refs.tableHeader]
-  );
-  const updateColumnsWidth = (0, import_react.useCallback)(
-    (immediate = true) => {
-      var _a;
-      const { fit } = props;
-      let bodyMinWidth = 0;
-      const _bodyWidth = ((_a = refs.tableWrapper.current) == null ? void 0 : _a.clientWidth) || 0;
-      const dataColumns = getFlattenColumns(immediate);
-      const flexColumns = dataColumns.filter((column) => typeof column.width !== "number");
-      dataColumns.forEach((column) => {
-        if (typeof column.width === "number" && column.realWidth) {
-          column.realWidth = void 0;
-        }
+      if (refs.tableBody.current) {
+        refs.tableBody.current.style.width = width + 'px';
+      }
+      // if (refs.emptyBlock.current) {
+      //     refs.emptyBlock.current.style.width = width + 'px';
+      // }
+    }
+  }, [refs.tableBody, refs.tableHeader]);
+  var updateColumnsWidth = useCallback(function () {
+    var _refs$tableWrapper$cu;
+    var immediate = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+    var fit = props.fit;
+    var bodyMinWidth = 0;
+    var _bodyWidth = ((_refs$tableWrapper$cu = refs.tableWrapper.current) === null || _refs$tableWrapper$cu === void 0 ? void 0 : _refs$tableWrapper$cu.clientWidth) || 0;
+    var dataColumns = getFlattenColumns(immediate);
+    var flexColumns = dataColumns.filter(function (column) {
+      return typeof column.width !== 'number';
+    });
+    dataColumns.forEach(function (column) {
+      // Clean those columns whose width changed from flex to unflex
+      if (typeof column.width === 'number' && column.realWidth) {
+        column.realWidth = undefined;
+      }
+    });
+    if (flexColumns.length > 0 && fit) {
+      dataColumns.forEach(function (column) {
+        bodyMinWidth += Number(column.width || column.minWidth || 80);
       });
-      if (flexColumns.length > 0 && fit) {
-        dataColumns.forEach((column) => {
-          bodyMinWidth += Number(column.width || column.minWidth || 80);
-        });
-        if (bodyMinWidth <= _bodyWidth) {
-          scrollX.current = false;
-          const totalFlexWidth = _bodyWidth - bodyMinWidth;
-          if (flexColumns.length === 1) {
-            flexColumns[0].realWidth = Number(flexColumns[0].minWidth || 80) + totalFlexWidth;
-          } else {
-            const allColumnsWidth = flexColumns.reduce((prev, column) => prev + Number(column.minWidth || 80), 0);
-            const flexWidthPerPixel = totalFlexWidth / allColumnsWidth;
-            let noneFirstWidth = 0;
-            flexColumns.forEach((column, index) => {
-              if (index === 0) {
-                return;
-              }
-              const flexWidth = Math.floor(Number(column.minWidth || 80) * flexWidthPerPixel);
-              noneFirstWidth += flexWidth;
-              column.realWidth = Number(column.minWidth || 80) + flexWidth;
-            });
-            flexColumns[0].realWidth = Number(flexColumns[0].minWidth || 80) + totalFlexWidth - noneFirstWidth;
-          }
+      if (bodyMinWidth <= _bodyWidth) {
+        // DON'T HAVE SCROLL BAR
+        scrollX.current = false;
+        var totalFlexWidth = _bodyWidth - bodyMinWidth;
+        if (flexColumns.length === 1) {
+          flexColumns[0].realWidth = Number(flexColumns[0].minWidth || 80) + totalFlexWidth;
         } else {
-          scrollX.current = true;
-          flexColumns.forEach((column) => {
-            column.realWidth = Number(column.minWidth || 80);
+          var allColumnsWidth = flexColumns.reduce(function (prev, column) {
+            return prev + Number(column.minWidth || 80);
+          }, 0);
+          var flexWidthPerPixel = totalFlexWidth / allColumnsWidth;
+          var noneFirstWidth = 0;
+          flexColumns.forEach(function (column, index) {
+            if (index === 0) {
+              return;
+            }
+            var flexWidth = Math.floor(Number(column.minWidth || 80) * flexWidthPerPixel);
+            noneFirstWidth += flexWidth;
+            column.realWidth = Number(column.minWidth || 80) + flexWidth;
           });
+          flexColumns[0].realWidth = Number(flexColumns[0].minWidth || 80) + totalFlexWidth - noneFirstWidth;
         }
-        setbodyWidth(Math.max(bodyMinWidth, _bodyWidth));
       } else {
-        dataColumns.forEach((column) => {
-          if (!column.width && !column.minWidth) {
-            column.realWidth = 80;
-          } else {
-            column.realWidth = Number(column.width || column.minWidth);
-          }
-          bodyMinWidth += column.realWidth;
+        // HAVE HORIZONTAL SCROLL BAR
+        scrollX.current = true;
+        flexColumns.forEach(function (column) {
+          column.realWidth = Number(column.minWidth || 80);
         });
-        scrollX.current = bodyMinWidth > _bodyWidth;
-        setbodyWidth(bodyMinWidth);
       }
-      const {
-        /* fixed,  */
-        fixedLeft,
-        fixedRight
-      } = getFixedColumns();
-      if (fixedLeft.length > 0) {
-        let fixedWidth = 0;
-        setFixedLeftColumns(
-          fixedLeft.map((column) => {
-            column.offsetWidth = fixedWidth;
-            fixedWidth += Number(column.realWidth || column.width);
-            return column;
-          })
-        );
-      }
-      if (fixedRight.length > 0) {
-        let rightFixedWidth = 0;
-        setFixedRightColumns(
-          fixedRight.reverse().map((column) => {
-            column.offsetWidth = rightFixedWidth;
-            rightFixedWidth += Number(column.realWidth || column.width);
-            return column;
-          }).reverse()
-        );
-      }
-      setFlattenColumns(dataColumns);
-    },
-    [getFixedColumns, getFlattenColumns, props, refs.tableWrapper, setbodyWidth]
-  );
-  const setScrollClassByEl = (el, className) => {
+      setbodyWidth(Math.max(bodyMinWidth, _bodyWidth));
+      // this.table.state.resizeState.value.width = this.bodyWidth.value;
+    } else {
+      dataColumns.forEach(function (column) {
+        if (!column.width && !column.minWidth) {
+          column.realWidth = 80;
+        } else {
+          column.realWidth = Number(column.width || column.minWidth);
+        }
+        bodyMinWidth += column.realWidth;
+      });
+      scrollX.current = bodyMinWidth > _bodyWidth;
+      setbodyWidth(bodyMinWidth);
+    }
+    var _getFixedColumns = getFixedColumns(),
+      fixedLeft = _getFixedColumns.fixedLeft,
+      fixedRight = _getFixedColumns.fixedRight;
+
+    // if (fixedLeftColumns.length > 0) {
+    //     setFixedColumns(fixed);
+    // }
+
+    if (fixedLeft.length > 0) {
+      var fixedWidth = 0;
+      setFixedLeftColumns(fixedLeft.map(function (column) {
+        column.offsetWidth = fixedWidth;
+        fixedWidth += Number(column.realWidth || column.width);
+        return column;
+      }));
+
+      // this.fixedWidth.value = fixedWidth;
+    }
+    if (fixedRight.length > 0) {
+      var rightFixedWidth = 0;
+      setFixedRightColumns(fixedRight.reverse().map(function (column) {
+        column.offsetWidth = rightFixedWidth;
+        rightFixedWidth += Number(column.realWidth || column.width);
+        return column;
+      }).reverse());
+
+      // this.rightFixedWidth.value = rightFixedWidth;
+    }
+    setFlattenColumns(dataColumns);
+  }, [getFixedColumns, getFlattenColumns, props, refs.tableWrapper, setbodyWidth]);
+
+  // // 更新列
+  // const updateColumns = () => {
+  //     const fixedColumns = flattenColumns.filter(item => item.fixed === true || item.fixed === 'left');
+  //     const rightFixedColumns = flattenColumns.filter(column => column.fixed === 'right');
+  //     if (fixedColumns.length > 0 && flattenColumns[0] && flattenColumns[0].type === 'selection' && !flattenColumns[0].fixed) {
+  //         flattenColumns[0].fixed = true;
+  //         fixedColumns.unshift(flattenColumns[0]);
+  //     }
+
+  //     const notFixedColumns = flattenColumns.filter(column => !column.fixed);
+  //     const originColumns = [].concat(fixedColumns).concat(notFixedColumns).concat(rightFixedColumns);
+  //     const leafColumns = doFlattenColumns(notFixedColumns);
+  //     const fixedLeafColumns = doFlattenColumns(fixedColumns);
+  //     const rightFixedLeafColumns = doFlattenColumns(rightFixedColumns);
+
+  //     const leafColumnsLength = leafColumns.length;
+  //     const fixedLeafColumnsLength = fixedLeafColumns.length;
+  //     const rightFixedLeafColumnsLength = rightFixedLeafColumns.length;
+
+  //     setFlattenColumns([].concat(fixedLeafColumns).concat(leafColumns).concat(rightFixedLeafColumns));
+  //     // isComplex = fixedColumns.length > 0 || rightFixedColumns.length > 0;
+  // };
+
+  var setScrollClassByEl = function setScrollClassByEl(el, className) {
     if (!el) {
       return;
     }
-    const classList = Array.from(el.classList).filter((item) => !item.startsWith("is-scrolling-"));
-    classList.push(scrollX.current ? className : "is-scrolling-none");
+    var classList = Array.from(el.classList).filter(function (item) {
+      return !item.startsWith('is-scrolling-');
+    });
+    classList.push(scrollX.current ? className : 'is-scrolling-none');
     classList.push(className);
-    el.className = classList.join(" ");
+    el.className = classList.join(' ');
   };
-  const setScrollClass = (className) => {
-    const { tableWrapper } = refs;
+  var setScrollClass = function setScrollClass(className) {
+    var tableWrapper = refs.tableWrapper;
     if (tableWrapper.current) {
       setScrollClassByEl(tableWrapper.current, className);
     }
   };
-  const hasScrollClass = (className) => {
-    const { tableWrapper } = refs;
+  var hasScrollClass = function hasScrollClass(className) {
+    var tableWrapper = refs.tableWrapper;
     return !!(tableWrapper.current && tableWrapper.current.classList.contains(className));
   };
-  const syncPosition = function() {
+  var syncPosition = function syncPosition() {
     if (!refs.scrollBarRef.current) {
       return;
     }
     if (!scrollX.current) {
-      const scrollingNoneClass = "is-scrolling-none";
+      var scrollingNoneClass = 'is-scrolling-none';
       if (!hasScrollClass(scrollingNoneClass)) {
         setScrollClass(scrollingNoneClass);
       }
       return;
     }
-    const scrollContainer = refs.scrollBarRef.current.wrapRef;
+    var scrollContainer = refs.scrollBarRef.current.wrapRef;
     if (!scrollContainer.current) {
       return;
     }
-    const { scrollLeft, offsetWidth, scrollWidth } = scrollContainer.current;
-    const { headerWrapper, footerWrapper } = refs;
+    var _scrollContainer$curr = scrollContainer.current,
+      scrollLeft = _scrollContainer$curr.scrollLeft,
+      offsetWidth = _scrollContainer$curr.offsetWidth,
+      scrollWidth = _scrollContainer$curr.scrollWidth;
+    var headerWrapper = refs.headerWrapper,
+      footerWrapper = refs.footerWrapper;
     if (headerWrapper.current) {
       headerWrapper.current.scrollLeft = scrollLeft;
     }
     if (footerWrapper.current) {
       footerWrapper.current.scrollLeft = scrollLeft;
     }
-    const maxScrollLeftPosition = scrollWidth - offsetWidth - 1;
+    var maxScrollLeftPosition = scrollWidth - offsetWidth - 1;
     if (scrollLeft >= maxScrollLeftPosition) {
-      setScrollClass("is-scrolling-right");
+      setScrollClass('is-scrolling-right');
     } else if (scrollLeft === 0) {
-      setScrollClass("is-scrolling-left");
+      setScrollClass('is-scrolling-left');
     } else {
-      setScrollClass("is-scrolling-middle");
+      setScrollClass('is-scrolling-middle');
     }
   };
-  const scheduleLayout = (immediate = true) => {
-    var _a;
-    if (((_a = refs.tableWrapper.current) == null ? void 0 : _a.clientWidth) === 0) {
+
+  /**
+   * 更新 DOM
+   * @param immediate 是否立即更新
+   * @returns
+   */
+  var scheduleLayout = function scheduleLayout() {
+    var _refs$tableWrapper$cu2;
+    var immediate = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+    if (((_refs$tableWrapper$cu2 = refs.tableWrapper.current) === null || _refs$tableWrapper$cu2 === void 0 ? void 0 : _refs$tableWrapper$cu2.clientWidth) === 0) {
       return;
     }
     updateColumnsWidth(immediate);
     requestAnimationFrame(syncPosition);
+    // if (needUpdateColumns) {
+    //     updateColumns();
+    // }
+    // if (immediate) {
+    //     instance.state.doLayout();
+    // } else {
+    //     instance.state.debouncedUpdateLayout();
+    // }
   };
-  const { run } = (0, import_ahooks.useDebounceFn)(
-    () => {
+  var _useDebounceFn = useDebounceFn(function () {
       scheduleLayout();
-    },
-    {
+    }, {
       wait: 200
-    }
-  );
-  window.addEventListener("resize", run);
-  (0, import_react.useEffect)(() => {
-    var _a;
-    if (((_a = refs.tableWrapper.current) == null ? void 0 : _a.clientWidth) === 0) {
+    }),
+    run = _useDebounceFn.run;
+  window.addEventListener('resize', run);
+  useEffect(function () {
+    var _refs$tableWrapper$cu3;
+    if (((_refs$tableWrapper$cu3 = refs.tableWrapper.current) === null || _refs$tableWrapper$cu3 === void 0 ? void 0 : _refs$tableWrapper$cu3.clientWidth) === 0) {
+      // warning(false, '表格宽度为0，无法初始化，如果表格所在的容器是懒加载，请忽略此消息！');
       return;
     }
-    import_util.TableIdManager.columnId = 0;
-    const children = getChildren(props.children);
-    const _columns = initColumns(children);
+    TableIdManager.columnId = 0;
+    var children = getChildren(props.children);
+    var _columns = initColumns(children);
     groupColumns(_columns);
     setColumns(flatColumns.current);
     setIsGroup(flatColumns.current.length > 1);
     flatColumns.current = [];
+    // requestAnimationFrame(scheduleLayout);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.children]);
-  (0, import_react.useEffect)(() => {
+  useEffect(function () {
     scheduleLayout();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [columns]);
-  const treeExpandCell = (0, import_react.useMemo)(() => {
-    let dataColumns = [];
+  var treeExpandCell = useMemo(function () {
+    var dataColumns = [];
     if (fixedLeftColumns.length > 0) {
-      dataColumns = fixedLeftColumns.filter((item) => !["index", "selection", "expand"].includes(item.type));
+      dataColumns = fixedLeftColumns.filter(function (item) {
+        return !['index', 'selection', 'expand'].includes(item.type);
+      });
     }
     if (dataColumns.length === 0) {
-      dataColumns = flattenColumns.filter((item) => !["index", "selection", "expand"].includes(item.type));
+      dataColumns = flattenColumns.filter(function (item) {
+        return !['index', 'selection', 'expand'].includes(item.type);
+      });
     }
-    return dataColumns.length > 0 ? dataColumns[0] : void 0;
+    return dataColumns.length > 0 ? dataColumns[0] : undefined;
   }, [fixedLeftColumns, flattenColumns]);
-  const isTreeTable = (0, import_react.useCallback)(() => isTree.current === true, []);
-  const isTreeExpandCell = (0, import_react.useCallback)(
-    (id) => {
-      if (isTreeTable() && (0, import_Util.isNotEmpty)(props.rowKey) && treeExpandCell) {
-        return treeExpandCell.id === id;
-      }
-      return false;
-    },
-    [isTreeTable, props.rowKey, treeExpandCell]
-  );
+  var isTreeTable = useCallback(function () {
+    return isTree.current === true;
+  }, []);
+  var isTreeExpandCell = useCallback(function (id) {
+    if (isTreeTable() && isNotEmpty(props.rowKey) && treeExpandCell) {
+      return treeExpandCell.id === id;
+    }
+    return false;
+  }, [isTreeTable, props.rowKey, treeExpandCell]);
   return {
-    data,
-    setData,
-    _children,
-    columns,
-    flattenColumns,
+    data: data,
+    setData: setData,
+    _children: _children,
+    columns: columns,
+    flattenColumns: flattenColumns,
     // fixedColumns,
-    fixedLeftColumns,
-    fixedRightColumns,
-    isGroup,
-    bodyWidth,
-    maxLevel,
-    scheduleLayout,
-    setScrollClass,
-    syncPosition,
-    initialData,
-    sortedData,
-    treeNodes,
-    treeProps,
-    isTreeTable,
-    isTreeExpandCell
+    fixedLeftColumns: fixedLeftColumns,
+    fixedRightColumns: fixedRightColumns,
+    isGroup: isGroup,
+    bodyWidth: bodyWidth,
+    maxLevel: maxLevel,
+    scheduleLayout: scheduleLayout,
+    setScrollClass: setScrollClass,
+    syncPosition: syncPosition,
+    initialData: initialData,
+    sortedData: sortedData,
+    treeNodes: treeNodes,
+    treeProps: treeProps,
+    isTreeTable: isTreeTable,
+    isTreeExpandCell: isTreeExpandCell
   };
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  useTable
-});
+};