@element-plus/nightly 0.0.20221022 → 0.0.20221024

package/dist/index.full.js

@@ -1,4 +1,4 @@
-/*! Element Plus v0.0.20221022 */
+/*! Element Plus v0.0.20221024 */
 
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
@@ -11072,7 +11072,7 @@
     };
   };
 
-  const version$1 = "0.0.20221022";
+  const version$1 = "0.0.20221024";
 
   const makeInstaller = (components = []) => {
     const install = (app, options) => {
@@ -11121,9 +11121,9 @@
     return target;
   };
 
-  const COMPONENT_NAME$k = "ElAffix";
+  const COMPONENT_NAME$l = "ElAffix";
   const __default__$1w = vue.defineComponent({
-    name: COMPONENT_NAME$k
+    name: COMPONENT_NAME$l
   });
   const _sfc_main$2f = /* @__PURE__ */ vue.defineComponent({
     ...__default__$1w,
@@ -11199,7 +11199,7 @@
         if (props.target) {
           target.value = (_a = document.querySelector(props.target)) != null ? _a : void 0;
           if (!target.value)
-            throwError(COMPONENT_NAME$k, `Target is not existed: ${props.target}`);
+            throwError(COMPONENT_NAME$l, `Target is not existed: ${props.target}`);
         } else {
           target.value = document.documentElement;
         }
@@ -11580,7 +11580,7 @@
 
   const _hoisted_1$13 = ["role"];
   const _hoisted_2$G = ["id", "type", "disabled", "formatter", "parser", "readonly", "autocomplete", "tabindex", "aria-label", "placeholder", "form"];
-  const _hoisted_3$l = ["id", "tabindex", "disabled", "readonly", "autocomplete", "aria-label", "placeholder", "form"];
+  const _hoisted_3$k = ["id", "tabindex", "disabled", "readonly", "autocomplete", "aria-label", "placeholder", "form"];
   const __default__$1t = vue.defineComponent({
     name: "ElInput",
     inheritAttrs: false
@@ -11971,7 +11971,7 @@
               onBlur: handleBlur,
               onChange: handleChange,
               onKeydown: handleKeydown
-            }), null, 16, _hoisted_3$l),
+            }), null, 16, _hoisted_3$k),
             vue.unref(isWordLimitVisible) ? (vue.openBlock(), vue.createElementBlock("span", {
               key: 0,
               style: vue.normalizeStyle(countStyle.value),
@@ -12031,7 +12031,7 @@
     always: Boolean
   });
 
-  const COMPONENT_NAME$j = "Thumb";
+  const COMPONENT_NAME$k = "Thumb";
   const _sfc_main$2b = /* @__PURE__ */ vue.defineComponent({
     __name: "thumb",
     props: thumbProps,
@@ -12040,7 +12040,7 @@
       const scrollbar = vue.inject(scrollbarContextKey);
       const ns = useNamespace("scrollbar");
       if (!scrollbar)
-        throwError(COMPONENT_NAME$j, "can not inject scrollbar context");
+        throwError(COMPONENT_NAME$k, "can not inject scrollbar context");
       const instance = vue.ref();
       const thumb = vue.ref();
       const thumbState = vue.ref({});
@@ -13997,10 +13997,10 @@
 
   const _hoisted_1$11 = ["aria-expanded", "aria-owns"];
   const _hoisted_2$E = { key: 0 };
-  const _hoisted_3$k = ["id", "aria-selected", "onClick"];
-  const COMPONENT_NAME$i = "ElAutocomplete";
+  const _hoisted_3$j = ["id", "aria-selected", "onClick"];
+  const COMPONENT_NAME$j = "ElAutocomplete";
   const __default__$1k = vue.defineComponent({
-    name: COMPONENT_NAME$i,
+    name: COMPONENT_NAME$j,
     inheritAttrs: false
   });
   const _sfc_main$20 = /* @__PURE__ */ vue.defineComponent({
@@ -14062,7 +14062,7 @@
             suggestions.value = suggestionList;
             highlightedIndex.value = props.highlightFirstItem ? 0 : -1;
           } else {
-            throwError(COMPONENT_NAME$i, "autocomplete suggestions must be an array");
+            throwError(COMPONENT_NAME$j, "autocomplete suggestions must be an array");
           }
         };
         loading.value = true;
@@ -14260,7 +14260,7 @@
                       vue.renderSlot(_ctx.$slots, "default", { item }, () => [
                         vue.createTextVNode(vue.toDisplayString(item[_ctx.valueKey]), 1)
                       ])
-                    ], 10, _hoisted_3$k);
+                    ], 10, _hoisted_3$j);
                   }), 128))
                 ]),
                 _: 3
@@ -14498,9 +14498,9 @@
     };
   };
 
-  const COMPONENT_NAME$h = "ElBacktop";
+  const COMPONENT_NAME$i = "ElBacktop";
   const __default__$1i = vue.defineComponent({
-    name: COMPONENT_NAME$h
+    name: COMPONENT_NAME$i
   });
   const _sfc_main$1_ = /* @__PURE__ */ vue.defineComponent({
     ...__default__$1i,
@@ -14509,7 +14509,7 @@
     setup(__props, { emit }) {
       const props = __props;
       const ns = useNamespace("backtop");
-      const { handleClick, visible } = useBackTop(props, emit, COMPONENT_NAME$h);
+      const { handleClick, visible } = useBackTop(props, emit, COMPONENT_NAME$i);
       const backTopStyle = vue.computed(() => ({
         right: `${props.right}px`,
         bottom: `${props.bottom}px`
@@ -18525,9 +18525,9 @@
     [INPUT_EVENT]: (value) => isDate(value)
   };
 
-  const COMPONENT_NAME$g = "ElCalendar";
+  const COMPONENT_NAME$h = "ElCalendar";
   const __default__$1a = vue.defineComponent({
-    name: COMPONENT_NAME$g
+    name: COMPONENT_NAME$h
   });
   const _sfc_main$1P = /* @__PURE__ */ vue.defineComponent({
     ...__default__$1a,
@@ -18760,12 +18760,207 @@
     change: (current, prev) => [current, prev].every(isNumber)
   };
 
-  const _hoisted_1$V = ["onMouseenter", "onMouseleave"];
-  const _hoisted_2$A = ["onMouseenter", "onClick"];
-  const _hoisted_3$j = { key: 0 };
   const THROTTLE_TIME = 300;
+  const useCarousel = (props, emit, componentName) => {
+    const {
+      children: items,
+      addChild: addItem,
+      removeChild: removeItem
+    } = useOrderedChildren(vue.getCurrentInstance(), "ElCarouselItem");
+    const activeIndex = vue.ref(-1);
+    const timer = vue.ref(null);
+    const hover = vue.ref(false);
+    const root = vue.ref();
+    const arrowDisplay = vue.computed(() => props.arrow !== "never" && !vue.unref(isVertical));
+    const hasLabel = vue.computed(() => {
+      return items.value.some((item) => item.props.label.toString().length > 0);
+    });
+    const isCardType = vue.computed(() => props.type === "card");
+    const isVertical = vue.computed(() => props.direction === "vertical");
+    const throttledArrowClick = throttle((index) => {
+      setActiveItem(index);
+    }, THROTTLE_TIME, { trailing: true });
+    const throttledIndicatorHover = throttle((index) => {
+      handleIndicatorHover(index);
+    }, THROTTLE_TIME);
+    function pauseTimer() {
+      if (timer.value) {
+        clearInterval(timer.value);
+        timer.value = null;
+      }
+    }
+    function startTimer() {
+      if (props.interval <= 0 || !props.autoplay || timer.value)
+        return;
+      timer.value = setInterval(() => playSlides(), props.interval);
+    }
+    const playSlides = () => {
+      if (activeIndex.value < items.value.length - 1) {
+        activeIndex.value = activeIndex.value + 1;
+      } else if (props.loop) {
+        activeIndex.value = 0;
+      }
+    };
+    function setActiveItem(index) {
+      if (isString(index)) {
+        const filteredItems = items.value.filter((item) => item.props.name === index);
+        if (filteredItems.length > 0) {
+          index = items.value.indexOf(filteredItems[0]);
+        }
+      }
+      index = Number(index);
+      if (Number.isNaN(index) || index !== Math.floor(index)) {
+        return;
+      }
+      const itemCount = items.value.length;
+      const oldIndex = activeIndex.value;
+      if (index < 0) {
+        activeIndex.value = props.loop ? itemCount - 1 : 0;
+      } else if (index >= itemCount) {
+        activeIndex.value = props.loop ? 0 : itemCount - 1;
+      } else {
+        activeIndex.value = index;
+      }
+      if (oldIndex === activeIndex.value) {
+        resetItemPosition(oldIndex);
+      }
+      resetTimer();
+    }
+    function resetItemPosition(oldIndex) {
+      items.value.forEach((item, index) => {
+        item.translateItem(index, activeIndex.value, oldIndex);
+      });
+    }
+    function itemInStage(item, index) {
+      var _a, _b, _c, _d;
+      const _items = vue.unref(items);
+      const itemCount = _items.length;
+      if (itemCount === 0 || !item.states.inStage)
+        return false;
+      const nextItemIndex = index + 1;
+      const prevItemIndex = index - 1;
+      const lastItemIndex = itemCount - 1;
+      const isLastItemActive = _items[lastItemIndex].states.active;
+      const isFirstItemActive = _items[0].states.active;
+      const isNextItemActive = (_b = (_a = _items[nextItemIndex]) == null ? void 0 : _a.states) == null ? void 0 : _b.active;
+      const isPrevItemActive = (_d = (_c = _items[prevItemIndex]) == null ? void 0 : _c.states) == null ? void 0 : _d.active;
+      if (index === lastItemIndex && isFirstItemActive || isNextItemActive) {
+        return "left";
+      } else if (index === 0 && isLastItemActive || isPrevItemActive) {
+        return "right";
+      }
+      return false;
+    }
+    function handleMouseEnter() {
+      hover.value = true;
+      if (props.pauseOnHover) {
+        pauseTimer();
+      }
+    }
+    function handleMouseLeave() {
+      hover.value = false;
+      startTimer();
+    }
+    function handleButtonEnter(arrow) {
+      if (vue.unref(isVertical))
+        return;
+      items.value.forEach((item, index) => {
+        if (arrow === itemInStage(item, index)) {
+          item.states.hover = true;
+        }
+      });
+    }
+    function handleButtonLeave() {
+      if (vue.unref(isVertical))
+        return;
+      items.value.forEach((item) => {
+        item.states.hover = false;
+      });
+    }
+    function handleIndicatorClick(index) {
+      activeIndex.value = index;
+    }
+    function handleIndicatorHover(index) {
+      if (props.trigger === "hover" && index !== activeIndex.value) {
+        activeIndex.value = index;
+      }
+    }
+    function prev() {
+      setActiveItem(activeIndex.value - 1);
+    }
+    function next() {
+      setActiveItem(activeIndex.value + 1);
+    }
+    function resetTimer() {
+      pauseTimer();
+      startTimer();
+    }
+    vue.watch(() => activeIndex.value, (current, prev2) => {
+      resetItemPosition(prev2);
+      if (prev2 > -1) {
+        emit("change", current, prev2);
+      }
+    });
+    vue.watch(() => props.autoplay, (autoplay) => {
+      autoplay ? startTimer() : pauseTimer();
+    });
+    vue.watch(() => props.loop, () => {
+      setActiveItem(activeIndex.value);
+    });
+    vue.watch(() => props.interval, () => {
+      resetTimer();
+    });
+    vue.watch(() => items.value, () => {
+      if (items.value.length > 0)
+        setActiveItem(props.initialIndex);
+    });
+    const resizeObserver = vue.shallowRef();
+    vue.onMounted(() => {
+      resizeObserver.value = useResizeObserver(root.value, () => {
+        resetItemPosition();
+      });
+      startTimer();
+    });
+    vue.onBeforeUnmount(() => {
+      pauseTimer();
+      if (root.value && resizeObserver.value)
+        resizeObserver.value.stop();
+    });
+    vue.provide(carouselContextKey, {
+      root,
+      isCardType,
+      isVertical,
+      items,
+      loop: props.loop,
+      addItem,
+      removeItem,
+      setActiveItem
+    });
+    return {
+      activeIndex,
+      arrowDisplay,
+      hasLabel,
+      hover,
+      isCardType,
+      items,
+      handleButtonEnter,
+      handleButtonLeave,
+      handleIndicatorClick,
+      handleMouseEnter,
+      handleMouseLeave,
+      setActiveItem,
+      prev,
+      next,
+      throttledArrowClick,
+      throttledIndicatorHover
+    };
+  };
+
+  const _hoisted_1$V = ["onMouseenter", "onClick"];
+  const _hoisted_2$A = { key: 0 };
+  const COMPONENT_NAME$g = "ElCarousel";
   const __default__$18 = vue.defineComponent({
-    name: "ElCarousel"
+    name: COMPONENT_NAME$g
   });
   const _sfc_main$1N = /* @__PURE__ */ vue.defineComponent({
     ...__default__$18,
@@ -18773,20 +18968,25 @@
     emits: carouselEmits,
     setup(__props, { expose, emit }) {
       const props = __props;
-      const ns = useNamespace("carousel");
       const {
-        children: items,
-        addChild: addItem,
-        removeChild: removeItem
-      } = useOrderedChildren(vue.getCurrentInstance(), "ElCarouselItem");
-      const activeIndex = vue.ref(-1);
-      const timer = vue.ref(null);
-      const hover = vue.ref(false);
-      const root = vue.ref();
-      const arrowDisplay = vue.computed(() => props.arrow !== "never" && !vue.unref(isVertical));
-      const hasLabel = vue.computed(() => {
-        return items.value.some((item) => item.props.label.toString().length > 0);
-      });
+        activeIndex,
+        arrowDisplay,
+        hasLabel,
+        hover,
+        isCardType,
+        items,
+        handleButtonEnter,
+        handleButtonLeave,
+        handleIndicatorClick,
+        handleMouseEnter,
+        handleMouseLeave,
+        setActiveItem,
+        prev,
+        next,
+        throttledArrowClick,
+        throttledIndicatorHover
+      } = useCarousel(props, emit);
+      const ns = useNamespace("carousel");
       const carouselClasses = vue.computed(() => {
         const classes = [ns.b(), ns.m(props.direction)];
         if (vue.unref(isCardType)) {
@@ -18796,7 +18996,7 @@
       });
       const indicatorsClasses = vue.computed(() => {
         const classes = [ns.e("indicators"), ns.em("indicators", props.direction)];
-        if (hasLabel.value) {
+        if (vue.unref(hasLabel)) {
           classes.push(ns.em("indicators", "labels"));
         }
         if (props.indicatorPosition === "outside" || vue.unref(isCardType)) {
@@ -18804,167 +19004,6 @@
         }
         return classes;
       });
-      const isCardType = vue.computed(() => props.type === "card");
-      const isVertical = vue.computed(() => props.direction === "vertical");
-      const throttledArrowClick = throttle((index) => {
-        setActiveItem(index);
-      }, THROTTLE_TIME, { trailing: true });
-      const throttledIndicatorHover = throttle((index) => {
-        handleIndicatorHover(index);
-      }, THROTTLE_TIME);
-      function pauseTimer() {
-        if (timer.value) {
-          clearInterval(timer.value);
-          timer.value = null;
-        }
-      }
-      function startTimer() {
-        if (props.interval <= 0 || !props.autoplay || timer.value)
-          return;
-        timer.value = setInterval(() => playSlides(), props.interval);
-      }
-      const playSlides = () => {
-        if (activeIndex.value < items.value.length - 1) {
-          activeIndex.value = activeIndex.value + 1;
-        } else if (props.loop) {
-          activeIndex.value = 0;
-        }
-      };
-      function setActiveItem(index) {
-        if (isString(index)) {
-          const filteredItems = items.value.filter((item) => item.props.name === index);
-          if (filteredItems.length > 0) {
-            index = items.value.indexOf(filteredItems[0]);
-          }
-        }
-        index = Number(index);
-        if (Number.isNaN(index) || index !== Math.floor(index)) {
-          return;
-        }
-        const itemCount = items.value.length;
-        const oldIndex = activeIndex.value;
-        if (index < 0) {
-          activeIndex.value = props.loop ? itemCount - 1 : 0;
-        } else if (index >= itemCount) {
-          activeIndex.value = props.loop ? 0 : itemCount - 1;
-        } else {
-          activeIndex.value = index;
-        }
-        if (oldIndex === activeIndex.value) {
-          resetItemPosition(oldIndex);
-        }
-        resetTimer();
-      }
-      function resetItemPosition(oldIndex) {
-        items.value.forEach((item, index) => {
-          item.translateItem(index, activeIndex.value, oldIndex);
-        });
-      }
-      function itemInStage(item, index) {
-        var _a, _b, _c, _d;
-        const _items = vue.unref(items);
-        const itemCount = _items.length;
-        if (itemCount === 0 || !item.states.inStage)
-          return false;
-        const nextItemIndex = index + 1;
-        const prevItemIndex = index - 1;
-        const lastItemIndex = itemCount - 1;
-        const isLastItemActive = _items[lastItemIndex].states.active;
-        const isFirstItemActive = _items[0].states.active;
-        const isNextItemActive = (_b = (_a = _items[nextItemIndex]) == null ? void 0 : _a.states) == null ? void 0 : _b.active;
-        const isPrevItemActive = (_d = (_c = _items[prevItemIndex]) == null ? void 0 : _c.states) == null ? void 0 : _d.active;
-        if (index === lastItemIndex && isFirstItemActive || isNextItemActive) {
-          return "left";
-        } else if (index === 0 && isLastItemActive || isPrevItemActive) {
-          return "right";
-        }
-        return false;
-      }
-      function handleMouseEnter() {
-        hover.value = true;
-        if (props.pauseOnHover) {
-          pauseTimer();
-        }
-      }
-      function handleMouseLeave() {
-        hover.value = false;
-        startTimer();
-      }
-      function handleButtonEnter(arrow) {
-        if (vue.unref(isVertical))
-          return;
-        items.value.forEach((item, index) => {
-          if (arrow === itemInStage(item, index)) {
-            item.states.hover = true;
-          }
-        });
-      }
-      function handleButtonLeave() {
-        if (vue.unref(isVertical))
-          return;
-        items.value.forEach((item) => {
-          item.states.hover = false;
-        });
-      }
-      function handleIndicatorClick(index) {
-        activeIndex.value = index;
-      }
-      function handleIndicatorHover(index) {
-        if (props.trigger === "hover" && index !== activeIndex.value) {
-          activeIndex.value = index;
-        }
-      }
-      function prev() {
-        setActiveItem(activeIndex.value - 1);
-      }
-      function next() {
-        setActiveItem(activeIndex.value + 1);
-      }
-      function resetTimer() {
-        pauseTimer();
-        startTimer();
-      }
-      vue.watch(() => activeIndex.value, (current, prev2) => {
-        resetItemPosition(prev2);
-        if (prev2 > -1) {
-          emit("change", current, prev2);
-        }
-      });
-      vue.watch(() => props.autoplay, (autoplay) => {
-        autoplay ? startTimer() : pauseTimer();
-      });
-      vue.watch(() => props.loop, () => {
-        setActiveItem(activeIndex.value);
-      });
-      vue.watch(() => props.interval, () => {
-        resetTimer();
-      });
-      vue.watch(() => items.value, () => {
-        if (items.value.length > 0)
-          setActiveItem(props.initialIndex);
-      });
-      const resizeObserver = vue.shallowRef();
-      vue.onMounted(() => {
-        resizeObserver.value = useResizeObserver(root.value, () => {
-          resetItemPosition();
-        });
-        startTimer();
-      });
-      vue.onBeforeUnmount(() => {
-        pauseTimer();
-        if (root.value && resizeObserver.value)
-          resizeObserver.value.stop();
-      });
-      vue.provide(carouselContextKey, {
-        root,
-        isCardType,
-        isVertical,
-        items,
-        loop: props.loop,
-        addItem,
-        removeItem,
-        setActiveItem
-      });
       expose({
         setActiveItem,
         prev,
@@ -18972,11 +19011,10 @@
       });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", {
-          ref_key: "root",
-          ref: root,
+          ref: "root",
           class: vue.normalizeClass(vue.unref(carouselClasses)),
-          onMouseenter: vue.withModifiers(handleMouseEnter, ["stop"]),
-          onMouseleave: vue.withModifiers(handleMouseLeave, ["stop"])
+          onMouseenter: _cache[6] || (_cache[6] = vue.withModifiers((...args) => vue.unref(handleMouseEnter) && vue.unref(handleMouseEnter)(...args), ["stop"])),
+          onMouseleave: _cache[7] || (_cache[7] = vue.withModifiers((...args) => vue.unref(handleMouseLeave) && vue.unref(handleMouseLeave)(...args), ["stop"]))
         }, [
           vue.createElementVNode("div", {
             class: vue.normalizeClass(vue.unref(ns).e("container")),
@@ -18991,9 +19029,9 @@
                 vue.withDirectives(vue.createElementVNode("button", {
                   type: "button",
                   class: vue.normalizeClass([vue.unref(ns).e("arrow"), vue.unref(ns).em("arrow", "left")]),
-                  onMouseenter: _cache[0] || (_cache[0] = ($event) => handleButtonEnter("left")),
-                  onMouseleave: handleButtonLeave,
-                  onClick: _cache[1] || (_cache[1] = vue.withModifiers(($event) => vue.unref(throttledArrowClick)(activeIndex.value - 1), ["stop"]))
+                  onMouseenter: _cache[0] || (_cache[0] = ($event) => vue.unref(handleButtonEnter)("left")),
+                  onMouseleave: _cache[1] || (_cache[1] = (...args) => vue.unref(handleButtonLeave) && vue.unref(handleButtonLeave)(...args)),
+                  onClick: _cache[2] || (_cache[2] = vue.withModifiers(($event) => vue.unref(throttledArrowClick)(vue.unref(activeIndex) - 1), ["stop"]))
                 }, [
                   vue.createVNode(vue.unref(ElIcon), null, {
                     default: vue.withCtx(() => [
@@ -19004,7 +19042,7 @@
                 ], 34), [
                   [
                     vue.vShow,
-                    (_ctx.arrow === "always" || hover.value) && (props.loop || activeIndex.value > 0)
+                    (_ctx.arrow === "always" || vue.unref(hover)) && (props.loop || vue.unref(activeIndex) > 0)
                   ]
                 ])
               ]),
@@ -19019,9 +19057,9 @@
                 vue.withDirectives(vue.createElementVNode("button", {
                   type: "button",
                   class: vue.normalizeClass([vue.unref(ns).e("arrow"), vue.unref(ns).em("arrow", "right")]),
-                  onMouseenter: _cache[2] || (_cache[2] = ($event) => handleButtonEnter("right")),
-                  onMouseleave: handleButtonLeave,
-                  onClick: _cache[3] || (_cache[3] = vue.withModifiers(($event) => vue.unref(throttledArrowClick)(activeIndex.value + 1), ["stop"]))
+                  onMouseenter: _cache[3] || (_cache[3] = ($event) => vue.unref(handleButtonEnter)("right")),
+                  onMouseleave: _cache[4] || (_cache[4] = (...args) => vue.unref(handleButtonLeave) && vue.unref(handleButtonLeave)(...args)),
+                  onClick: _cache[5] || (_cache[5] = vue.withModifiers(($event) => vue.unref(throttledArrowClick)(vue.unref(activeIndex) + 1), ["stop"]))
                 }, [
                   vue.createVNode(vue.unref(ElIcon), null, {
                     default: vue.withCtx(() => [
@@ -19032,7 +19070,7 @@
                 ], 34), [
                   [
                     vue.vShow,
-                    (_ctx.arrow === "always" || hover.value) && (props.loop || activeIndex.value < vue.unref(items).length - 1)
+                    (_ctx.arrow === "always" || vue.unref(hover)) && (props.loop || vue.unref(activeIndex) < vue.unref(items).length - 1)
                   ]
                 ])
               ]),
@@ -19050,20 +19088,20 @@
                 class: vue.normalizeClass([
                   vue.unref(ns).e("indicator"),
                   vue.unref(ns).em("indicator", _ctx.direction),
-                  vue.unref(ns).is("active", index === activeIndex.value)
+                  vue.unref(ns).is("active", index === vue.unref(activeIndex))
                 ]),
                 onMouseenter: ($event) => vue.unref(throttledIndicatorHover)(index),
-                onClick: vue.withModifiers(($event) => handleIndicatorClick(index), ["stop"])
+                onClick: vue.withModifiers(($event) => vue.unref(handleIndicatorClick)(index), ["stop"])
               }, [
                 vue.createElementVNode("button", {
                   class: vue.normalizeClass(vue.unref(ns).e("button"))
                 }, [
-                  vue.unref(hasLabel) ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$j, vue.toDisplayString(item.props.label), 1)) : vue.createCommentVNode("v-if", true)
+                  vue.unref(hasLabel) ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$A, vue.toDisplayString(item.props.label), 1)) : vue.createCommentVNode("v-if", true)
                 ], 2)
-              ], 42, _hoisted_2$A);
+              ], 42, _hoisted_1$V);
             }), 128))
           ], 2)) : vue.createCommentVNode("v-if", true)
-        ], 42, _hoisted_1$V);
+        ], 34);
       };
     }
   });
@@ -41285,22 +41323,29 @@
     scrollContainer == null ? void 0 : scrollContainer.addEventListener("scroll", removePopper);
     return popperInstance;
   }
+  function getCurrentColumns(column) {
+    if (column.children) {
+      return flatMap(column.children, getCurrentColumns);
+    } else {
+      return [column];
+    }
+  }
+  function getColSpan(colSpan, column) {
+    return colSpan + column.colSpan;
+  }
   const isFixedColumn = (index, fixed, store, realColumns) => {
     let start = 0;
     let after = index;
+    const columns = store.states.columns.value;
     if (realColumns) {
-      if (realColumns[index].colSpan > 1) {
-        return {};
-      }
-      for (let i = 0; i < index; i++) {
-        start += realColumns[i].colSpan;
-      }
-      after = start + realColumns[index].colSpan - 1;
+      const curColumns = getCurrentColumns(realColumns[index]);
+      const preColumns = columns.slice(0, columns.indexOf(curColumns[0]));
+      start = preColumns.reduce(getColSpan, 0);
+      after = start + curColumns.reduce(getColSpan, 0) - 1;
     } else {
       start = index;
     }
     let fixedLayout;
-    const columns = store.states.columns;
     switch (fixed) {
       case "left":
         if (after < store.states.fixedLeafColumnsLength.value) {
@@ -41308,14 +41353,14 @@
         }
         break;
       case "right":
-        if (start >= columns.value.length - store.states.rightFixedLeafColumnsLength.value) {
+        if (start >= columns.length - store.states.rightFixedLeafColumnsLength.value) {
           fixedLayout = "right";
         }
         break;
       default:
         if (after < store.states.fixedLeafColumnsLength.value) {
           fixedLayout = "left";
-        } else if (start >= columns.value.length - store.states.rightFixedLeafColumnsLength.value) {
+        } else if (start >= columns.length - store.states.rightFixedLeafColumnsLength.value) {
           fixedLayout = "right";
         }
     }
@@ -41327,11 +41372,11 @@
   };
   const getFixedColumnsClass = (namespace, index, fixed, store, realColumns, offset = 0) => {
     const classes = [];
-    const { direction, start } = isFixedColumn(index, fixed, store, realColumns);
+    const { direction, start, after } = isFixedColumn(index, fixed, store, realColumns);
     if (direction) {
       const isLeft = direction === "left";
       classes.push(`${namespace}-fixed-column--${direction}`);
-      if (isLeft && start + offset === store.states.fixedLeafColumnsLength.value - 1) {
+      if (isLeft && after + offset === store.states.fixedLeafColumnsLength.value - 1) {
         classes.push("is-last-column");
       } else if (!isLeft && start - offset === store.states.columns.value.length - store.states.rightFixedLeafColumnsLength.value) {
         classes.push("is-first-column");
@@ -41343,7 +41388,11 @@
     return offset + (column.realWidth === null || Number.isNaN(column.realWidth) ? Number(column.width) : column.realWidth);
   }
   const getFixedColumnOffset = (index, fixed, store, realColumns) => {
-    const { direction, start = 0 } = isFixedColumn(index, fixed, store, realColumns);
+    const {
+      direction,
+      start = 0,
+      after = 0
+    } = isFixedColumn(index, fixed, store, realColumns);
     if (!direction) {
       return;
     }
@@ -41351,9 +41400,9 @@
     const isLeft = direction === "left";
     const columns = store.states.columns.value;
     if (isLeft) {
-      styles.left = columns.slice(0, index).reduce(getOffset, 0);
+      styles.left = columns.slice(0, start).reduce(getOffset, 0);
     } else {
-      styles.right = columns.slice(start + 1).reverse().reduce(getOffset, 0);
+      styles.right = columns.slice(after + 1).reverse().reduce(getOffset, 0);
     }
     return styles;
   };
@@ -41739,7 +41788,17 @@
       if (!rowKey.value)
         throw new Error("[ElTable] prop row-key is required");
     };
+    const updateChildFixed = (column) => {
+      var _a2;
+      (_a2 = column.children) == null ? void 0 : _a2.forEach((childColumn) => {
+        childColumn.fixed = column.fixed;
+        updateChildFixed(childColumn);
+      });
+    };
     const updateColumns = () => {
+      _columns.value.forEach((column) => {
+        updateChildFixed(column);
+      });
       fixedColumns.value = _columns.value.filter((column) => column.fixed === true || column.fixed === "left");
       rightFixedColumns.value = _columns.value.filter((column) => column.fixed === "right");
       if (fixedColumns.value.length > 0 && _columns.value[0] && _columns.value[0].type === "selection" && !_columns.value[0].fixed) {
@@ -43039,13 +43098,13 @@
           column
         });
       }
-      const fixedStyle = column.isSubColumn ? null : getFixedColumnOffset(columnIndex, column.fixed, props.store, row);
+      const fixedStyle = getFixedColumnOffset(columnIndex, column.fixed, props.store, row);
       ensurePosition(fixedStyle, "left");
       ensurePosition(fixedStyle, "right");
       return Object.assign({}, headerCellStyles, fixedStyle);
     };
     const getHeaderCellClass = (rowIndex, columnIndex, row, column) => {
-      const fixedClasses = column.isSubColumn ? [] : getFixedColumnsClass(ns.b(), columnIndex, column.fixed, props.store, row);
+      const fixedClasses = getFixedColumnsClass(ns.b(), columnIndex, column.fixed, props.store, row);
       const classes = [
         column.id,
         column.order,
@@ -43443,13 +43502,13 @@
           column
         });
       }
-      const fixedStyle = column.isSubColumn ? null : getFixedColumnOffset(columnIndex, props == null ? void 0 : props.fixed, props.store);
+      const fixedStyle = getFixedColumnOffset(columnIndex, props == null ? void 0 : props.fixed, props.store);
       ensurePosition(fixedStyle, "left");
       ensurePosition(fixedStyle, "right");
       return Object.assign({}, cellStyles, fixedStyle);
     };
     const getCellClass = (rowIndex, columnIndex, row, column, offset) => {
-      const fixedClasses = column.isSubColumn ? [] : getFixedColumnsClass(ns.b(), columnIndex, props == null ? void 0 : props.fixed, props.store, void 0, offset);
+      const fixedClasses = getFixedColumnsClass(ns.b(), columnIndex, props == null ? void 0 : props.fixed, props.store, void 0, offset);
       const classes = [column.id, column.align, column.className, ...fixedClasses];
       const cellClassName = parent == null ? void 0 : parent.props.cellClassName;
       if (typeof cellClassName === "string") {