@qsxy/element-plus-react 1.0.3 → 2.0.0

package/dist/Steps/typings.d.ts

@@ -0,0 +1,119 @@
+import React from 'react';
+import { IconName } from '../Icon';
+import type { BaseProps, NativeProps } from '../types/common';
+export type StepsStatus = '' | 'wait' | 'process' | 'finish' | 'error' | 'success';
+export interface StepsProps extends BaseProps, NativeProps {
+    /**
+     * 每个 step 的间距，不填写将自适应间距。支持百分比。
+     * @default ''
+     */
+    space?: number | string;
+    /**
+     * 设置当前激活步骤
+     * @default 0
+     */
+    active?: number;
+    /**
+     * 显示方向
+     * @default 'horizontal'
+     */
+    direction?: 'horizontal' | 'vertical';
+    /**
+     * 是否进行居中对齐
+     * @default false
+     */
+    alignCenter?: boolean;
+    /**
+     * 是否应用简洁风格
+     * @default false
+     */
+    simple?: boolean;
+    /**
+     * 设置结束步骤的状态
+     * @default 'finish'
+     */
+    finishStatus?: StepsStatus;
+    /**
+     * 设置当前步骤的状态
+     * @default 'process'
+     */
+    processStatus?: StepsStatus;
+    /**
+     * 步骤切换时触发
+     */
+    onChange?: (newVal: number, oldVal: number) => void;
+}
+export interface StepItemState {
+    /**
+     * 步骤唯一标识
+     */
+    uid: number;
+    /**
+     * 当前步骤状态
+     */
+    currentStatus: string;
+    /**
+     * 内部状态
+     */
+    internalStatus: string;
+    /**
+     * 步骤索引
+     */
+    indexRef: React.MutableRefObject<number>;
+    /**
+     * 设置步骤索引
+     */
+    setIndex: (val: number) => void;
+    /**
+     * 计算进度条动画
+     */
+    calcProgress: (status: string) => void;
+    /**
+     * 更新步骤状态
+     */
+    updateStatus: (activeIndex: number) => void;
+}
+export interface StepsContextProps {
+    /**
+     * Steps 组件的 props
+     */
+    props: StepsProps;
+    /**
+     * 所有步骤项的状态列表
+     */
+    steps: StepItemState[];
+    /**
+     * 注册步骤项
+     */
+    addStep: (item: StepItemState) => void;
+    /**
+     * 当前激活步骤
+     * @default 0
+     */
+    active?: number;
+    /**
+     * 移除步骤项
+     */
+    removeStep: (item: StepItemState) => void;
+}
+export interface StepProps extends BaseProps, NativeProps {
+    /**
+     * 标题
+     * @default ''
+     */
+    title?: string | React.ReactNode;
+    /**
+     * Step 组件的自定义图标
+     */
+    icon?: IconName;
+    /**
+     * 描述文案
+     * @default ''
+     */
+    description?: string | React.ReactNode;
+    /**
+     * 设置当前步骤的状态，不设置则根据 steps 确定状态
+     * @default ''
+     */
+    status?: StepsStatus;
+}

package/dist/Steps/typings.js

@@ -0,0 +1 @@
+export {};

package/dist/Switch/typings.d.ts

@@ -32,7 +32,6 @@ export interface SwitchProps<V = ValueType> extends Omit<FormControlBaseProps<V>
     /** switch的状态为 off 时的值 */
     inactiveValue?: V;
     /**  */
-    validateEvent?: boolean;
     /** 是否显示加载中 */
     loading?: boolean;
     /** 无论图标或文本是否显示在点内，只会呈现文本的第一个字符 */

package/dist/Table/Table.js

@@ -1,5 +1,5 @@
 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); }
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
 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; }
@@ -28,7 +28,7 @@ function InternalTable(props, ref) {
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   props = mergeDefaultProps({
-    data: [],
+    // data: [],
     fit: true,
     showHeader: true,
     tableLayout: 'fixed',
@@ -134,7 +134,7 @@ function InternalTable(props, ref) {
       setData: setData
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, m(_templateObject || (_templateObject = _taggedTemplateLiteral(["fit"]))), fit), m(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["striped"]))), stripe), m(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["border"]))), border || isGroup), m(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["group"]))), isGroup), m(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["fluid-height"]))), maxHeight), m(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["enable-row-hover"]))), true), m('enable-row-transition'), (data || []).length !== 0 && (data || []).length < 100), 'has-footer', showSummary), b(), m(size), props.className, m(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["layout", ""])), tableLayout)),
+    className: classNames(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, m(_templateObject || (_templateObject = _taggedTemplateLiteral(["fit"]))), fit), m(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["striped"]))), stripe), m(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["border"]))), border || isGroup), m(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["group"]))), isGroup), m(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["fluid-height"]))), maxHeight), m(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["enable-row-hover"]))), true), m('enable-row-transition'), (data || []).length !== 0 && (data || []).length < 100), 'has-footer', showSummary), b(), m(size), props.className, m("layout-".concat(tableLayout))),
     style: _objectSpread(_objectSpread({}, props.style), {}, {
       height: height,
       maxHeight: maxHeight
@@ -142,7 +142,7 @@ function InternalTable(props, ref) {
     ref: refs.tableWrapper
   }, /*#__PURE__*/React.createElement("div", {
     ref: refs.innerWrpper,
-    className: e(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["inner-wrapper"]))),
+    className: e(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["inner-wrapper"]))),
     style: {
       height: height,
       maxHeight: maxHeight
@@ -150,11 +150,11 @@ function InternalTable(props, ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "hidden-columns"
   }, _children), showHeader && tableLayout === 'fixed' && /*#__PURE__*/React.createElement("div", {
-    className: e(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["header-wrapper"]))),
+    className: e(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["header-wrapper"]))),
     ref: refs.headerWrapper
   }, /*#__PURE__*/React.createElement("table", {
     ref: refs.tableHeader,
-    className: e(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["header"]))),
+    className: e(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["header"]))),
     border: 0,
     cellPadding: 0,
     cellSpacing: 0
@@ -177,7 +177,7 @@ function InternalTable(props, ref) {
   }, /*#__PURE__*/React.createElement(TableHeader, {
     scheduleLayout: scheduleLayout
   })))), /*#__PURE__*/React.createElement("div", {
-    className: e(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["body-wrapper"])))
+    className: e(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["body-wrapper"])))
   }, /*#__PURE__*/React.createElement(Scrollbar, {
     ref: refs.scrollBarRef,
     viewStyle: {
@@ -200,7 +200,7 @@ function InternalTable(props, ref) {
     }
   }, /*#__PURE__*/React.createElement("table", {
     ref: refs.tableBody,
-    className: e(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["body"]))),
+    className: e(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["body"]))),
     border: 0,
     cellPadding: 0,
     cellSpacing: 0,
@@ -226,30 +226,30 @@ function InternalTable(props, ref) {
   }, tableLayout === 'auto' && /*#__PURE__*/React.createElement(TableHeader, {
     scheduleLayout: scheduleLayout
   }), /*#__PURE__*/React.createElement(TableBody, null))), append && /*#__PURE__*/React.createElement("div", {
-    className: e(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["append-wrapper"])))
+    className: e(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["append-wrapper"])))
   }, append)), !loading && data.length === 0 &&
   /*#__PURE__*/
   // @ts-ignore
   React.createElement("div", {
     ref: refs.emptyBlock,
-    className: e(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["empty-block"]))),
+    className: e(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["empty-block"]))),
     style: {
       height: '100%',
       position: tableLayout === 'auto' ? 'unset' : ''
     }
   }, /*#__PURE__*/React.createElement("span", {
-    className: e(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["empty-text"])))
+    className: e(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["empty-text"])))
   }, emptyText)), /*#__PURE__*/React.createElement(Loading, {
-    className: e(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["loading"]))),
+    className: e(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["loading"]))),
     fullscreen: false,
     background: "rgba(255, 255, 255, 0.6)",
     text: "\u6B63\u5728\u52A0\u8F7D\u4E2D...",
     visible: loading
   })), showSummary && /*#__PURE__*/React.createElement("div", {
-    className: e(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["footer-wrapper"]))),
+    className: e(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["footer-wrapper"]))),
     ref: refs.footerWrapper
   })), /*#__PURE__*/React.createElement("div", {
-    className: e(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["column-resize-proxy"]))),
+    className: e(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["column-resize-proxy"]))),
     ref: refs.resizeHelper,
     style: {
       display: 'none'

package/dist/Table/TableBody.js

@@ -68,10 +68,10 @@ var TableBody = function TableBody() {
     });
   }, [fixedLeftColumns, fixedRightColumns, flattenColumns]);
   var isTreeTalbe = useMemo(function () {
-    return props.data.some(function (item) {
+    return data.some(function (item) {
       return treeProps.children in item || treeProps.hasChildren in item;
     });
-  }, [props.data, treeProps.children, treeProps.hasChildren]);
+  }, [data, treeProps.children, treeProps.hasChildren]);
 
   // useEffect(() => {
   //     if (rowKey && isTreeTalbe && !defaultExpandAll) {
@@ -196,7 +196,7 @@ var TableBody = function TableBody() {
         key: "".concat(tableId, "_").concat(rowIndex, "_").concat(column.id),
         rowRef: rowRef
       });
-    }), fixedRightColumns.map(function (column) {
+    }), fixedRightColumns.map(function (column, index) {
       columnIndex++;
       var _isMerge3 = isMerge(row, rowIndex, column, columnIndex),
         rowSpan = _isMerge3.rowSpan,
@@ -213,7 +213,7 @@ var TableBody = function TableBody() {
         rowSpan: rowSpan,
         colSpan: colSpan,
         className: classNames(bm('fixed-column', 'right'), is({
-          'first-column': columnIndex === 0
+          'first-column': index === 0
         })),
         style: {
           right: column.offsetWidth

package/dist/Table/TableCell.js

@@ -1,11 +1,11 @@
 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); }
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 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); }
@@ -32,6 +32,7 @@ import { TableBodyContext, TableContext } from "./TableContext";
 import { activeRow, onCheck } from "./hooks/useSelection";
 import { addTreeChildren, getAllChildren, mergeTreeData } from "./treeUtil";
 import { createTablePopper, getRowIdentity, getRowIndex, getStyle, insertAfter } from "./util";
+var removePopper;
 var TableCell = function TableCell(p) {
   var row = p.row,
     column = p.column,
@@ -110,9 +111,12 @@ var TableCell = function TableCell(p) {
   /** 鼠标悬浮单元格事件 */
   var handleCellMouseEnter = useCallback(function (_row, _column, event) {
     onCellMouseEnter === null || onCellMouseEnter === void 0 || onCellMouseEnter(_row, _column, event.currentTarget, event);
-    if (!['index', 'selection'].includes((_column === null || _column === void 0 ? void 0 : _column.type) || '') && column.showOverflowTooltip) {
+    if (removePopper) {
+      removePopper();
+    }
+    if (!['index', 'selection', 'expand'].includes((_column === null || _column === void 0 ? void 0 : _column.type) || '') && (props.showOverflowTooltip || column.showOverflowTooltip)) {
       var cell = event.currentTarget;
-      var cellChild = event.currentTarget.querySelector('.' + e(_templateObject || (_templateObject = _taggedTemplateLiteral(["cell-content"]))));
+      var cellChild = event.currentTarget.querySelector('.cell');
       var range = document.createRange();
       range.setStart(cellChild, 0);
       range.setEnd(cellChild, cellChild.childNodes.length);
@@ -120,14 +124,37 @@ var TableCell = function TableCell(p) {
       var padding = (Number.parseInt(getStyle(cellChild, 'paddingLeft'), 10) || 0) + (Number.parseInt(getStyle(cellChild, 'paddingRight'), 10) || 0);
       if (rangeWidth + padding > cellChild.offsetWidth || cellChild.scrollWidth > cellChild.offsetWidth) {
         // tableRefs.tableWrapper.current && console.log(tableRefs.tableWrapper.current.getBoundingClientRect());
-        tableRefs.tableWrapper.current && createTablePopper(tableRefs.tableWrapper.current,
-        // {
-        //     getBoundingClientRect: tableRefs.tableWrapper.current.getBoundingClientRect(),
-        // },
-        cell, cell.innerText || cell.textContent || '', tooltipRef);
+        var popperContent = cell.innerText || cell.textContent || '';
+        if (props.tooltipFormatter) {
+          popperContent = props.tooltipFormatter({
+            row: _row,
+            column: _column,
+            cellValue: cell.innerText || cell.textContent || ''
+          });
+        } else if (column.tooltipFormatter) {
+          popperContent = column.tooltipFormatter({
+            row: _row,
+            column: _column,
+            cellValue: cell.innerText || cell.textContent || ''
+          });
+        }
+        if (tableRefs.tableWrapper.current) {
+          removePopper = createTablePopper(tableRefs.tableWrapper.current, cell, popperContent, tooltipRef);
+        }
       }
     }
-  }, [column.showOverflowTooltip, e, onCellMouseEnter, tableRefs.tableWrapper]);
+  }, [onCellMouseEnter, props, column, tableRefs.tableWrapper]);
+
+  /** 鼠标离开单元格事件 - 关闭 tooltip */
+  var handleCellMouseLeave = useCallback(function (_row, _column, event) {
+    onCellMouseLeave === null || onCellMouseLeave === void 0 || onCellMouseLeave(_row, _column, event.currentTarget, event);
+    // 鼠标离开单元格时，立即隐藏 tooltip
+    if (tooltipRef.current) {
+      setTimeout(function () {
+        tooltipRef.current.onClose();
+      }, 0);
+    }
+  }, [onCellMouseLeave, tooltipRef]);
   var rowIndex = useMemo(function () {
     return getRowIndex(column.index, p.rowIndex, row);
   }, [column.index, p.rowIndex, row]);
@@ -168,13 +195,13 @@ var TableCell = function TableCell(p) {
         height: rowHeight
       });
     }
-    if (tableLayout === 'fixed' && _column.showOverflowTooltip) {
+    if (tableLayout === 'fixed' && (props.showOverflowTooltip || _column.showOverflowTooltip)) {
       Object.assign(res, {
         width: (column.width || column.realWidth || column.minWidth || 80) - 1
       });
     }
     return res;
-  }, [column.minWidth, column.realWidth, column.width, rowHeight, tableLayout]);
+  }, [column.minWidth, column.realWidth, column.width, props.showOverflowTooltip, rowHeight, tableLayout]);
 
   /** 获取树形表格行层级 */
   var getLevel = useCallback(function (div) {
@@ -215,7 +242,7 @@ var TableCell = function TableCell(p) {
                   display: true
                 }) : item;
               });
-              var expandIcon = nextRow.current.querySelector(".".concat(e(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["expand-icon"])))));
+              var expandIcon = nextRow.current.querySelector(".".concat(e(_templateObject || (_templateObject = _taggedTemplateLiteral(["expand-icon"])))));
               if (expandIcon) {
                 // 下一行层级为0或层级小于当前行层级时，说明子级行遍历结束，跳出循环
                 var _nextLevel = getLevel(nextRow.current.nextSibling);
@@ -348,7 +375,7 @@ var TableCell = function TableCell(p) {
     if (rootRef.current && trRef.current && expand.current === true) {
       rootRef.current.render( /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("td", {
         colSpan: flattenColumns.length,
-        className: classNames(e(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["cell"]))), e(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["expanded-cell"]))))
+        className: classNames(e(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["cell"]))), e(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["expanded-cell"]))))
       }, (column === null || column === void 0 ? void 0 : column.renderCell) && column.renderCell({
         row: row,
         column: column,
@@ -389,7 +416,7 @@ var TableCell = function TableCell(p) {
               rootRef.current = createRoot(tr);
               rootRef.current.render( /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("td", {
                 colSpan: flattenColumns.length,
-                className: classNames(e(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["cell"]))), e(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["expanded-cell"]))))
+                className: classNames(e(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["cell"]))), e(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["expanded-cell"]))))
               }, (column === null || column === void 0 ? void 0 : column.renderCell) && column.renderCell({
                 row: row,
                 column: column,
@@ -420,13 +447,13 @@ var TableCell = function TableCell(p) {
   /**  */
   var treeSuffix = useMemo(function () {
     return isTreeExpandCell(column.id) && /*#__PURE__*/React.createElement(React.Fragment, null, column.level > 0 && /*#__PURE__*/React.createElement("span", {
-      className: e(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["indent"]))),
+      className: e(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["indent"]))),
       style: {
         paddingLeft: indent * column.level
       }
-    }), (isNotEmpty(row[treeProps.children]) || row[treeProps.hasChildren]) && /*#__PURE__*/React.createElement("div", {
+    }), (isNotEmpty(row[treeProps.children]) || row[treeProps.hasChildren]) && /*#__PURE__*/React.createElement("button", {
       ref: expandCell,
-      className: classNames(e(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["expand-icon"]))), _defineProperty({}, em('expand-icon', 'expanded'), row === null || row === void 0 ? void 0 : row.expanded)),
+      className: classNames(e(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["expand-icon"]))), _defineProperty({}, em('expand-icon', 'expanded'), row === null || row === void 0 ? void 0 : row.expanded)),
       onClick: handleExpandTreeCell
     }, loading ? /*#__PURE__*/React.createElement(Icon, {
       name: "loader",
@@ -435,7 +462,7 @@ var TableCell = function TableCell(p) {
     }) : /*#__PURE__*/React.createElement(Icon, {
       name: "angle-right"
     })), isEmpty(row[treeProps.children]) && !row[treeProps.hasChildren] && /*#__PURE__*/React.createElement("span", {
-      className: e(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["placeholder"])))
+      className: e(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["placeholder"])))
     }));
   }, [column.id, column.level, e, em, handleExpandTreeCell, indent, isTreeExpandCell, loading, row, treeProps.children, treeProps.hasChildren]);
 
@@ -451,7 +478,7 @@ var TableCell = function TableCell(p) {
 
   return /*#__PURE__*/React.createElement("td", {
     ref: tdRef,
-    className: classNames(column.id, e(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["cell"]))), _defineProperty({}, bm('column', 'selection'), column.type === 'selection'), column.className, is(column.align), className, typeof cellClassName === 'function' ? cellClassName === null || cellClassName === void 0 ? void 0 : cellClassName({
+    className: classNames(column.id, e(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["cell"]))), _defineProperty({}, bm('column', 'selection'), column.type === 'selection'), column.className, is(column.align), className, typeof cellClassName === 'function' ? cellClassName === null || cellClassName === void 0 ? void 0 : cellClassName({
       row: row,
       column: column,
       rowIndex: rowIndex,
@@ -469,7 +496,7 @@ var TableCell = function TableCell(p) {
       return handleCellMouseEnter(row, column, event);
     },
     onMouseLeave: function onMouseLeave(event) {
-      return onCellMouseLeave === null || onCellMouseLeave === void 0 ? void 0 : onCellMouseLeave(row, column, event.currentTarget, event);
+      return handleCellMouseLeave(row, column, event);
     },
     onContextMenu: function onContextMenu(event) {
       onCellContextmenu === null || onCellContextmenu === void 0 || onCellContextmenu(row, column, event.currentTarget, event);
@@ -491,23 +518,21 @@ var TableCell = function TableCell(p) {
       onRowDblclick === null || onRowDblclick === void 0 || onRowDblclick(row, column, event);
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(e(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["cell-content"]))), _defineProperty({}, b('tooltip', false), column.showOverflowTooltip)),
+    className: classNames('cell', _defineProperty({}, b('tooltip', false), props.showOverflowTooltip || column.showOverflowTooltip)),
     style: getCellStyle(column)
   }, function () {
     if (column.type === 'index') {
       return /*#__PURE__*/React.createElement("div", {
-        className: e(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["cell-index"])))
+        className: e(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["cell-index"])))
       }, rowIndex);
     } else if (column.type === 'expand') {
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React.createElement("button", {
         ref: expandCell,
-        className: e(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["expand-icon"]))),
+        className: e(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["expand-icon"]))),
         onClick: handleExpand
       }, /*#__PURE__*/React.createElement(Icon, {
         name: "angle-right"
       }));
-    } else if (column.type === 'drag') {
-      // return <DragHandle />;
     } else if (column.type === 'selection') {
       return /*#__PURE__*/React.createElement(Checkbox, {
         onClick: function onClick(event) {
@@ -534,5 +559,5 @@ var TableCell = function TableCell(p) {
     }
   }()));
 };
-TableCell.displayName = 'TableCell';
+TableCell.displayName = 'ElTableCell';
 export default TableCell;

package/dist/Table/TableColumn.d.ts

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { TableColumnProps } from './typings';
 export interface TableColumnRef {
-    props: TableColumnProps<any>;
+    props: TableColumnProps;
 }
-declare const TableColumn: FC<TableColumnProps<any>>;
+declare const TableColumn: FC<TableColumnProps>;
 export default TableColumn;

package/dist/Table/TableHeader.js

@@ -94,7 +94,7 @@ var TableHeader = function TableHeader(_ref) {
         columnIndex: columnIndex,
         scheduleLayout: scheduleLayout
       });
-    }), rowIndex === 0 && fixedRightColumns.map(function (column) {
+    }), rowIndex === 0 && fixedRightColumns.map(function (column, index) {
       columnIndex++;
       return /*#__PURE__*/React.createElement(TableHeaderCell, {
         key: column.id,
@@ -104,7 +104,7 @@ var TableHeader = function TableHeader(_ref) {
         columnIndex: columnIndex,
         className: classNames(bm('fixed-column', 'right'), is({
           leaf: column.isSubColumn,
-          'first-column': columnIndex === 0
+          'first-column': index === 0
         })),
         style: {
           right: column.offsetWidth

package/dist/Table/TableHeaderCell.js

@@ -1,5 +1,5 @@
 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); }
-var _templateObject, _templateObject2;
+var _templateObject;
 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; }
@@ -205,7 +205,7 @@ var TableHeaderCell = function TableHeaderCell(p) {
     },
     onMouseOut: handleMouseOut
   }, /*#__PURE__*/React.createElement("div", {
-    className: e(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["cell-content"])))
+    className: 'cell'
   }, function () {
     if (data.length > 0 && column.type === 'selection') {
       var _disabledRows$current, _state$selection, _state$selection2, _disabledRows$current2, _state$selection3;

package/dist/Table/hooks/useResize.js

@@ -15,8 +15,6 @@ export var useResize = function useResize(scheduleLayout) {
     /* istanbul ignore if */
     if (draggingColumn.current && props.border) {
       dragging.current = true;
-
-      // emit('set-drag-visible', true);
       var tableEl = tableRefs.tableWrapper;
       if (tableEl.current && tableRefs.resizeHelper.current) {
         var resizeProxy = tableRefs.resizeHelper.current;

package/dist/Table/hooks/useTable.d.ts

@@ -3,7 +3,7 @@ import { TableColumnCtx, TableColumnProps, TableProps, TableRefs, TreeNode } fro
 export declare const useTable: <T extends object>(props: TableProps<T>, refs: TableRefs, tableId: string) => {
     data: T[];
     setData: React.Dispatch<React.SetStateAction<T[]>>;
-    _children: React.ReactElement<TableColumnProps<T>, string | React.JSXElementConstructor<any>>[];
+    _children: React.ReactElement<TableColumnProps, string | React.JSXElementConstructor<any>>[];
     columns: TableColumnCtx<T>[][];
     flattenColumns: TableColumnCtx<T>[];
     fixedLeftColumns: TableColumnCtx<T>[];

package/dist/Table/hooks/useTable.js

@@ -1,4 +1,8 @@
 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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 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; }
@@ -10,7 +14,6 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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';
@@ -43,10 +46,12 @@ export var useTable = function useTable(props, refs, tableId) {
     }, (_props$treeProps = props.treeProps) !== null && _props$treeProps !== void 0 ? _props$treeProps : {});
   }, [props.treeProps]);
   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 (props.data) {
+      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) {
       var _data = flatTreeData(cloneDeep(props.data), treeProps, props.rowKey, props.defaultExpandAll, props.expandRowKeys);
       treeNodes.current = _data.map(function (item) {
@@ -71,10 +76,10 @@ export var useTable = function useTable(props, refs, tableId) {
       });
       setData(_data);
     } else {
-      setData(props.data);
+      setData(props !== null && props !== void 0 && props.data ? _toConsumableArray(props.data) : []);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.data]);
+  }, [props === null || props === void 0 ? void 0 : props.data]);
 
   // 多级列
   var _useState3 = useState([]),
@@ -140,15 +145,15 @@ export var useTable = function useTable(props, refs, tableId) {
         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,
+        width: ['index', 'selection', 'expand'].includes((_item$props2 = item.props) === null || _item$props2 === void 0 ? void 0 : _item$props2.type) ? (_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
+        resizable: ((_item$props8 = item.props) === null || _item$props8 === void 0 ? void 0 : _item$props8.type) === 'expand' ? false : (props === null || props === void 0 ? void 0 : props.border) && ((_item$props9 = item.props) === null || _item$props9 === void 0 ? void 0 : _item$props9.resizable) !== false
       });
       return column;
     }).filter(function (item) {
       return item !== null;
     });
-  }, [getChildren, tableId]);
+  }, [getChildren, props === null || props === void 0 ? void 0 : props.border, tableId]);
 
   /** 分组列 */
   var groupColumns = useCallback(function (cols) {