@kdcloudjs/table 1.2.0-canary.1 → 1.2.0-canary.11

package/es/table/pipeline/features/multiSelect.js

@@ -6,6 +6,9 @@ import React from 'react';
 import { internals } from '../../internals';
 import { always, arrayUtils } from '../../utils/others';
 import { collectNodes, mergeCellProps } from '../../utils';
+var fullRowsSetKey = 'fullRowsSetKey';
+var allEnableKeys = 'allEnableKeys';
+var selectValueSetKey = 'selectValueSetKey';
 export function multiSelect() {
   var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return function multiSelectStep(pipeline) {
@@ -36,10 +39,9 @@ export function multiSelect() {
         action: action
       });
     };
-
-    var dataSource = pipeline.getDataSource();
     /** dataSource 中包含的所有 keys */
 
+
     var fullKeySet = new _Set();
     /** 所有有效的 keys（disable 状态为 false） */
 
@@ -48,7 +50,7 @@ export function multiSelect() {
     var isAllChecked = set.size !== 0; // 当前不存在选中则默认为false
 
     var isAnyChecked = false;
-    var flatDataSource = collectNodes(dataSource);
+    var flatDataSource = collectNodes(pipeline.getDataSource());
     flatDataSource.forEach(function (row, rowIndex) {
       var rowKey = internals.safeGetRowKey(primaryKey, row, rowIndex);
       fullKeySet.add(rowKey); // 在 allKeys 中排除被禁用的 key
@@ -76,6 +78,8 @@ export function multiSelect() {
         checked: isAllChecked,
         indeterminate: !isAllChecked && isAnyChecked,
         onChange: function onChange(_) {
+          var allKeys = pipeline.getFeatureOptions(allEnableKeys);
+
           if (isAllChecked) {
             _onChange(arrayUtils.diff(value, allKeys), '', allKeys, 'uncheck-all');
           } else {
@@ -96,9 +100,11 @@ export function multiSelect() {
           var rowKey = internals.safeGetRowKey(primaryKey, row, rowIndex);
           var checkboxCellProps = {};
           var preCellProps = (_b = (_a = opts.checkboxColumn) === null || _a === void 0 ? void 0 : _a.getCellProps) === null || _b === void 0 ? void 0 : _b.call(_a, value, row, rowIndex);
+          var fullRowsSet = pipeline.getFeatureOptions(fullRowsSetKey) || new _Set();
+          var selectValueSet = pipeline.getFeatureOptions(selectValueSetKey) || new _Set();
 
-          if (fullKeySet.has(rowKey) && clickArea === 'cell') {
-            var prevChecked = set.has(rowKey);
+          if (fullRowsSet.has(rowKey) && clickArea === 'cell') {
+            var prevChecked = selectValueSet.has(rowKey);
             var disabled = isDisabled(row, rowIndex);
             checkboxCellProps = {
               style: {
@@ -122,7 +128,8 @@ export function multiSelect() {
           }
 
           var key = internals.safeGetRowKey(primaryKey, row, rowIndex);
-          var checked = set.has(key);
+          var selectValueSet = pipeline.getFeatureOptions(selectValueSetKey) || new _Set();
+          var checked = selectValueSet.has(key);
           return /*#__PURE__*/React.createElement(Checkbox, {
             checked: checked,
             disabled: isDisabled(row, rowIndex),
@@ -161,8 +168,9 @@ export function multiSelect() {
 
     pipeline.appendRowPropsGetter(function (row, rowIndex) {
       var rowKey = internals.safeGetRowKey(primaryKey, row, rowIndex);
+      var fullRowsSet = pipeline.getFeatureOptions(fullRowsSetKey) || new _Set();
 
-      if (!fullKeySet.has(rowKey)) {
+      if (!fullRowsSet.has(rowKey)) {
         // rowKey 不在 fullKeySet 中说明这一行是在 multiSelect 之后才生成的，multiSelect 不对之后生成的行进行处理
         return;
       }
@@ -170,7 +178,8 @@ export function multiSelect() {
       var style = {};
       var className;
       var onClick;
-      var checked = set.has(rowKey);
+      var selectValueSet = pipeline.getFeatureOptions(selectValueSetKey) || new _Set();
+      var checked = selectValueSet.has(rowKey);
 
       if (opts.highlightRowWhenSelected && checked) {
         className = 'highlight';
@@ -197,22 +206,32 @@ export function multiSelect() {
         style: style,
         onClick: onClick
       };
-    });
+    }); // 只保留一份到pipeline， 避免行数据过多时内容被握住
+
+    pipeline.setFeatureOptions(fullRowsSetKey, fullKeySet);
+    pipeline.setFeatureOptions(allEnableKeys, allKeys);
+    pipeline.setFeatureOptions(selectValueSetKey, set);
+    fullKeySet = null;
+    allKeys = null;
+    set = null;
     return pipeline;
 
     function onCheckboxChange(prevChecked, key, batch) {
       var batchKeys = [key];
 
       if (batch && lastKey) {
-        var lastIdx = allKeys.indexOf(lastKey);
-        var cntIdx = allKeys.indexOf(key);
+        var _allKeys = pipeline.getFeatureOptions(allEnableKeys);
+
+        var lastIdx = _allKeys.indexOf(lastKey);
+
+        var cntIdx = _allKeys.indexOf(key);
 
         var _ref = lastIdx < cntIdx ? [lastIdx, cntIdx] : [cntIdx, lastIdx],
             _ref2 = _slicedToArray(_ref, 2),
             start = _ref2[0],
             end = _ref2[1];
 
-        batchKeys = _sliceInstanceProperty(allKeys).call(allKeys, start, end + 1);
+        batchKeys = _sliceInstanceProperty(_allKeys).call(_allKeys, start, end + 1);
       }
 
       if (prevChecked) {

package/es/table/pipeline/features/rowDrag.d.ts

@@ -0,0 +1,30 @@
+import { TablePipeline } from '../pipeline';
+import { ArtColumn } from '../../interfaces';
+interface RowDragEvent {
+    startRowIndex: number;
+    startRow: any;
+    endRowIndex: number;
+    endRow: any;
+    isFinished: boolean;
+    dragPosition: string;
+}
+export interface RowDragFeatureOptions {
+    /** 拖拽开始事件 */
+    onDragStart?: (event: RowDragEvent) => void;
+    /** 拖拽移动事件 */
+    onDragMove?: (event: RowDragEvent) => void;
+    /** 拖拽结束事件 */
+    onDragEnd?: (event: RowDragEvent) => void;
+    /** 判断一行是否要禁用拖拽 */
+    isDisabled?: (row: any, rowIndex: number) => boolean;
+    /** 拖拽列定义 */
+    rowDragColumn?: ArtColumn;
+    /** 行高 */
+    rowHeight?: number;
+    /** 拖拽过程中是否禁止滚动条滚动 */
+    suppressScrollMove?: boolean;
+}
+export declare const ROW_DRAG_COLUMN_CODE = "$_row_drag_column_&";
+export declare const rowDragKey = "rowDragKey";
+export declare function rowDrag(opt: RowDragFeatureOptions): (pipeline: TablePipeline) => TablePipeline;
+export {};

package/es/table/pipeline/features/rowDrag.js

@@ -0,0 +1,327 @@
+import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import React from 'react';
+import { fromEvent } from 'rxjs';
+import { map, takeUntil } from 'rxjs/operators';
+import cx from 'classnames';
+import { Classes } from '../../base/styles';
+export var ROW_DRAG_COLUMN_CODE = '$_row_drag_column_&';
+export var rowDragKey = 'rowDragKey';
+var SCROLL_OFFSET = 30;
+var defaultRowDragColumn = {
+  name: '拖拽列',
+  code: ROW_DRAG_COLUMN_CODE,
+  lock: true,
+  title: '',
+  width: 40,
+  align: 'center',
+  getCellProps: function getCellProps(value, row, rowIndex) {
+    return {
+      className: cx(Classes.rowDragCell)
+    };
+  },
+  render: function render(value, row, rowIndex) {
+    return /*#__PURE__*/React.createElement("svg", {
+      viewBox: '0 0 1024 1024',
+      version: '1.1',
+      xmlns: 'http://www.w3.org/1999/xlink',
+      "data-icon": 'drag',
+      width: '16',
+      height: '16'
+    }, /*#__PURE__*/React.createElement("path", {
+      d: 'M298.688 192a64 64 0 1 0 128 0 64 64 0 0 0-128 0z m298.624 0a64 64 0 1 0 128 0 64 64 0 0 0-128 0zM298.688 512a64 64 0 1 0 128 0 64 64 0 0 0-128 0z m298.624 0a64 64 0 1 0 128 0 64 64 0 0 0-128 0z m-298.624 320a64 64 0 1 0 128 0 64 64 0 0 0-128 0z m298.624 0a64 64 0 1 0 128 0 64 64 0 0 0-128 0z',
+      "p-id": '4278'
+    }));
+  }
+};
+export function rowDrag(opt) {
+  return function rowDragStep(pipeline) {
+    var _context;
+
+    var tableBody = pipeline.ref.current.domHelper && pipeline.ref.current.domHelper.tableBody;
+    var artTable = pipeline.ref.current.domHelper && pipeline.ref.current.domHelper.artTable;
+    if (!tableBody) return pipeline;
+    var dataSource = pipeline.getDataSource();
+    var rowHeight = (opt === null || opt === void 0 ? void 0 : opt.rowHeight) || 48;
+
+    var handleDragStrat = function handleDragStrat(event) {
+      var _a; // 开始拖拽
+
+
+      artTable.classList.add(cx(Classes.rowDragging));
+      (_a = opt === null || opt === void 0 ? void 0 : opt.onDragStart) === null || _a === void 0 ? void 0 : _a.call(opt, event);
+    };
+
+    var handleDragMove = function handleDragMove(event) {
+      var _a;
+
+      (_a = opt === null || opt === void 0 ? void 0 : opt.onDragMove) === null || _a === void 0 ? void 0 : _a.call(opt, event);
+      pipeline.setStateAtKey(rowDragKey, event);
+    };
+
+    var handleDragEnd = function handleDragEnd(event, isOutOfRange) {
+      var _a;
+
+      artTable.classList.remove(cx(Classes.rowDragging));
+      pipeline.setStateAtKey(rowDragKey, event); // 超出拖拽范围不触发dragend事件
+
+      if (!isOutOfRange) {
+        (_a = opt === null || opt === void 0 ? void 0 : opt.onDragEnd) === null || _a === void 0 ? void 0 : _a.call(opt, event);
+      }
+    };
+
+    var getDragEvent = function getDragEvent(startRowInfo, endRowInfo, _ref) {
+      var isFinished = _ref.isFinished,
+          _ref$dragPosition = _ref.dragPosition,
+          dragPosition = _ref$dragPosition === void 0 ? 'bottom' : _ref$dragPosition;
+      return {
+        startRowIndex: startRowInfo.rowIndex,
+        startRow: startRowInfo.row,
+        endRowIndex: endRowInfo.rowIndex,
+        endRow: endRowInfo.row,
+        dragPosition: dragPosition,
+        isFinished: isFinished
+      };
+    };
+
+    var updateScrollPosition = function updateScrollPosition(mouseMoveEvent) {
+      if (opt === null || opt === void 0 ? void 0 : opt.suppressScrollMove) return;
+      var clientY = mouseMoveEvent.clientY;
+      var tableBodyClientRect = tableBody.getBoundingClientRect();
+      var top = tableBodyClientRect.top,
+          height = tableBodyClientRect.height;
+
+      if (clientY + SCROLL_OFFSET >= top + height) {
+        pipeline.ref.current.domHelper.tableBody.scrollTop += SCROLL_OFFSET;
+      }
+
+      if (clientY + SCROLL_OFFSET <= top) {
+        pipeline.ref.current.domHelper.tableBody.scrollTop -= SCROLL_OFFSET;
+      }
+    };
+
+    var onMouseDown = function onMouseDown(mouseDownEvent) {
+      var _a;
+
+      var startRowInfo = getTargetRowInfo(mouseDownEvent.target, tableBody, dataSource);
+      var endRowInfo = startRowInfo;
+      if (!startRowInfo || startRowInfo.code !== rowDragColumn.code) return;
+      if ((_a = opt === null || opt === void 0 ? void 0 : opt.isDisabled) === null || _a === void 0 ? void 0 : _a.call(opt, startRowInfo.row, startRowInfo.rowIndex)) return; // 默认拖拽插入的位置是向下
+
+      var dragPosition = 'bottom';
+      var isOutOfRange = false;
+      var dragStartEvent = getDragEvent(startRowInfo, endRowInfo, {
+        isFinished: false,
+        dragPosition: 'bottom'
+      });
+      handleDragStrat(dragStartEvent);
+      var tableWidth = tableBody.clientWidth;
+      var startRowRects = startRowInfo.cell.getBoundingClientRect(); // 光标位置距离初始拖拽行的偏移量
+
+      var startOffset = mouseDownEvent.clientY - startRowRects.y;
+      var dragElement = createDragElement(startRowRects, tableWidth, rowHeight); // 可拖拽的范围
+
+      var dragRange = getDragRange(tableBody, {
+        startOffset: startOffset,
+        rowHeight: startRowRects.height
+      });
+      var mousemove$ = fromEvent(window, 'mousemove');
+      var mouseup$ = fromEvent(window, 'mouseup');
+      var rowDrag$ = mousemove$.pipe(map(function (mouseMoveEvent) {
+        var clientX = mouseMoveEvent.clientX,
+            clientY = mouseMoveEvent.clientY;
+        var tagretRow = getTargetRowInfo(mouseMoveEvent.target, tableBody, dataSource);
+
+        if (tagretRow) {
+          endRowInfo = tagretRow;
+        }
+
+        var targetRowRects = endRowInfo.cell.getBoundingClientRect(); // 判断拖拽插入的位置，拖拽框上边框位于目标行之上则向上插入，否则向下插入
+
+        var isMoveToTop = clientY - startOffset < targetRowRects.y;
+        dragPosition = isMoveToTop ? 'top' : 'bottom';
+        isOutOfRange = isOutOfDragRange({
+          x: clientX,
+          y: clientY
+        }, dragRange);
+        updateScrollPosition(mouseMoveEvent); // 拖拽到底时让滚动条可以滚动
+
+        updateDragElementPosition(dragElement, dragRange, {
+          x: clientX,
+          y: clientY,
+          startOffset: startOffset
+        });
+        updateCurSorStyle(isOutOfRange);
+        return {
+          startRowInfo: startRowInfo,
+          endRowInfo: endRowInfo,
+          dragPosition: dragPosition
+        };
+      }), takeUntil(mouseup$));
+      rowDrag$.subscribe({
+        next: function next(_ref2) {
+          var startRowInfo = _ref2.startRowInfo,
+              endRowInfo = _ref2.endRowInfo,
+              dragPosition = _ref2.dragPosition;
+          var dragMoveEvent = getDragEvent(startRowInfo, endRowInfo, {
+            isFinished: false,
+            dragPosition: dragPosition
+          });
+          handleDragMove(dragMoveEvent);
+        },
+        complete: function complete() {
+          var dragEndEvent = getDragEvent(startRowInfo, endRowInfo, {
+            isFinished: true,
+            dragPosition: dragPosition
+          });
+          handleDragEnd(dragEndEvent, isOutOfRange);
+          removeDragElement(dragElement);
+          removeCurSorStyle();
+        }
+      });
+    };
+
+    var rowDragColumn = (opt === null || opt === void 0 ? void 0 : opt.rowDragColumn) || defaultRowDragColumn;
+    pipeline.setFeatureOptions('rowDragColumnKey', rowDragColumn.code);
+
+    var nextColumns = _sliceInstanceProperty(_context = pipeline.getColumns()).call(_context);
+
+    nextColumns.unshift(rowDragColumn);
+    pipeline.columns(nextColumns);
+    pipeline.addTableProps({
+      onMouseDown: onMouseDown
+    });
+    pipeline.appendRowPropsGetter(function (row, rowIndex) {
+      var _cx;
+
+      var rowDragEvent = pipeline.getStateAtKey(rowDragKey) || {};
+      var startRowIndex = rowDragEvent.startRowIndex,
+          endRowIndex = rowDragEvent.endRowIndex,
+          isFinished = rowDragEvent.isFinished,
+          dragPosition = rowDragEvent.dragPosition;
+      var isFooterCell = row[pipeline.getFeatureOptions('footerRowMetaKey')];
+      if (isFooterCell || isFinished || rowIndex !== startRowIndex && rowIndex !== endRowIndex) return;
+      var className = cx((_cx = {}, _defineProperty(_cx, Classes.rowDragStart, rowIndex === startRowIndex), _defineProperty(_cx, Classes.rowDragEnd, rowIndex === endRowIndex), _defineProperty(_cx, Classes.rowDragEndToTop, rowIndex === endRowIndex && dragPosition === 'top'), _defineProperty(_cx, Classes.rowDragEndToBottom, rowIndex === endRowIndex && dragPosition === 'bottom'), _cx));
+      return {
+        className: className
+      };
+    });
+    return pipeline;
+  };
+}
+
+function getTargetRowInfo(target, tableBody, record) {
+  while (target && tableBody.contains(target)) {
+    if (target.getAttribute('data-role') === 'table-cell') {
+      var code = target.getAttribute('data-code');
+      var rowIndex = parseInt(target.getAttribute('data-rowindex'));
+      var row = record[rowIndex];
+      var isFooterCell = isEleInFooter(target);
+      if (!row || isFooterCell) return null;
+      return {
+        rowIndex: rowIndex,
+        row: row,
+        code: code,
+        cell: target
+      };
+    }
+
+    target = target.parentElement;
+  }
+
+  return null;
+}
+
+function isEleInFooter(target) {
+  while (target && !target.classList.contains(Classes.artTable)) {
+    if (target.classList.contains(Classes.tableFooter)) {
+      return true;
+    }
+
+    target = target.parentElement;
+  }
+
+  return false;
+}
+
+function createDragElement(rects, tableWidth, rowHeight) {
+  var _context2, _context3, _context4;
+
+  var x = rects.x,
+      y = rects.y;
+  var dragMoveElement = document.createElement('div');
+  dragMoveElement.className = cx(Classes.rowDragElement);
+  dragMoveElement.style.cssText = _concatInstanceProperty(_context2 = _concatInstanceProperty(_context3 = _concatInstanceProperty(_context4 = "position:fixed;z-index:9999;left:".concat(x, "px;top:")).call(_context4, y, "px;pointer-events:none;width:")).call(_context3, tableWidth, "px;height:")).call(_context2, rowHeight, "px;background:var(--primary-color);opacity: 0.1;");
+  document.body.appendChild(dragMoveElement);
+  return dragMoveElement;
+}
+
+function updateDragElementPosition(element, dragRange, _ref3) {
+  var x = _ref3.x,
+      y = _ref3.y,
+      startOffset = _ref3.startOffset;
+  var validPosition = getValidPosition({
+    x: x,
+    y: y
+  }, dragRange);
+  element.style.top = validPosition.y - startOffset + 'px';
+  return element;
+}
+
+function removeDragElement(element) {
+  document.body.removeChild(element);
+}
+
+function updateCurSorStyle(isOutOfRange) {
+  if (isOutOfRange) {
+    document.body.style.cursor = 'no-drop';
+  } else {
+    document.body.style.cursor = 'move';
+  }
+}
+
+function removeCurSorStyle() {
+  document.body.style.cursor = 'default';
+}
+
+function getDragRange(tableBody, _ref4) {
+  var startOffset = _ref4.startOffset,
+      rowHeight = _ref4.rowHeight;
+  var tableBodyClientRect = tableBody.getBoundingClientRect();
+  var height = tableBodyClientRect.height,
+      width = tableBodyClientRect.width,
+      x = tableBodyClientRect.x,
+      y = tableBodyClientRect.y;
+  return {
+    minX: x,
+    maxX: x + width,
+    minY: y - rowHeight + startOffset,
+    maxY: y + height + startOffset
+  };
+}
+
+function getValidPosition(position, dragRange) {
+  var x = position.x,
+      y = position.y;
+  var minX = dragRange.minX,
+      maxX = dragRange.maxX,
+      minY = dragRange.minY,
+      maxY = dragRange.maxY;
+  var newX = x < minX ? minX : x > maxX ? maxX : x;
+  var newY = y < minY ? minY : y > maxY ? maxY : y;
+  return {
+    x: newX,
+    y: newY
+  };
+}
+
+function isOutOfDragRange(position, dragRange) {
+  var x = position.x,
+      y = position.y;
+  var minX = dragRange.minX,
+      maxX = dragRange.maxX,
+      minY = dragRange.minY,
+      maxY = dragRange.maxY;
+  return x > maxX || x < minX || y > maxY || y < minY;
+}

package/es/table/pipeline/features/sort.js

@@ -310,10 +310,29 @@ export function sort() {
             title: col.title && col.title[0] ? col.title[0] : col.title
           })));
 
-          if (result.title && result.title[0]) {
-            result.title[0] = sortNode;
+          var _sortNodeWithoutTitle = /*#__PURE__*/React.createElement(SortHeaderCell, {
+            onToggle: function onToggle(e) {
+              if (stopClickEventPropagation) {
+                e.stopPropagation();
+              }
+
+              toggle(col.code);
+            },
+            sortOrder: sortOrder,
+            column: col,
+            sortIndex: sortIndex,
+            sortOptions: sortOptions
+          }); // 开启标题行高自适应后，修改表头的渲染结构
+
+
+          if (col.renderHeader) {
+            result.title = col.renderHeader(result.title, _sortNodeWithoutTitle);
           } else {
-            result.title = sortNode;
+            if (result.title && result.title[0]) {
+              result.title[0] = sortNode;
+            } else {
+              result.title = sortNode;
+            }
           }
         }
 

package/lib/locale/locale.d.ts

@@ -26,10 +26,14 @@ declare class LocaleCache {
      */
     setLocalesData(locale: string, localeData?: LocaleDataType): {
         locale: string;
-        'global.selectholder': string;
-        'global.placeholder': string;
-        'global.cancel': string;
-        'global.confirm': string;
+        contain: string;
+        notContain: string;
+        equal: string;
+        notEqual: string;
+        isNull: string;
+        notIsNull: string;
+        resetFilter: string;
+        confirmFilter: string;
     };
     /**
      * 获取当前语言包数据

package/lib/locale/zh-CN.d.ts

@@ -1,8 +1,12 @@
 declare const locale: {
     locale: string;
-    'global.selectholder': string;
-    'global.placeholder': string;
-    'global.cancel': string;
-    'global.confirm': string;
+    contain: string;
+    notContain: string;
+    equal: string;
+    notEqual: string;
+    isNull: string;
+    notIsNull: string;
+    resetFilter: string;
+    confirmFilter: string;
 };
 export default locale;

package/lib/locale/zh-CN.js

@@ -6,10 +6,16 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var locale = {
   locale: 'zh-CN',
-  'global.selectholder': '请选择',
-  'global.placeholder': '请输入...',
-  'global.cancel': '取消',
-  'global.confirm': '确定'
+  // Text Filter
+  contain: '包含',
+  notContain: '不包含',
+  equal: '等于',
+  notEqual: '不等于',
+  isNull: '为空',
+  notIsNull: '不为空',
+  // filter button
+  resetFilter: '重置',
+  confirmFilter: '确定'
 };
 var _default = locale;
 exports.default = _default;

package/lib/table/base/helpers/TableDOMUtils.js

@@ -59,7 +59,8 @@ var _styles = require("../styles");
 var TableDOMHelper = /*#__PURE__*/function () {
   function TableDOMHelper(artTableWrapper) {
     var _this = this,
-        _context2;
+        _context2,
+        _context3;
 
     (0, _classCallCheck2.default)(this, TableDOMHelper);
 
@@ -105,7 +106,7 @@ var TableDOMHelper = /*#__PURE__*/function () {
     this.tableElement = this.artTable.querySelector(".".concat(_styles.Classes.tableBody, " table"));
     this.tableFooter = this.artTable.querySelector(".".concat(_styles.Classes.tableFooter));
     this.tableFooterMain = this.artTable.querySelector(".".concat(_styles.Classes.tableFooterMain));
-    var stickyScrollSelector = (0, _concat.default)(_context2 = ".".concat(_styles.Classes.artTable, " + .")).call(_context2, _styles.Classes.stickyScroll);
+    var stickyScrollSelector = (0, _concat.default)(_context2 = (0, _concat.default)(_context3 = ".".concat(_styles.Classes.artTable, " + .")).call(_context3, _styles.Classes.horizontalStickyScrollContainer, " .")).call(_context2, _styles.Classes.stickyScroll);
     this.stickyScroll = artTableWrapper.querySelector(stickyScrollSelector);
     this.stickyScrollItem = this.stickyScroll.querySelector(".".concat(_styles.Classes.stickyScrollItem));
   }
@@ -118,33 +119,35 @@ var TableDOMHelper = /*#__PURE__*/function () {
   }, {
     key: "getTableRows",
     value: function getTableRows() {
-      var _context3;
+      var _context4;
 
-      var tbody = this.artTable.querySelector((0, _concat.default)(_context3 = ".".concat(_styles.Classes.tableBody, " .")).call(_context3, _styles.Classes.virtual, " table tbody"));
+      var tbody = this.artTable.querySelector((0, _concat.default)(_context4 = ".".concat(_styles.Classes.tableBody, " .")).call(_context4, _styles.Classes.virtual, " table tbody"));
       return tbody.childNodes;
     }
   }, {
     key: "getTableBodyHtmlTable",
     value: function getTableBodyHtmlTable() {
-      var _context4;
+      var _context5;
 
-      return this.artTable.querySelector((0, _concat.default)(_context4 = ".".concat(_styles.Classes.tableBody, " .")).call(_context4, _styles.Classes.virtual, " table"));
+      return this.artTable.querySelector((0, _concat.default)(_context5 = ".".concat(_styles.Classes.tableBody, " .")).call(_context5, _styles.Classes.virtual, " table"));
     }
   }, {
     key: "getLeftLockShadow",
     value: function getLeftLockShadow() {
-      var _context5;
+      var _context6;
 
-      var selector = (0, _concat.default)(_context5 = ".".concat(_styles.Classes.lockShadowMask, " .")).call(_context5, _styles.Classes.leftLockShadow);
-      return this.artTable.querySelector(selector);
+      var selector = (0, _concat.default)(_context6 = ".".concat(_styles.Classes.lockShadowMask, " .")).call(_context6, _styles.Classes.leftLockShadow);
+      var allLeftLockShadow = this.artTable.querySelectorAll(selector);
+      return allLeftLockShadow[allLeftLockShadow.length - 1]; // 当table-body、table-footer嵌套多层表格时，需要查找最后一个，否则会查找到嵌套表格的
     }
   }, {
     key: "getRightLockShadow",
     value: function getRightLockShadow() {
-      var _context6;
+      var _context7;
 
-      var selector = (0, _concat.default)(_context6 = ".".concat(_styles.Classes.lockShadowMask, " .")).call(_context6, _styles.Classes.rightLockShadow);
-      return this.artTable.querySelector(selector);
+      var selector = (0, _concat.default)(_context7 = ".".concat(_styles.Classes.lockShadowMask, " .")).call(_context7, _styles.Classes.rightLockShadow);
+      var allRightLockShadow = this.artTable.querySelectorAll(selector);
+      return allRightLockShadow[allRightLockShadow.length - 1]; // 当table-body、table-footer嵌套多层表格时，需要查找最后一个，否则会查找到嵌套表格的
     }
   }, {
     key: "getLoadingIndicator",
@@ -154,10 +157,10 @@ var TableDOMHelper = /*#__PURE__*/function () {
   }, {
     key: "getRowTop",
     value: function getRowTop(rowIndex) {
-      var _context7, _context8;
+      var _context8, _context9;
 
       if (rowIndex === 0) return 0;
-      var selector = (0, _concat.default)(_context7 = (0, _concat.default)(_context8 = ".".concat(_styles.Classes.tableBody, " .")).call(_context8, _styles.Classes.tableRow, "[data-rowindex=\"")).call(_context7, rowIndex, "\"]");
+      var selector = (0, _concat.default)(_context8 = (0, _concat.default)(_context9 = ".".concat(_styles.Classes.tableBody, " .")).call(_context9, _styles.Classes.tableRow, "[data-rowindex=\"")).call(_context8, rowIndex, "\"]");
       var row = this.artTable.querySelector(selector);
       var rowOffsetTop = row && row.offsetTop || 0;
       var tableOffsetTop = this.tableElement.offsetTop || 0;

package/lib/table/base/styles.d.ts

@@ -25,6 +25,9 @@ export declare const Classes: {
     readonly stickyScrollItem: string;
     readonly horizontalScrollContainer: string;
     readonly verticalScrollPlaceholder: string;
+    readonly horizontalStickyScrollContainer: string;
+    readonly horizontalScrollLeftSpacer: string;
+    readonly horizontalScrollRightSpacer: string;
     readonly lockShadowMask: string;
     readonly lockShadow: string;
     readonly leftLockShadow: string;
@@ -67,6 +70,13 @@ export declare const Classes: {
     readonly popup: string;
     readonly popupHeader: string;
     readonly popupBody: string;
+    readonly rowDragging: string;
+    readonly rowDragStart: string;
+    readonly rowDragEnd: string;
+    readonly rowDragEndToTop: string;
+    readonly rowDragEndToBottom: string;
+    readonly rowDragElement: string;
+    readonly rowDragCell: string;
 };
 export declare const MenuClasses: {
     menu: string;