@opentiny/vue-renderless 3.23.0 → 3.25.0

package/anchor/index.js

@@ -88,7 +88,7 @@ const handleScroll = (state) => () => {
   state.scrollTimer = window.setTimeout(() => {
     state.isScroll = false;
     clearTimeout(state.scrollTimer);
-  }, 200);
+  }, 300);
 };
 const setChildOffsetTop = ({ state, props }) => {
   var _a, _b;

package/cascader-node/vue.js

@@ -20,6 +20,7 @@ const renderless = (props, { computed, reactive, inject, watch }, { dispatch })
     inActivePath: computed(() => api2.isInPath(parent.state.activePath)),
     inCheckedPath: computed(() => api2.comptCheckPath()),
     value: computed(() => props.node.getValueByOption()),
+    // 仅 mf 用到nodeLabel
     nodeLabel: computed(() => {
       return parent.state.renderLabelFn ? parent.state.renderLabelFn({ node: props.node, data: props.node.data }) : props.node.label;
     })

package/date-range/index.js

@@ -139,7 +139,7 @@ const handleClear = ({ emit, state }) => () => {
   state.rightDate = nextMonth1(state.leftDate);
   state.rangeState.selecting = false;
   state.rangeState.endDate = null;
-  emit("pick", null);
+  emit("pick", []);
 };
 const handleChangeRange = (state, props) => (val) => {
   if (props.readonly) {

package/dialog-select/index.js

@@ -119,7 +119,7 @@ const selectedBoxInit = ({ props, vm, nextTick }) => () => {
     });
   }
 };
-const selectedBoxClear = ({ props, state, vm }) => () => {
+const selectedBoxClear = ({ props, state, vm, emit }) => () => {
   const { multi, popseletor } = props;
   if (multi && popseletor === "grid") {
     vm.$refs.multiGrid.clearSelection();
@@ -130,6 +130,7 @@ const selectedBoxClear = ({ props, state, vm }) => () => {
   state.selectedValues = [];
   state.selectedDatas = [];
   state.selectedChanged = true;
+  emit("clear");
 };
 const setTreeSelection = ({ api, state, vm, props }) => (keys, value) => {
   const tree = vm.$refs.multiTree;
@@ -205,7 +206,7 @@ const setSelection = ({ props, api }) => (data, value) => {
   }
 };
 const getSelection = ({ state }) => () => state.selectedDatas;
-const selectedBoxDelete = ({ props, state, vm }) => ({ option: row }) => {
+const selectedBoxDelete = ({ props, state, vm, emit }) => ({ option: row }) => {
   const { multi, popseletor } = props;
   if (multi && popseletor === "grid") {
     vm.$refs.multiGrid.setSelection(
@@ -222,6 +223,7 @@ const selectedBoxDelete = ({ props, state, vm }) => ({ option: row }) => {
     state.selectedDatas = [...state.selectedDatas.slice(0, index), ...state.selectedDatas.slice(index + 1)];
     state.selectedChanged = true;
   }
+  emit("delete", row);
 };
 const selectedBoxDrag = ({ props, state }) => ({ state: { select } }) => {
   if (select && select.length) {

package/dialog-select/vue.js

@@ -92,8 +92,8 @@ const renderless = (props, { reactive, computed, watch }, { vm, nextTick, emit,
     state,
     computedGridColumns: computedGridColumns(props),
     selectedBoxInit: selectedBoxInit({ props, vm, nextTick }),
-    selectedBoxClear: selectedBoxClear({ props, state, vm }),
-    selectedBoxDelete: selectedBoxDelete({ props, state, vm }),
+    selectedBoxClear: selectedBoxClear({ props, state, vm, emit }),
+    selectedBoxDelete: selectedBoxDelete({ props, state, vm, emit }),
     selectedBoxDrag: selectedBoxDrag({ props, state }),
     doMultiTreeFilter: doMultiTreeFilter({ props, state, nextTick, vm }),
     multiTreeFilterNode: multiTreeFilterNode(props),

package/file-upload/index.js

@@ -133,6 +133,14 @@ const onBeforeIsPromise = ({
     }
   );
 };
+const isAcceptType = (acceptArray, file, constants, fileType) => {
+  return acceptArray.some((type) => {
+    if (type.toLowerCase() === constants.IMAGE_TYPE) {
+      return constants.FILE_TYPE.PICTURE.split("/").includes(fileType);
+    }
+    return new RegExp(`(${type.trim()})$`, "i").test(file.name);
+  });
+};
 const getFileType = ({ file }) => {
   const { name, url } = file;
   let fileType = "";
@@ -164,7 +172,7 @@ const beforeUpload = ({
   constants,
   t,
   state
-}) => (file, autoRemove, doUpload) => {
+}) => (file, autoRemove, doUpload, isMergeUpload = false) => {
   if (state.isEdm && file.name.length > 255) {
     remove({ api, file, autoRemove });
     return Modal.message({
@@ -176,15 +184,30 @@ const beforeUpload = ({
     let isValid = true;
     const accept = state.isEdm ? state.accept : props.accept;
     const types = constants.FILE_TYPE[state.triggerClickType.toUpperCase()];
-    const fileType = getFileType({ file });
-    if (accept) {
-      const isExist = accept.split(",").some((type) => {
-        if (type.toLowerCase() === constants.IMAGE_TYPE) {
-          return constants.FILE_TYPE.PICTURE.split("/").includes(fileType);
+    const acceptArray = accept ? accept.split(",") : [];
+    let fileType = "";
+    if (isMergeUpload) {
+      const fileRow = [];
+      fileType = file.raw.flatMap((f) => {
+        const type = getFileType({ file: f });
+        if (accept) {
+          const isExist = isAcceptType(acceptArray, f, constants, type);
+          isExist ? fileRow.push(f) : remove({ api, file: f, autoRemove });
+        } else {
+          fileRow.push(f);
         }
-        return new RegExp(`(${type.trim()})$`, "i").test(file.name);
+        return type;
       });
-      !isExist && (isValid = false);
+      if (!fileRow.length) {
+        isValid = false;
+      }
+      file.raw = fileRow;
+    } else {
+      fileType = getFileType({ file });
+      if (accept) {
+        const isExist = isAcceptType(acceptArray, file, constants, fileType);
+        !isExist && (isValid = false);
+      }
     }
     if (state.triggerClickType && types) {
       const isExist = types.split("/").includes(fileType);
@@ -465,7 +488,7 @@ const handleStart = ({
   if (!state.isEdm && props.autoUpload) {
     if (props.multiple && props.mergeService) {
       const handler = (file) => vm.$refs[constants.UPLOAD_INNER].$refs[constants.UPLOAD_INNER_TEMPLATE].upload(file.raw);
-      rawFiles.length && api.beforeUpload({ raw: rawFiles }, true, handler);
+      rawFiles.length && api.beforeUpload({ raw: rawFiles }, true, handler, true);
     } else {
       rawFiles.forEach((rawFile) => {
         const file = api.getFile(rawFile);

package/grid/plugins/exportExcel.js

@@ -1,6 +1,5 @@
 import "../../chunk-G2ADBYYC.js";
-import { extend } from "@opentiny/utils";
-import { browserInfo } from "@opentiny/utils";
+import { extend, browserInfo } from "@opentiny/utils";
 const isIE = browserInfo.name === "ie";
 const rgbRegExp = /^rgba?\((\d+),\s(\d+),\s(\d+)([\s\S]*)\)$/;
 const hexRegExp = /^#([a-zA-Z0-9]{3}|[a-zA-Z0-9]{6})$/;

package/grid/utils/column.js

@@ -2,72 +2,104 @@ import "../../chunk-G2ADBYYC.js";
 import { isBoolean } from "../static";
 import { initFilter } from "./common";
 let columnUniqueId = 0;
-const setColumnFormat = (column, props) => column.format = props.formatConfig;
-function setBasicProperty(column, context) {
-  column.id = `col_${++columnUniqueId}`;
-  column.type = context.type;
-  column.prop = context.prop;
-  column.rules = context.rules;
-  column.required = context.required;
-  column.property = context.field || context.prop;
-  column.title = context.title;
-  column.label = context.label;
-  column.width = context.width;
-  column.minWidth = context.minWidth;
-  column.resizable = context.resizable;
-  column.fixed = context.fixed;
-  column.align = context.align;
-  column.headerAlign = context.headerAlign;
-  column.footerAlign = context.footerAlign;
-  column.showOverflow = context.showOverflow;
-  column.showHeaderOverflow = context.showHeaderOverflow;
-  column.showTip = context.showTip;
-  column.showHeaderTip = context.showHeaderTip;
-  column.className = context.class || context.className;
-  column.headerClassName = context.headerClassName;
-  column.footerClassName = context.footerClassName;
-  column.indexMethod = context.indexMethod;
-  column.formatText = context.formatText;
-  column.formatValue = context.formatValue;
-  setColumnFormat(column, context);
-  column.sortable = context.sortable;
-  column.sortBy = context.sortBy;
-  column.sortMethod = context.sortMethod;
-  column.remoteSort = context.remoteSort;
-  column.filterMultiple = isBoolean(context.filterMultiple) ? context.filterMultiple : true;
-  column.filterMethod = context.filterMethod;
-  column.filterRender = context.filterRender;
-  column.filter = context.filter && initFilter(context.filter);
-  column.treeNode = context.treeNode;
-  column.renderer = context.renderer;
-  column.editor = context.editor;
-  column.operationConfig = context.operationConfig;
-  column.equals = context.equals;
+class FixedDetails {
+  constructor(fixedType) {
+    this.isLeft = fixedType === "left";
+    this.isLeftLast = false;
+    this.isRight = fixedType === "right";
+    this.isRightFirst = false;
+    this.left = 0;
+    this.right = 0;
+  }
+  getStyle(rightExtra = 0) {
+    const { isLeft, left, isRight, right } = this;
+    return {
+      left: isLeft ? `${left}px` : void 0,
+      right: isRight ? `${right + rightExtra}px` : void 0
+    };
+  }
+  getClass() {
+    const { isLeftLast, isRightFirst } = this;
+    return {
+      "fixed-left-last__column": isLeftLast,
+      "fixed-right-first__column": isRightFirst
+    };
+  }
 }
-function ColumnConfig(context, { renderHeader, renderCell, renderData } = {}, config = {}) {
-  setBasicProperty(this, context);
-  this.params = context.params;
-  this.visible = true;
-  this.level = 1;
-  this.rowSpan = 1;
-  this.colSpan = 1;
-  this.order = null;
-  this.renderWidth = 0;
-  this.renderHeight = 0;
-  this.resizeWidth = 0;
-  this.renderLeft = 0;
-  this.model = {};
-  this.renderHeader = renderHeader || context.renderHeader;
-  this.renderCell = renderCell || context.renderCell;
-  this.renderData = renderData;
-  this.showIcon = isBoolean(context.showIcon) ? context.showIcon : true;
-  this.loading = false;
-  this.slots = context.slots;
-  this.own = context;
-  this.asyncPrefix = config.constant.asyncPrefix;
+class ColumnConfig {
+  constructor(context, { renderHeader, renderCell, renderData } = {}, config = {}) {
+    this.id = `col_${++columnUniqueId}`;
+    this.type = context.type;
+    this.prop = context.prop;
+    this.rules = context.rules;
+    this.required = context.required;
+    this.property = context.field || context.prop;
+    this.title = context.title;
+    this.label = context.label;
+    this.width = context.width;
+    this.minWidth = context.minWidth;
+    this.resizable = context.resizable;
+    this._fixed = context.fixed;
+    this._fixedDetails = context.fixed ? new FixedDetails(context.fixed) : void 0;
+    this.align = context.align;
+    this.headerAlign = context.headerAlign;
+    this.footerAlign = context.footerAlign;
+    this.showOverflow = context.showOverflow;
+    this.showHeaderOverflow = context.showHeaderOverflow;
+    this.showTip = context.showTip;
+    this.showHeaderTip = context.showHeaderTip;
+    this.className = context.class || context.className;
+    this.headerClassName = context.headerClassName;
+    this.footerClassName = context.footerClassName;
+    this.indexMethod = context.indexMethod;
+    this.formatText = context.formatText;
+    this.formatValue = context.formatValue;
+    this.format = context.formatConfig;
+    this.sortable = context.sortable;
+    this.sortBy = context.sortBy;
+    this.sortMethod = context.sortMethod;
+    this.remoteSort = context.remoteSort;
+    this.filterMultiple = isBoolean(context.filterMultiple) ? context.filterMultiple : true;
+    this.filterMethod = context.filterMethod;
+    this.filterRender = context.filterRender;
+    this.filter = context.filter && initFilter(context.filter);
+    this.treeNode = context.treeNode;
+    this.renderer = context.renderer;
+    this.editor = context.editor;
+    this.operationConfig = context.operationConfig;
+    this.equals = context.equals;
+    this.params = context.params;
+    this.visible = true;
+    this.level = 1;
+    this.rowSpan = 1;
+    this.colSpan = 1;
+    this.order = null;
+    this.renderWidth = 0;
+    this.renderHeight = 0;
+    this.resizeWidth = 0;
+    this.renderLeft = 0;
+    this.model = {};
+    this.renderHeader = renderHeader || context.renderHeader;
+    this.renderCell = renderCell || context.renderCell;
+    this.renderData = renderData;
+    this.showIcon = isBoolean(context.showIcon) ? context.showIcon : true;
+    this.loading = false;
+    this.slots = context.slots;
+    this.own = context;
+    this.asyncPrefix = config.constant.asyncPrefix;
+  }
+  set fixed(val) {
+    this._fixed = val;
+    this._fixedDetails = val ? new FixedDetails(val) : void 0;
+  }
+  get fixed() {
+    return this._fixed;
+  }
+  get fixedDetails() {
+    return this._fixedDetails;
+  }
 }
 const getColumnConfig = (context, options, config) => context instanceof ColumnConfig ? context : new ColumnConfig(context, options, config);
 export {
-  getColumnConfig,
-  setColumnFormat
+  getColumnConfig
 };

package/grid/utils/common.js

@@ -1,9 +1,8 @@
 import {
   __spreadValues
 } from "../../chunk-G2ADBYYC.js";
-import { isNull } from "@opentiny/utils";
-import { find } from "@opentiny/utils";
-import { get, isFunction, set } from "../static";
+import { isNull, find, isFunction } from "@opentiny/utils";
+import { get, set } from "../static";
 const gridSize = ["medium", "small", "mini"];
 const getSize = ({ size, $parent }) => size || ($parent && gridSize.includes($parent.size) ? $parent.size : null);
 const getFuncText = (content) => isFunction(content) ? content() : content;
@@ -12,17 +11,42 @@ const getRowid = ($table, row) => {
   const rowId = get(row, getRowkey($table));
   return rowId ? encodeURIComponent(rowId) : "";
 };
-const getColumnList = (columns) => {
+const getColumnList = (columns, options = {}, level = 0) => {
   const result = [];
-  columns.forEach((column) => {
-    if (column.children && column.children.length) {
-      result.push(...getColumnList(column.children));
-    } else {
-      result.push(column);
+  columns.forEach((column, index) => {
+    var _a;
+    const hasChildren = (_a = column.children) == null ? void 0 : _a.length;
+    if (!options.hasFixed && column.fixed) {
+      options.hasFixed = true;
+    }
+    if (!options.isCheckable && column.type === "selection") {
+      options.isCheckable = true;
     }
+    if (level === 0 && !options.isGroup && hasChildren) {
+      options.isGroup = true;
+    }
+    options.columnCaches.push({ colid: column.id, column, index });
+    result.push.apply(result, hasChildren ? getColumnList(column.children, options, level + 1) : [column]);
   });
   return result;
 };
+const repairFixed = (root) => {
+  const subtree = [];
+  let fixed;
+  const recursive = (col) => {
+    subtree.push(col);
+    if (!fixed && col.fixed) {
+      fixed = col.fixed;
+    }
+    if (Array.isArray(col.children) && col.children.length > 0) {
+      col.children.forEach((col2) => recursive(col2));
+    }
+  };
+  recursive(root);
+  if (fixed) {
+    subtree.forEach((c) => c.fixed = fixed);
+  }
+};
 const getClass = (property, params) => property ? isFunction(property) ? property(params) : property : "";
 const getFilters = (filters) => (filters || []).map(({ label, value, data, checked }) => ({
   label,
@@ -32,17 +56,25 @@ const getFilters = (filters) => (filters || []).map(({ label, value, data, check
   checked: !!checked
 }));
 const initFilter = (filter) => {
-  return __spreadValues({
-    condition: {
-      input: "",
-      relation: "equals",
-      empty: null,
-      type: null,
-      value: []
-    },
-    hasFilter: false,
-    custom: null
-  }, filter);
+  var _a, _b, _c;
+  const {
+    values,
+    value: valueKey = "value",
+    checked: checkedKey = "checked",
+    condition,
+    enumable,
+    multi,
+    inputFilter
+  } = filter;
+  const value = ((_a = values == null ? void 0 : values.filter) == null ? void 0 : _a.call(values, (i) => i[checkedKey]).map((i) => i[valueKey])) || [];
+  const hasChecked = (_c = (_b = values == null ? void 0 : values.some) == null ? void 0 : _b.call(values, (i) => i[checkedKey])) != null ? _c : false;
+  const filterOptions = {
+    condition: { input: "", relation: "equals", empty: null, type: null, value },
+    hasFilter: inputFilter && !!(condition == null ? void 0 : condition.input) || enumable && multi && hasChecked || false,
+    custom: null,
+    showClear: true
+  };
+  return __spreadValues(__spreadValues({}, filterOptions), filter);
 };
 const formatText = (value) => `${isNull(value) ? "" : value}`;
 const setCellValue = (row, column, value) => {
@@ -116,8 +148,33 @@ const getListeners = ($attrs, $listeners) => {
   });
   return listeners;
 };
+function dfsCopy(tree, callback, parent = void 0, isTree = false, childrenKey = "children") {
+  let copy;
+  if (Array.isArray(tree)) {
+    copy = [];
+    tree.forEach((node, index) => {
+      const copyItem = callback(node, index, parent);
+      if (copyItem) {
+        copy.push(copyItem);
+      }
+      if (isTree) {
+        const children = node[childrenKey];
+        if (children) {
+          const childrenCopy = dfsCopy(children, callback, node, isTree, childrenKey);
+          if (copyItem) {
+            copyItem[childrenKey] = childrenCopy;
+          }
+        }
+      }
+    });
+  }
+  return copy;
+}
+let rowUniqueId = 0;
+const getRowUniqueId = () => `row_${++rowUniqueId}`;
 export {
   assemColumn,
+  dfsCopy,
   emitEvent,
   formatText,
   getCellValue,
@@ -126,11 +183,13 @@ export {
   getFilters,
   getFuncText,
   getListeners,
+  getRowUniqueId,
   getRowid,
   getRowkey,
   getSize,
   gridSize,
   hasChildrenList,
   initFilter,
+  repairFixed,
   setCellValue
 };

package/grid/utils/dom.js

@@ -8,8 +8,12 @@ const CELL_CLS = ".tiny-grid-cell";
 const ROW_CLS = ".tiny-grid-body__row";
 const isPx = (val) => val && /^\d+(px)?$/.test(val);
 const isScale = (val) => val && /^\d+%$/.test(val);
-const updateCellTitle = (event) => {
-  const cellEl = event.currentTarget.querySelector(CELL_CLS);
+const updateCellTitle = (event, td) => {
+  var _a;
+  const cellEl = td ? td.querySelector(".tiny-grid-cell-text") || td.querySelector(CELL_CLS) : (_a = event.currentTarget) == null ? void 0 : _a.querySelector(CELL_CLS);
+  if (!cellEl) {
+    return;
+  }
   const content = cellEl.innerText;
   if (cellEl.getAttribute("title") !== content) {
     cellEl.setAttribute("title", content);
@@ -17,109 +21,75 @@ const updateCellTitle = (event) => {
 };
 const rowToVisible = ($table, row) => {
   $table.$nextTick(() => {
-    const tableBodyVnode = $table.$refs.tableBody;
-    if (tableBodyVnode) {
-      const gridbodyEl = tableBodyVnode.$el;
-      const trEl = gridbodyEl.querySelector(`[${ATTR_NAME}="${getRowid($table, row)}"]`);
-      if ($table.scrollYLoad) {
-        const isOutOfBody = () => {
-          const bodyRect = $table.$el.getBoundingClientRect();
-          const trRect = trEl.getBoundingClientRect();
-          return trRect.top + trRect.height / 2 > bodyRect.top + bodyRect.height;
-        };
-        if (!trEl || isOutOfBody()) {
-          gridbodyEl.scrollTop = ($table.afterFullData.indexOf(row) - 1) * $table.scrollYStore.rowHeight;
-        }
-      } else if (trEl) {
-        const bodyHeight = gridbodyEl.clientHeight;
-        const bodySrcollTop = gridbodyEl.scrollTop;
-        const trOffsetTop = trEl.offsetTop + (trEl.offsetParent ? trEl.offsetParent.offsetTop : 0);
-        const trHeight = trEl.clientHeight;
-        if (trOffsetTop < bodySrcollTop || trOffsetTop > bodySrcollTop + bodyHeight) {
-          gridbodyEl.scrollTop = trOffsetTop;
-        } else if (trOffsetTop + trHeight >= bodyHeight + bodySrcollTop) {
-          gridbodyEl.scrollTop = bodySrcollTop + trHeight;
-        }
+    const { $refs, scrollYLoad, rowHeight, headerHeight, footerHeight, _tileInfo, _graphInfo } = $table;
+    const { tableBody: bodyVm } = $refs;
+    const { $el } = bodyVm;
+    const { map } = _tileInfo;
+    const { graphed } = _graphInfo;
+    const trEl = $el.querySelector(`[${ATTR_NAME}="${getRowid($table, row)}"]`);
+    const visibleStart = headerHeight;
+    const visibleEnd = $el.clientHeight - footerHeight;
+    const scrollTop = $el.scrollTop;
+    let position, trHeight;
+    let flag = false;
+    if (scrollYLoad) {
+      position = headerHeight + rowHeight * graphed.indexOf(map.get(row)) - scrollTop;
+      trHeight = rowHeight;
+      flag = true;
+    } else if (trEl) {
+      position = trEl.offsetTop - scrollTop;
+      trHeight = trEl.clientHeight;
+      flag = true;
+    }
+    if (flag) {
+      if (position < visibleStart) {
+        $el.scrollTop = scrollTop - (visibleStart - position);
+        return;
+      }
+      position += trHeight;
+      if (position > visibleEnd) {
+        $el.scrollTop = scrollTop + (position - visibleEnd);
       }
     }
   });
 };
-function getFixedLeft($table, from, column, body, offset) {
-  let scrollLeft = $table.elemStore["main-body-wrapper"].scrollLeft + offset;
-  if (!column.fixed) {
-    from.fixed === "left" && (scrollLeft = 0);
-    from.fixed === "right" && (scrollLeft = body.scrollWidth);
+const colToVisible = ($table, column) => {
+  if (column.fixed) {
+    return;
   }
-  return scrollLeft;
-}
-function computeScrollLeft($table, td) {
-  const { tableBody } = $table.$refs;
-  const { visibleColumn } = $table;
-  const { scrollLeft: bodyLeft, clientWidth: bodyWidth } = tableBody.$el;
-  let leftWidth = 0;
-  let rightWidth = 0;
-  visibleColumn.forEach((column) => {
-    if (column.fixed === "left") {
-      leftWidth += column.renderWidth;
-    } else if (column.fixed === "right") {
-      rightWidth += column.renderWidth;
-    }
-  });
-  const tdLeft = td._accumulateRenderWidth || td.offsetLeft + (td.offsetParent ? td.offsetParent.offsetLeft : 0);
-  const tdWidth = td._renderWidth || td.clientWidth;
-  let scrollLeft;
-  if (tdLeft < bodyLeft + leftWidth) {
-    scrollLeft = tdLeft - leftWidth;
-  } else if (tdLeft + tdWidth > bodyLeft + bodyWidth - rightWidth) {
-    scrollLeft = tdLeft + tdWidth - bodyWidth + rightWidth;
-  } else {
-    scrollLeft = bodyLeft;
-  }
-  return scrollLeft;
-}
-function setBodyLeft(body, td, $table, column, move) {
-  const { isLeftArrow, isRightArrow, from } = move || {};
-  const bodyScollLeft = computeScrollLeft($table, td);
-  $table.scrollTo(bodyScollLeft);
-  $table.lastScrollLeft = bodyScollLeft;
-  if (from) {
-    const direction = isLeftArrow ? "left" : isRightArrow ? "right" : null;
-    const fixedDom = $table.elemStore[`${direction}-body-list`];
-    const mainBody = $table.elemStore["main-body-wrapper"];
-    const { left, right } = td.getBoundingClientRect();
-    let offset = 0;
-    if (isLeftArrow && fixedDom) {
-      const div = fixedDom.querySelector("td.fixed__column");
-      const division = div ? div.getBoundingClientRect().left : fixedDom.getBoundingClientRect().right;
-      division > left && (offset = left - division);
-    }
-    if (isRightArrow && fixedDom) {
-      const div = fixedDom.querySelector("td:not(.fixed__column)") || fixedDom;
-      const division = div.getBoundingClientRect().left;
-      division < right && (offset = right - division);
-    }
-    mainBody.scrollLeft = getFixedLeft($table, from, column, body, offset);
-  }
-}
-const colToVisible = ($table, column, move) => {
   $table.$nextTick(() => {
-    const gridbodyEl = $table.$refs.tableBody.$el;
-    const tdElem = gridbodyEl.querySelector(`.${column.id}`);
-    if (tdElem) {
-      setBodyLeft(gridbodyEl, tdElem, $table, column, move);
-    } else if ($table.scrollXLoad) {
-      const visibleColumn = $table.visibleColumn;
-      let scrollLeft = 0;
-      for (let index = 0; index < visibleColumn.length; index++) {
-        if (visibleColumn[index] === column) {
+    const { $refs, scrollXLoad, visibleColumn, columnStore } = $table;
+    const { tableBody: bodyVm } = $refs;
+    const { $el } = bodyVm;
+    const { leftList, rightList } = columnStore;
+    const tdEl = $el.querySelector(`.${column.id}`);
+    const visibleStart = leftList.reduce((p, c) => p += c.renderWidth, 0);
+    const visibleEnd = $el.clientWidth - rightList.reduce((p, c) => p += c.renderWidth, 0);
+    const scrollLeft = $el.scrollLeft;
+    const colWidth = column.renderWidth;
+    let position;
+    let flag = false;
+    if (scrollXLoad) {
+      flag = true;
+      position = -scrollLeft;
+      for (const col of visibleColumn) {
+        if (col === column)
           break;
-        }
-        scrollLeft += visibleColumn[index].renderWidth;
+        position += col.renderWidth;
+      }
+    } else if (tdEl) {
+      flag = true;
+      position = tdEl.offsetLeft - scrollLeft;
+    }
+    if (flag) {
+      if (position < visibleStart) {
+        $el.scrollLeft = scrollLeft - (visibleStart - position);
+        return;
+      }
+      position += colWidth;
+      if (position > visibleEnd) {
+        $el.scrollLeft = scrollLeft + (position - visibleEnd);
       }
-      gridbodyEl.scrollLeft = computeScrollLeft($table, {
-        _accumulateRenderWidth: scrollLeft,
-        _renderWidth: column.renderWidth
-      });
     }
   });
 };
@@ -130,6 +100,9 @@ const hasDataTag = (el, value) => {
   if (el.host) {
     el = el.host;
   }
+  if (!(el == null ? void 0 : el.getAttribute)) {
+    return false;
+  }
   return (" " + el.getAttribute("data-tag") + " ").includes(" " + value + " ");
 };
 const getEventTargetNode = (event, container, queryCls) => {