@geelato/web-vue 2.57.0 → 2.58.1

package/lib/_utils/array.js

@@ -1,7 +1,24 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const union = (target, source, difference = false) => {
-  return difference ? target.filter((item) => !source.includes(item)) : Array.from(new Set(target.concat(source)));
+  if (difference) {
+    const sourceSet = source instanceof Set ? source : new Set(source);
+    const result = [];
+    for (const item of target) {
+      if (!sourceSet.has(item)) {
+        result.push(item);
+      }
+    }
+    return result;
+  }
+  const resultSet = /* @__PURE__ */ new Set();
+  for (const item of target) {
+    resultSet.add(item);
+  }
+  for (const item of source) {
+    resultSet.add(item);
+  }
+  return Array.from(resultSet);
 };
 const getReverse = (array) => {
   const result = [];

package/lib/drawer/drawer.js

@@ -5,7 +5,9 @@ var clientOnly = require("../_components/client-only.js");
 var index = require("../button/index.js");
 var iconHover = require("../_components/icon-hover.js");
 var index$1 = require("../icon/icon-close/index.js");
-var index$2 = require("../locale/index.js");
+var index$2 = require("../icon/icon-fullscreen/index.js");
+var index$3 = require("../icon/icon-fullscreen-exit/index.js");
+var index$4 = require("../locale/index.js");
 var useOverflow = require("../_hooks/use-overflow.js");
 var dom = require("../_utils/dom.js");
 var usePopupManager = require("../_hooks/use-popup-manager.js");
@@ -20,7 +22,9 @@ const _sfc_main = vue.defineComponent({
     ClientOnly: clientOnly,
     ArcoButton: index["default"],
     IconHover: iconHover,
-    IconClose: index$1
+    IconClose: index$1,
+    IconFullscreen: index$2,
+    IconFullscreenExit: index$3
   },
   inheritAttrs: false,
   props: {
@@ -109,10 +113,19 @@ const _sfc_main = vue.defineComponent({
     hideCancel: {
       type: Boolean,
       default: false
+    },
+    fullscreen: {
+      type: Boolean,
+      default: false
+    },
+    showFullscreen: {
+      type: Boolean,
+      default: false
     }
   },
   emits: {
     "update:visible": (visible) => true,
+    "update:fullscreen": (fullscreen) => true,
     "ok": (e) => true,
     "cancel": (e) => true,
     "open": () => true,
@@ -123,12 +136,19 @@ const _sfc_main = vue.defineComponent({
   setup(props, { emit }) {
     const { popupContainer } = vue.toRefs(props);
     const prefixCls = globalConfig.getPrefixCls("drawer");
-    const { t } = index$2.useI18n();
+    const { t } = index$4.useI18n();
     const _visible = vue.ref(props.defaultVisible);
+    const _fullscreen = vue.ref(props.fullscreen);
     const computedVisible = vue.computed(() => {
       var _a;
       return (_a = props.visible) != null ? _a : _visible.value;
     });
+    const mergedFullscreen = vue.computed(
+      () => {
+        var _a;
+        return (_a = props.fullscreen) != null ? _a : _fullscreen.value;
+      }
+    );
     const _okLoading = vue.ref(false);
     const mergedOkLoading = vue.computed(() => props.okLoading || _okLoading.value);
     const { teleportContainer, containerRef } = useTeleportContainer.useTeleportContainer({
@@ -215,6 +235,11 @@ const _sfc_main = vue.defineComponent({
         close();
       }
     };
+    const toggleFullscreen = () => {
+      const next = !mergedFullscreen.value;
+      _fullscreen.value = next;
+      emit("update:fullscreen", next);
+    };
     const handleMask = (e) => {
       if (props.maskClosable) {
         handleCancel(e);
@@ -258,6 +283,14 @@ const _sfc_main = vue.defineComponent({
         removeGlobalKeyDownListener();
       }
     });
+    vue.watch(
+      () => props.fullscreen,
+      (val) => {
+        if (_fullscreen.value !== val) {
+          _fullscreen.value = !!val;
+        }
+      }
+    );
     const style = vue.computed(() => {
       var _a;
       const style2 = {
@@ -285,13 +318,17 @@ const _sfc_main = vue.defineComponent({
       handleClose,
       handleMask,
       isFixed,
-      teleportContainer
+      teleportContainer,
+      mergedFullscreen,
+      toggleFullscreen
     };
   }
 });
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_icon_close = vue.resolveComponent("icon-close");
+  const _component_icon_fullscreen = vue.resolveComponent("icon-fullscreen");
+  const _component_icon_fullscreen_exit = vue.resolveComponent("icon-fullscreen-exit");
   const _component_icon_hover = vue.resolveComponent("icon-hover");
+  const _component_icon_close = vue.resolveComponent("icon-close");
   const _component_arco_button = vue.resolveComponent("arco-button");
   const _component_client_only = vue.resolveComponent("client-only");
   return vue.openBlock(), vue.createBlock(_component_client_only, null, {
@@ -329,7 +366,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           }, {
             default: vue.withCtx(() => [
               vue.withDirectives(vue.createElementVNode("div", {
-                class: vue.normalizeClass(_ctx.prefixCls),
+                class: vue.normalizeClass([
+                  _ctx.prefixCls,
+                  { [`${_ctx.prefixCls}-fullscreen`]: _ctx.mergedFullscreen }
+                ]),
                 style: vue.normalizeStyle(_ctx.style)
               }, [
                 _ctx.header ? (vue.openBlock(), vue.createElementBlock("div", {
@@ -345,13 +385,28 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                         vue.createTextVNode(vue.toDisplayString(_ctx.title), 1)
                       ])
                     ], 2)) : vue.createCommentVNode("v-if", true),
-                    _ctx.closable ? (vue.openBlock(), vue.createElementBlock("div", {
+                    _ctx.showFullscreen ? (vue.openBlock(), vue.createElementBlock("div", {
                       key: 1,
                       tabindex: "-1",
                       role: "button",
+                      "aria-label": "Fullscreen",
+                      class: vue.normalizeClass(`${_ctx.prefixCls}-fullscreen-btn`),
+                      onClick: _cache[1] || (_cache[1] = (...args) => _ctx.toggleFullscreen && _ctx.toggleFullscreen(...args))
+                    }, [
+                      vue.createVNode(_component_icon_hover, null, {
+                        default: vue.withCtx(() => [
+                          !_ctx.mergedFullscreen ? (vue.openBlock(), vue.createBlock(_component_icon_fullscreen, { key: 0 })) : (vue.openBlock(), vue.createBlock(_component_icon_fullscreen_exit, { key: 1 }))
+                        ]),
+                        _: 1
+                      })
+                    ], 2)) : vue.createCommentVNode("v-if", true),
+                    _ctx.closable ? (vue.openBlock(), vue.createElementBlock("div", {
+                      key: 2,
+                      tabindex: "-1",
+                      role: "button",
                       "aria-label": "Close",
                       class: vue.normalizeClass(`${_ctx.prefixCls}-close-btn`),
-                      onClick: _cache[1] || (_cache[1] = (...args) => _ctx.handleCancel && _ctx.handleCancel(...args))
+                      onClick: _cache[2] || (_cache[2] = (...args) => _ctx.handleCancel && _ctx.handleCancel(...args))
                     }, [
                       vue.createVNode(_component_icon_hover, null, {
                         default: vue.withCtx(() => [

package/lib/drawer/style/index.css

@@ -64,6 +64,12 @@
   font-size: 12px;
   cursor: pointer;
 }
+.arco-drawer-header .arco-drawer-fullscreen-btn {
+  margin-left: 8px;
+  color: var(--color-text-1);
+  font-size: 12px;
+  cursor: pointer;
+}
 .arco-drawer-footer {
   flex-shrink: 0;
   box-sizing: border-box;
@@ -83,6 +89,10 @@
   overflow: auto;
   color: var(--color-text-1);
 }
+.arco-drawer-fullscreen {
+  width: 100% !important;
+  height: 100% !important;
+}
 .fade-drawer-enter-from,
 .fade-drawer-appear-from {
   opacity: 0;

package/lib/drawer/style/index.less

@@ -54,6 +54,13 @@
       font-size: @drawer-font-size-close-icon;
       cursor: pointer;
     }
+
+    .@{drawer-prefix-cls}-fullscreen-btn {
+      margin-left: 8px;
+      color: @drawer-color-header-text;
+      font-size: @drawer-font-size-close-icon;
+      cursor: pointer;
+    }
   }
 
   &-footer {
@@ -79,6 +86,11 @@
   }
 }
 
+.@{drawer-prefix-cls}-fullscreen {
+  width: 100% !important;
+  height: 100% !important;
+}
+
 .fade-drawer-enter-from,
 .fade-drawer-appear-from {
   opacity: 0;

package/lib/index.css

@@ -6169,6 +6169,12 @@ body[arco-theme='dark'] .arco-carousel-indicator-outer .arco-carousel-indicator-
   font-size: 12px;
   cursor: pointer;
 }
+.arco-drawer-header .arco-drawer-fullscreen-btn {
+  margin-left: 8px;
+  color: var(--color-text-1);
+  font-size: 12px;
+  cursor: pointer;
+}
 .arco-drawer-footer {
   flex-shrink: 0;
   box-sizing: border-box;
@@ -6188,6 +6194,10 @@ body[arco-theme='dark'] .arco-carousel-indicator-outer .arco-carousel-indicator-
   overflow: auto;
   color: var(--color-text-1);
 }
+.arco-drawer-fullscreen {
+  width: 100% !important;
+  height: 100% !important;
+}
 .fade-drawer-enter-from,
 .fade-drawer-appear-from {
   opacity: 0;
@@ -11140,7 +11150,13 @@ body[arco-theme='dark'] .arco-carousel-indicator-outer .arco-carousel-indicator-
   margin-left: 12px;
 }
 .arco-modal-close-btn {
-  margin-left: -12px;
+  margin-left: 8px;
+  color: var(--color-text-1);
+  font-size: 12px;
+  cursor: pointer;
+}
+.arco-modal-fullscreen-btn {
+  margin-left: 8px;
   color: var(--color-text-1);
   font-size: 12px;
   cursor: pointer;
@@ -14393,6 +14409,24 @@ body[arco-theme='dark'] .arco-radio-button::after {
   justify-content: center;
   padding: 0;
 }
+.arco-table-th.arco-table-operation.arco-table-checkbox .arco-table-cell,
+.arco-table-td.arco-table-operation.arco-table-checkbox .arco-table-cell,
+.arco-table-th.arco-table-operation.arco-table-radio .arco-table-cell,
+.arco-table-td.arco-table-operation.arco-table-radio .arco-table-cell {
+  padding: 0 4px;
+}
+.arco-table-th.arco-table-operation.arco-table-checkbox,
+.arco-table-td.arco-table-operation.arco-table-checkbox {
+  position: relative;
+  z-index: 11;
+}
+.arco-table-th.arco-table-operation.arco-table-checkbox.arco-table-col-fixed-left,
+.arco-table-td.arco-table-operation.arco-table-checkbox.arco-table-col-fixed-left,
+.arco-table-th.arco-table-operation.arco-table-checkbox.arco-table-col-fixed-right,
+.arco-table-td.arco-table-operation.arco-table-checkbox.arco-table-col-fixed-right {
+  position: sticky !important;
+  z-index: 12;
+}
 .arco-table-radio,
 .arco-table-checkbox {
   justify-content: center;
@@ -14783,13 +14817,10 @@ body[arco-theme='dark'] .arco-radio-button::after {
 .arco-table-virtualized .arco-table-element {
   table-layout: fixed;
 }
-.arco-table-virtualized div.arco-table-body div.arco-table-tr {
-  display: flex;
-}
-.arco-table-virtualized div.arco-table-body div.arco-table-td {
-  display: flex;
-  flex: 1;
-  align-items: center;
+.arco-table-virtualized .arco-table-body .arco-table-td.arco-table-col-fixed-left,
+.arco-table-virtualized .arco-table-body .arco-table-td.arco-table-col-fixed-right {
+  position: sticky;
+  z-index: 10;
 }
 .arco-table-pagination {
   display: flex;

package/lib/input-number/input-number.js

@@ -214,6 +214,8 @@ var _InputNumber = vue.defineComponent({
     };
     const handleInput = (value, ev) => {
       var _a2, _b, _c, _d;
+      if (props.readOnly)
+        return;
       value = value.trim().replace(/。/g, ".");
       value = (_b = (_a2 = props.parser) == null ? void 0 : _a2.call(props, value)) != null ? _b : value;
       if (is.isNumber(Number(value)) || /^(\.|-)$/.test(value)) {

package/lib/modal/modal.js

@@ -7,8 +7,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_icon_check_circle_fill = vue.resolveComponent("icon-check-circle-fill");
   const _component_icon_exclamation_circle_fill = vue.resolveComponent("icon-exclamation-circle-fill");
   const _component_icon_close_circle_fill = vue.resolveComponent("icon-close-circle-fill");
-  const _component_icon_close = vue.resolveComponent("icon-close");
+  const _component_icon_fullscreen = vue.resolveComponent("icon-fullscreen");
+  const _component_icon_fullscreen_exit = vue.resolveComponent("icon-fullscreen-exit");
   const _component_icon_hover = vue.resolveComponent("icon-hover");
+  const _component_icon_close = vue.resolveComponent("icon-close");
   const _component_arco_button = vue.resolveComponent("arco-button");
   const _component_client_only = vue.resolveComponent("client-only");
   return vue.openBlock(), vue.createBlock(_component_client_only, null, {
@@ -41,8 +43,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           vue.createElementVNode("div", {
             ref: "wrapperRef",
             class: vue.normalizeClass(_ctx.wrapperCls),
-            onClick: _cache[2] || (_cache[2] = vue.withModifiers((...args) => _ctx.handleMaskClick && _ctx.handleMaskClick(...args), ["self"])),
-            onMousedown: _cache[3] || (_cache[3] = vue.withModifiers((...args) => _ctx.handleMaskMouseDown && _ctx.handleMaskMouseDown(...args), ["self"]))
+            onClick: _cache[3] || (_cache[3] = vue.withModifiers((...args) => _ctx.handleMaskClick && _ctx.handleMaskClick(...args), ["self"])),
+            onMousedown: _cache[4] || (_cache[4] = vue.withModifiers((...args) => _ctx.handleMaskMouseDown && _ctx.handleMaskMouseDown(...args), ["self"]))
           }, [
             vue.createVNode(vue.Transition, {
               name: _ctx.modalAnimationName,
@@ -60,7 +62,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                   !_ctx.hideTitle && (_ctx.$slots.title || _ctx.title || _ctx.closable) ? (vue.openBlock(), vue.createElementBlock("div", {
                     key: 0,
                     class: vue.normalizeClass(`${_ctx.prefixCls}-header`),
-                    onMousedown: _cache[1] || (_cache[1] = (...args) => _ctx.handleMoveDown && _ctx.handleMoveDown(...args))
+                    onMousedown: _cache[2] || (_cache[2] = (...args) => _ctx.handleMoveDown && _ctx.handleMoveDown(...args))
                   }, [
                     _ctx.$slots.title || _ctx.title ? (vue.openBlock(), vue.createElementBlock("div", {
                       key: 0,
@@ -82,13 +84,28 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                         vue.createTextVNode(vue.toDisplayString(_ctx.title), 1)
                       ])
                     ], 2)) : vue.createCommentVNode("v-if", true),
-                    !_ctx.simple && _ctx.closable ? (vue.openBlock(), vue.createElementBlock("div", {
+                    !_ctx.simple && _ctx.showFullscreen ? (vue.openBlock(), vue.createElementBlock("div", {
                       key: 1,
                       tabindex: "-1",
                       role: "button",
+                      "aria-label": "Fullscreen",
+                      class: vue.normalizeClass(`${_ctx.prefixCls}-fullscreen-btn`),
+                      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.toggleFullscreen && _ctx.toggleFullscreen(...args))
+                    }, [
+                      vue.createVNode(_component_icon_hover, null, {
+                        default: vue.withCtx(() => [
+                          !_ctx.mergedFullscreen ? (vue.openBlock(), vue.createBlock(_component_icon_fullscreen, { key: 0 })) : (vue.openBlock(), vue.createBlock(_component_icon_fullscreen_exit, { key: 1 }))
+                        ]),
+                        _: 1
+                      })
+                    ], 2)) : vue.createCommentVNode("v-if", true),
+                    !_ctx.simple && _ctx.closable ? (vue.openBlock(), vue.createElementBlock("div", {
+                      key: 2,
+                      tabindex: "-1",
+                      role: "button",
                       "aria-label": "Close",
                       class: vue.normalizeClass(`${_ctx.prefixCls}-close-btn`),
-                      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleCancel && _ctx.handleCancel(...args))
+                      onClick: _cache[1] || (_cache[1] = (...args) => _ctx.handleCancel && _ctx.handleCancel(...args))
                     }, [
                       vue.createVNode(_component_icon_hover, null, {
                         default: vue.withCtx(() => [

package/lib/modal/modal.vue_vue_type_script_lang.js

@@ -5,11 +5,13 @@ var clientOnly = require("../_components/client-only.js");
 var iconHover = require("../_components/icon-hover.js");
 var index = require("../button/index.js");
 var index$1 = require("../icon/icon-close/index.js");
-var index$2 = require("../icon/icon-info-circle-fill/index.js");
-var index$3 = require("../icon/icon-check-circle-fill/index.js");
-var index$4 = require("../icon/icon-exclamation-circle-fill/index.js");
-var index$5 = require("../icon/icon-close-circle-fill/index.js");
-var index$6 = require("../locale/index.js");
+var index$2 = require("../icon/icon-fullscreen/index.js");
+var index$3 = require("../icon/icon-fullscreen-exit/index.js");
+var index$4 = require("../icon/icon-info-circle-fill/index.js");
+var index$5 = require("../icon/icon-check-circle-fill/index.js");
+var index$6 = require("../icon/icon-exclamation-circle-fill/index.js");
+var index$7 = require("../icon/icon-close-circle-fill/index.js");
+var index$8 = require("../locale/index.js");
 var useOverflow = require("../_hooks/use-overflow.js");
 var dom = require("../_utils/dom.js");
 var usePopupManager = require("../_hooks/use-popup-manager.js");
@@ -24,10 +26,12 @@ var _sfc_main = vue.defineComponent({
     ArcoButton: index["default"],
     IconHover: iconHover,
     IconClose: index$1,
-    IconInfoCircleFill: index$2,
-    IconCheckCircleFill: index$3,
-    IconExclamationCircleFill: index$4,
-    IconCloseCircleFill: index$5
+    IconFullscreen: index$2,
+    IconFullscreenExit: index$3,
+    IconInfoCircleFill: index$4,
+    IconCheckCircleFill: index$5,
+    IconExclamationCircleFill: index$6,
+    IconCloseCircleFill: index$7
   },
   inheritAttrs: false,
   props: {
@@ -130,6 +134,10 @@ var _sfc_main = vue.defineComponent({
       type: Boolean,
       default: false
     },
+    showFullscreen: {
+      type: Boolean,
+      default: false
+    },
     maskAnimationName: {
       type: String,
       default: (props) => {
@@ -164,6 +172,7 @@ var _sfc_main = vue.defineComponent({
   },
   emits: {
     "update:visible": (visible) => true,
+    "update:fullscreen": (fullscreen) => true,
     "ok": (e) => true,
     "cancel": (e) => true,
     "open": () => true,
@@ -182,7 +191,7 @@ var _sfc_main = vue.defineComponent({
     const prefixCls = globalConfig.getPrefixCls("modal");
     const {
       t
-    } = index$6.useI18n();
+    } = index$8.useI18n();
     const wrapperRef = vue.ref();
     const modalRef = vue.ref();
     const _visible = vue.ref(props.defaultVisible);
@@ -192,6 +201,11 @@ var _sfc_main = vue.defineComponent({
     });
     const _okLoading = vue.ref(false);
     const mergedOkLoading = vue.computed(() => props.okLoading || _okLoading.value);
+    const _fullscreen = vue.ref(props.fullscreen);
+    const mergedFullscreen = vue.computed(() => {
+      var _a;
+      return (_a = props.fullscreen) != null ? _a : _fullscreen.value;
+    });
     const mergedDraggable = vue.computed(() => props.draggable && !props.fullscreen);
     const {
       teleportContainer,
@@ -354,7 +368,15 @@ var _sfc_main = vue.defineComponent({
       if (position.value) {
         position.value = void 0;
       }
+      if (_fullscreen.value !== fullscreen.value) {
+        _fullscreen.value = !!fullscreen.value;
+      }
     });
+    const toggleFullscreen = () => {
+      const next = !mergedFullscreen.value;
+      _fullscreen.value = next;
+      emit("update:fullscreen", next);
+    };
     const wrapperCls = vue.computed(() => [`${prefixCls}-wrapper`, {
       [`${prefixCls}-wrapper-align-center`]: props.alignCenter && !props.fullscreen,
       [`${prefixCls}-wrapper-moved`]: Boolean(position.value)
@@ -362,7 +384,7 @@ var _sfc_main = vue.defineComponent({
     const modalCls = vue.computed(() => [`${prefixCls}`, props.modalClass, {
       [`${prefixCls}-simple`]: props.simple,
       [`${prefixCls}-draggable`]: mergedDraggable.value,
-      [`${prefixCls}-fullscreen`]: props.fullscreen
+      [`${prefixCls}-fullscreen`]: mergedFullscreen.value
     }]);
     const mergedModalStyle = vue.computed(() => {
       var _a;
@@ -401,7 +423,9 @@ var _sfc_main = vue.defineComponent({
       wrapperCls,
       modalCls,
       teleportContainer,
-      handleMoveDown
+      handleMoveDown,
+      mergedFullscreen,
+      toggleFullscreen
     };
   }
 });

package/lib/modal/style/index.css

@@ -116,7 +116,13 @@
   margin-left: 12px;
 }
 .arco-modal-close-btn {
-  margin-left: -12px;
+  margin-left: 8px;
+  color: var(--color-text-1);
+  font-size: 12px;
+  cursor: pointer;
+}
+.arco-modal-fullscreen-btn {
+  margin-left: 8px;
   color: var(--color-text-1);
   font-size: 12px;
   cursor: pointer;

package/lib/modal/style/index.less

@@ -127,7 +127,14 @@
   }
 
   &-close-btn {
-    margin-left: -@modal-font-size-close-icon;
+    margin-left: 8px;
+    color: @modal-color-header-text;
+    font-size: @modal-font-size-close-icon;
+    cursor: pointer;
+  }
+
+  &-fullscreen-btn {
+    margin-left: 8px;
     color: @modal-color-header-text;
     font-size: @modal-font-size-close-icon;
     cursor: pointer;

package/lib/table/hooks/use-row-selection.js

@@ -25,9 +25,11 @@ const useRowSelection = ({
       return (_c2 = (_b2 = selectedKeys.value) != null ? _b2 : (_a2 = rowSelection.value) == null ? void 0 : _a2.selectedRowKeys) != null ? _c2 : _selectedRowKeys.value;
     }
   );
-  const currentSelectedRowKeys = vue.computed(
-    () => selectedRowKeys.value.filter((key) => currentAllRowKeys.value.includes(key))
-  );
+  const currentAllRowKeySet = vue.computed(() => new Set(currentAllRowKeys.value));
+  const currentSelectedRowKeys = vue.computed(() => {
+    const allKeySet = currentAllRowKeySet.value;
+    return selectedRowKeys.value.filter((key) => allKeySet.has(key));
+  });
   const handleSelectAll = (checked) => {
     const newKeys = array.union(
       selectedRowKeys.value,

package/lib/table/style/index.css

@@ -275,6 +275,24 @@
   justify-content: center;
   padding: 0;
 }
+.arco-table-th.arco-table-operation.arco-table-checkbox .arco-table-cell,
+.arco-table-td.arco-table-operation.arco-table-checkbox .arco-table-cell,
+.arco-table-th.arco-table-operation.arco-table-radio .arco-table-cell,
+.arco-table-td.arco-table-operation.arco-table-radio .arco-table-cell {
+  padding: 0 4px;
+}
+.arco-table-th.arco-table-operation.arco-table-checkbox,
+.arco-table-td.arco-table-operation.arco-table-checkbox {
+  position: relative;
+  z-index: 11;
+}
+.arco-table-th.arco-table-operation.arco-table-checkbox.arco-table-col-fixed-left,
+.arco-table-td.arco-table-operation.arco-table-checkbox.arco-table-col-fixed-left,
+.arco-table-th.arco-table-operation.arco-table-checkbox.arco-table-col-fixed-right,
+.arco-table-td.arco-table-operation.arco-table-checkbox.arco-table-col-fixed-right {
+  position: sticky !important;
+  z-index: 12;
+}
 .arco-table-radio,
 .arco-table-checkbox {
   justify-content: center;
@@ -665,13 +683,10 @@
 .arco-table-virtualized .arco-table-element {
   table-layout: fixed;
 }
-.arco-table-virtualized div.arco-table-body div.arco-table-tr {
-  display: flex;
-}
-.arco-table-virtualized div.arco-table-body div.arco-table-td {
-  display: flex;
-  flex: 1;
-  align-items: center;
+.arco-table-virtualized .arco-table-body .arco-table-td.arco-table-col-fixed-left,
+.arco-table-virtualized .arco-table-body .arco-table-td.arco-table-col-fixed-right {
+  position: sticky;
+  z-index: 10;
 }
 .arco-table-pagination {
   display: flex;

package/lib/table/style/index.less

@@ -349,6 +349,25 @@
     padding: 0;
   }
 
+  &-th&-operation&-checkbox &-cell,
+  &-td&-operation&-checkbox &-cell,
+  &-th&-operation&-radio &-cell,
+  &-td&-operation&-radio &-cell {
+    padding: 0 @spacing-2;
+  }
+
+  &-th&-operation&-checkbox,
+  &-td&-operation&-checkbox {
+    position: relative;
+    z-index: 11;
+
+    &.@{table-prefix-cls}-col-fixed-left,
+    &.@{table-prefix-cls}-col-fixed-right {
+      position: sticky !important;
+      z-index: 12;
+    }
+  }
+
   &-radio,
   &-checkbox {
     justify-content: center;
@@ -824,14 +843,12 @@
     table-layout: fixed;
   }
 
-  &-virtualized div&-body div&-tr {
-    display: flex;
-  }
-
-  &-virtualized div&-body div&-td {
-    display: flex;
-    flex: 1;
-    align-items: center;
+  &-virtualized .@{table-prefix-cls}-body .@{table-prefix-cls}-td {
+    &.@{table-prefix-cls}-col-fixed-left,
+    &.@{table-prefix-cls}-col-fixed-right {
+      position: sticky;
+      z-index: 10;
+    }
   }
 }
 

package/lib/table/table-operation-td.js

@@ -68,11 +68,11 @@ var OperationTd = vue.defineComponent({
     }, ...utils.getOperationFixedCls(prefixCls, props.operationColumn)]);
     const leafKeys = vue.computed(() => utils.getLeafKeys(props.record));
     const selectionStatus = vue.computed(() => {
-      var _a;
-      return utils.getSelectionStatus((_a = tableCtx.currentSelectedRowKeys) != null ? _a : [], leafKeys.value);
+      var _a, _b;
+      return utils.getSelectionStatus((_b = (_a = tableCtx.currentSelectedRowKeySet) != null ? _a : tableCtx.currentSelectedRowKeys) != null ? _b : [], leafKeys.value);
     });
     const renderContent = () => {
-      var _a, _b, _c, _d, _e, _f;
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
       if (props.summary) {
         return null;
       }
@@ -95,7 +95,7 @@ var OperationTd = vue.defineComponent({
           }, null);
         }
         return vue.createVNode(index["default"], {
-          "modelValue": (_b = (_a = props.selectedRowKeys) == null ? void 0 : _a.includes(value)) != null ? _b : false,
+          "modelValue": (_d = (_c = (_a = tableCtx.selectedRowKeySet) == null ? void 0 : _a.has(value)) != null ? _c : (_b = props.selectedRowKeys) == null ? void 0 : _b.includes(value)) != null ? _d : false,
           "disabled": Boolean(props.record.disabled),
           "uninjectGroupContext": true,
           "onChange": (checked) => {
@@ -108,7 +108,7 @@ var OperationTd = vue.defineComponent({
       if (props.operationColumn.name === "selection-radio") {
         const value = props.record.key;
         return vue.createVNode(index$1["default"], {
-          "modelValue": (_d = (_c = props.selectedRowKeys) == null ? void 0 : _c.includes(value)) != null ? _d : false,
+          "modelValue": (_h = (_g = (_e = tableCtx.selectedRowKeySet) == null ? void 0 : _e.has(value)) != null ? _g : (_f = props.selectedRowKeys) == null ? void 0 : _f.includes(value)) != null ? _h : false,
           "disabled": Boolean(props.record.disabled),
           "uninjectGroupContext": true,
           "onChange": (checked) => {
@@ -125,7 +125,7 @@ var OperationTd = vue.defineComponent({
         return null;
       }
       if (props.operationColumn.name === "drag-handle") {
-        return (_f = (_e = slots["drag-handle-icon"]) == null ? void 0 : _e.call(slots)) != null ? _f : vue.createVNode(index$4, null, null);
+        return (_j = (_i = slots["drag-handle-icon"]) == null ? void 0 : _i.call(slots)) != null ? _j : vue.createVNode(index$4, null, null);
       }
       return null;
     };