element-plus 2.8.3 → 2.8.4

package/dist/index.full.mjs

@@ -1,4 +1,4 @@
-/*! Element Plus v2.8.3 */
+/*! Element Plus v2.8.4 */
 
 import { getCurrentScope, onScopeDispose, unref, readonly, shallowRef, watchEffect, ref, watch, getCurrentInstance, onMounted, nextTick, computed, defineComponent, openBlock, createElementBlock, createElementVNode, warn, isVNode, Fragment, Comment, onBeforeUnmount, isRef, inject, onUnmounted, h as h$1, Teleport as Teleport$1, onBeforeMount, provide, renderSlot, normalizeClass, normalizeStyle, mergeProps, useSlots, createBlock, Transition, withCtx, withDirectives, resolveDynamicComponent, createCommentVNode, createTextVNode, toDisplayString, createVNode, vShow, toRef, reactive, toRefs, onUpdated, TransitionGroup, useAttrs as useAttrs$1, withModifiers, onActivated, cloneVNode, Text as Text$1, onDeactivated, renderList, withKeys, createSlots, normalizeProps, guardReactiveProps, toRaw, vModelCheckbox, vModelRadio, resolveComponent, onBeforeUpdate, vModelText, toHandlers, markRaw, effectScope, resolveDirective, toHandlerKey, render, createApp, shallowReactive } from 'vue';
 
@@ -11555,7 +11555,7 @@ const ConfigProvider = defineComponent({
 
 const ElConfigProvider = withInstall(ConfigProvider);
 
-const version$1 = "2.8.3";
+const version$1 = "2.8.4";
 
 const makeInstaller = (components = []) => {
   const install = (app, options) => {
@@ -14666,8 +14666,10 @@ const _sfc_main$2m = /* @__PURE__ */ defineComponent({
       wrapElement: wrapRef
     }));
     onActivated(() => {
-      wrapRef.value.scrollTop = wrapScrollTop;
-      wrapRef.value.scrollLeft = wrapScrollLeft;
+      if (wrapRef.value) {
+        wrapRef.value.scrollTop = wrapScrollTop;
+        wrapRef.value.scrollLeft = wrapScrollLeft;
+      }
     });
     onMounted(() => {
       if (!props.native)
@@ -16617,7 +16619,8 @@ const _sfc_main$2c = /* @__PURE__ */ defineComponent({
       focus,
       blur,
       close,
-      highlight
+      highlight,
+      getData
     });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(ElTooltip), {
@@ -18853,6 +18856,15 @@ const timePickerDefaultProps = buildProps({
     default: true
   },
   unlinkPanels: Boolean,
+  placement: {
+    type: definePropType(String),
+    values: Ee,
+    default: "bottom"
+  },
+  fallbackPlacements: {
+    type: definePropType(Array),
+    default: ["bottom", "top", "right", "left"]
+  },
   ...useEmptyValuesProps,
   ...useAriaProps(["ariaLabel"])
 });
@@ -19340,8 +19352,9 @@ const _sfc_main$24 = /* @__PURE__ */ defineComponent({
         transition: `${unref(nsDate).namespace.value}-zoom-in-top`,
         "popper-class": [`${unref(nsDate).namespace.value}-picker__popper`, _ctx.popperClass],
         "popper-options": unref(elPopperOptions),
-        "fallback-placements": ["bottom", "top", "right", "left"],
+        "fallback-placements": _ctx.fallbackPlacements,
         "gpu-acceleration": false,
+        placement: _ctx.placement,
         "stop-popper-mouse-event": false,
         "hide-after": 0,
         persistent: "",
@@ -19497,7 +19510,7 @@ const _sfc_main$24 = /* @__PURE__ */ defineComponent({
           })
         ]),
         _: 3
-      }, 16, ["visible", "transition", "popper-class", "popper-options"]);
+      }, 16, ["visible", "transition", "popper-class", "popper-options", "fallback-placements", "placement"]);
     };
   }
 });
@@ -21559,7 +21572,7 @@ const _sfc_main$1Z = /* @__PURE__ */ defineComponent({
     });
     const carouselContainer = computed(() => {
       const classes = [ns.e("container")];
-      if (props.motionBlur && unref(isTransitioning)) {
+      if (props.motionBlur && unref(isTransitioning) && items.value.length > 1) {
         classes.push(unref(isVertical) ? `${ns.namespace.value}-transitioning-vertical` : `${ns.namespace.value}-transitioning`);
       }
       return classes;
@@ -22220,7 +22233,7 @@ const _sfc_main$1X = /* @__PURE__ */ defineComponent({
         onClick: unref(onClickRoot)
       }, {
         default: withCtx(() => {
-          var _a, _b;
+          var _a, _b, _c, _d;
           return [
             createElementVNode("span", {
               class: normalizeClass(unref(spanKls))
@@ -22235,8 +22248,8 @@ const _sfc_main$1X = /* @__PURE__ */ defineComponent({
                 name: _ctx.name,
                 tabindex: _ctx.tabindex,
                 disabled: unref(isDisabled),
-                "true-value": (_a = _ctx.trueValue) != null ? _a : _ctx.trueLabel,
-                "false-value": (_b = _ctx.falseValue) != null ? _b : _ctx.falseLabel,
+                "true-value": (_b = (_a = _ctx.trueValue) != null ? _a : _ctx.trueLabel) != null ? _b : true,
+                "false-value": (_d = (_c = _ctx.falseValue) != null ? _c : _ctx.falseLabel) != null ? _d : false,
                 onChange: unref(handleChange),
                 onFocus: ($event) => isFocused.value = true,
                 onBlur: ($event) => isFocused.value = false,
@@ -22326,7 +22339,7 @@ const _sfc_main$1W = /* @__PURE__ */ defineComponent({
       ];
     });
     return (_ctx, _cache) => {
-      var _a, _b;
+      var _a, _b, _c, _d;
       return openBlock(), createElementBlock("label", {
         class: normalizeClass(unref(labelKls))
       }, [
@@ -22338,8 +22351,8 @@ const _sfc_main$1W = /* @__PURE__ */ defineComponent({
           name: _ctx.name,
           tabindex: _ctx.tabindex,
           disabled: unref(isDisabled),
-          "true-value": (_a = _ctx.trueValue) != null ? _a : _ctx.trueLabel,
-          "false-value": (_b = _ctx.falseValue) != null ? _b : _ctx.falseLabel,
+          "true-value": (_b = (_a = _ctx.trueValue) != null ? _a : _ctx.trueLabel) != null ? _b : true,
+          "false-value": (_d = (_c = _ctx.falseValue) != null ? _c : _ctx.falseLabel) != null ? _d : false,
           onChange: unref(handleChange),
           onFocus: ($event) => isFocused.value = true,
           onBlur: ($event) => isFocused.value = false,
@@ -24212,7 +24225,8 @@ const _sfc_main$1N = /* @__PURE__ */ defineComponent({
       getCheckedNodes,
       cascaderPanelRef,
       togglePopperVisible,
-      contentRef
+      contentRef,
+      presentText
     });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(ElTooltip), {
@@ -26051,12 +26065,11 @@ const _sfc_main$1C = /* @__PURE__ */ defineComponent({
         color.fromString(newVal);
       }
     });
-    watch(() => props.colorFormat, () => {
-      if (props.colorFormat) {
-        color.format = props.colorFormat;
-        color.doOnChange();
-        emit(UPDATE_MODEL_EVENT, color.value);
-      }
+    watch(() => [props.colorFormat, props.showAlpha], () => {
+      color.enableAlpha = props.showAlpha;
+      color.format = props.colorFormat || color.format;
+      color.doOnChange();
+      emit(UPDATE_MODEL_EVENT, color.value);
     });
     watch(() => currentColor.value, (val) => {
       customInput.value = val;
@@ -29816,7 +29829,7 @@ var ElDescriptionsCell = defineComponent({
     };
   },
   render() {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a;
     const item = getNormalizedProps(this.cell);
     const directives = (((_a = this.cell) == null ? void 0 : _a.dirs) || []).map((dire) => {
       const { dir, arg, modifiers, value } = dire;
@@ -29824,8 +29837,14 @@ var ElDescriptionsCell = defineComponent({
     });
     const { border, direction } = this.descriptions;
     const isVertical = direction === "vertical";
-    const label = ((_d = (_c = (_b = this.cell) == null ? void 0 : _b.children) == null ? void 0 : _c.label) == null ? void 0 : _d.call(_c)) || item.label;
-    const content = (_g = (_f = (_e = this.cell) == null ? void 0 : _e.children) == null ? void 0 : _f.default) == null ? void 0 : _g.call(_f);
+    const renderLabel = () => {
+      var _a2, _b, _c;
+      return ((_c = (_b = (_a2 = this.cell) == null ? void 0 : _a2.children) == null ? void 0 : _b.label) == null ? void 0 : _c.call(_b)) || item.label;
+    };
+    const renderContent = () => {
+      var _a2, _b, _c;
+      return (_c = (_b = (_a2 = this.cell) == null ? void 0 : _a2.children) == null ? void 0 : _b.default) == null ? void 0 : _c.call(_b);
+    };
     const span = item.span;
     const rowspan = item.rowspan;
     const align = item.align ? `is-${item.align}` : "";
@@ -29851,7 +29870,7 @@ var ElDescriptionsCell = defineComponent({
           ],
           colSpan: isVertical ? span : 1,
           rowspan: isVertical ? 1 : rowspan
-        }, label), directives);
+        }, renderLabel()), directives);
       case "content":
         return withDirectives(h$1(this.tag, {
           style,
@@ -29865,8 +29884,9 @@ var ElDescriptionsCell = defineComponent({
           ],
           colSpan: isVertical ? span : span * 2 - 1,
           rowspan: isVertical ? rowspan * 2 - 1 : rowspan
-        }, content), directives);
-      default:
+        }, renderContent()), directives);
+      default: {
+        const label = renderLabel();
         return withDirectives(h$1("td", {
           style,
           class: [ns.e("cell"), align],
@@ -29878,8 +29898,9 @@ var ElDescriptionsCell = defineComponent({
           }, label) : void 0,
           h$1("span", {
             class: [ns.e("content"), className]
-          }, content)
+          }, renderContent())
         ]), directives);
+      }
     }
   }
 });
@@ -33063,6 +33084,9 @@ const _sfc_main$16 = /* @__PURE__ */ defineComponent({
       }
       if (stepStrictly) {
         newVal = toPrecision(Math.round(newVal / step) * step, precision);
+        if (newVal !== value) {
+          update && emit(UPDATE_MODEL_EVENT, newVal);
+        }
       }
       if (!isUndefined(precision)) {
         newVal = toPrecision(newVal, precision);
@@ -33248,7 +33272,20 @@ const _sfc_main$16 = /* @__PURE__ */ defineComponent({
           onFocus: handleFocus,
           onInput: handleInput,
           onChange: handleInputChange
-        }, null, 8, ["id", "step", "model-value", "placeholder", "readonly", "disabled", "size", "max", "min", "name", "aria-label", "onKeydown"])
+        }, createSlots({ _: 2 }, [
+          _ctx.$slots.prefix ? {
+            name: "prefix",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "prefix")
+            ])
+          } : void 0,
+          _ctx.$slots.suffix ? {
+            name: "suffix",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "suffix")
+            ])
+          } : void 0
+        ]), 1032, ["id", "step", "model-value", "placeholder", "readonly", "disabled", "size", "max", "min", "name", "aria-label", "onKeydown"])
       ], 42, ["onDragstart"]);
     };
   }
@@ -35497,6 +35534,7 @@ const SelectProps$1 = buildProps({
     type: definePropType(Array),
     default: ["bottom-start", "top-start", "right", "left"]
   },
+  appendTo: String,
   ...useEmptyValuesProps,
   ...useAriaProps(["ariaLabel"])
 });
@@ -35585,6 +35623,7 @@ function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
       "stop-popper-mouse-event": false,
       "gpu-acceleration": false,
       persistent: _ctx.persistent,
+      "append-to": _ctx.appendTo,
       onBeforeShow: _ctx.handleMenuEnter,
       onHide: ($event) => _ctx.states.isBeforeHide = false
     }, {
@@ -35890,7 +35929,7 @@ function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
         }, 512)
       ]),
       _: 3
-    }, 8, ["visible", "placement", "teleported", "popper-class", "popper-options", "fallback-placements", "effect", "transition", "persistent", "onBeforeShow", "onHide"])
+    }, 8, ["visible", "placement", "teleported", "popper-class", "popper-options", "fallback-placements", "effect", "transition", "persistent", "append-to", "onBeforeShow", "onHide"])
   ], 16, ["onMouseleave"])), [
     [_directive_click_outside, _ctx.handleClickOutside, _ctx.popperRef]
   ]);
@@ -35997,7 +36036,8 @@ const paginationSizesProps = buildProps({
   size: {
     type: String,
     values: componentSizes
-  }
+  },
+  appendSizeTo: String
 });
 
 const __default__$M = defineComponent({
@@ -36043,6 +36083,7 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
           size: _ctx.size,
           teleported: _ctx.teleported,
           "validate-event": false,
+          "append-to": _ctx.appendSizeTo,
           onChange: handleChange
         }, {
           default: withCtx(() => [
@@ -36055,7 +36096,7 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
             }), 128))
           ]),
           _: 1
-        }, 8, ["model-value", "disabled", "popper-class", "size", "teleported"])
+        }, 8, ["model-value", "disabled", "popper-class", "size", "teleported", "append-to"])
       ], 2);
     };
   }
@@ -36422,7 +36463,8 @@ const paginationProps = buildProps({
   size: useSizeProp,
   background: Boolean,
   disabled: Boolean,
-  hideOnSinglePage: Boolean
+  hideOnSinglePage: Boolean,
+  appendSizeTo: String
 });
 const paginationEmits = {
   "update:current-page": (val) => isNumber(val),
@@ -36609,7 +36651,8 @@ var Pagination = defineComponent({
           popperClass: props.popperClass,
           disabled: props.disabled,
           teleported: props.teleported,
-          size: _size.value
+          size: _size.value,
+          appendSizeTo: props.appendSizeTo
         }),
         slot: (_b = (_a = slots == null ? void 0 : slots.default) == null ? void 0 : _a.call(slots)) != null ? _b : null,
         total: h$1(Total, { total: isAbsent(props.total) ? 0 : props.total })
@@ -39472,7 +39515,9 @@ const _sfc_main$N = defineComponent({
       type: Object,
       required: true
     },
-    style: Object,
+    style: {
+      type: Object
+    },
     height: Number
   },
   setup() {
@@ -39485,7 +39530,7 @@ const _sfc_main$N = defineComponent({
 function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     class: normalizeClass(_ctx.ns.be("group", "title")),
-    style: normalizeStyle([_ctx.style, { lineHeight: `${_ctx.height}px` }])
+    style: normalizeStyle({ ..._ctx.style, lineHeight: `${_ctx.height}px` })
   }, toDisplayString(_ctx.item.label), 7);
 }
 var GroupItem = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["render", _sfc_render$7], ["__file", "group-item.vue"]]);
@@ -39645,12 +39690,25 @@ const OptionProps = buildProps({
   selected: Boolean,
   created: Boolean
 });
+const selectEmits = {
+  [UPDATE_MODEL_EVENT]: (val) => true,
+  [CHANGE_EVENT]: (val) => true,
+  "remove-tag": (val) => true,
+  "visible-change": (visible) => true,
+  focus: (evt) => evt instanceof FocusEvent,
+  blur: (evt) => evt instanceof FocusEvent,
+  clear: () => true
+};
+const optionEmits = {
+  hover: (index) => isNumber(index),
+  select: (val, index) => true
+};
 
 const selectV2InjectionKey = Symbol("ElSelectV2Injection");
 
 const _sfc_main$M = defineComponent({
   props: OptionProps,
-  emits: ["select", "hover"],
+  emits: optionEmits,
   setup(props, { emit }) {
     const select = inject(selectV2InjectionKey);
     const ns = useNamespace("select");
@@ -39689,18 +39747,19 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
 }
 var OptionItem = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["render", _sfc_render$6], ["__file", "option-item.vue"]]);
 
+const props = {
+  loading: Boolean,
+  data: {
+    type: Array,
+    required: true
+  },
+  hoveringIndex: Number,
+  width: Number
+};
 var ElSelectMenu = defineComponent({
   name: "ElSelectDropdown",
-  props: {
-    loading: Boolean,
-    data: {
-      type: Array,
-      required: true
-    },
-    hoveringIndex: Number,
-    width: Number
-  },
-  setup(props, {
+  props,
+  setup(props2, {
     slots,
     expose
   }) {
@@ -39713,7 +39772,7 @@ var ElSelectMenu = defineComponent({
     } = useProps(select.props);
     const cachedHeights = ref([]);
     const listRef = ref();
-    const size = computed(() => props.data.length);
+    const size = computed(() => props2.data.length);
     watch(() => size.value, () => {
       var _a, _b;
       (_b = (_a = select.tooltipRef.value).updatePopper) == null ? void 0 : _b.call(_a);
@@ -39767,7 +39826,7 @@ var ElSelectMenu = defineComponent({
       } = select.props;
       return disabled || !selected && (multiple ? multipleLimit > 0 && modelValue.length >= multipleLimit : false);
     };
-    const isItemHovering = (target) => props.hoveringIndex === target;
+    const isItemHovering = (target) => props2.hoveringIndex === target;
     const scrollToItem = (index) => {
       const list = listRef.value;
       if (list) {
@@ -39780,7 +39839,7 @@ var ElSelectMenu = defineComponent({
         list.resetScrollTop();
       }
     };
-    expose({
+    const exposed = {
       listRef,
       isSized,
       isItemDisabled,
@@ -39788,7 +39847,8 @@ var ElSelectMenu = defineComponent({
       isItemSelected,
       scrollToItem,
       resetScrollTop
-    });
+    };
+    expose(exposed);
     const Item = (itemProps) => {
       const {
         index,
@@ -39827,9 +39887,9 @@ var ElSelectMenu = defineComponent({
         "onSelect": onSelect,
         "onHover": onHover
       }), {
-        default: (props2) => {
+        default: (props3) => {
           var _a;
-          return ((_a = slots.default) == null ? void 0 : _a.call(slots, props2)) || createVNode("span", null, [getLabel(item)]);
+          return ((_a = slots.default) == null ? void 0 : _a.call(slots, props3)) || createVNode("span", null, [getLabel(item)]);
         }
       });
     };
@@ -39843,9 +39903,6 @@ var ElSelectMenu = defineComponent({
     const onBackward = () => {
       onKeyboardNavigate("backward");
     };
-    const onEscOrTab = () => {
-      select.expanded = false;
-    };
     const onKeydown = (e) => {
       const {
         code
@@ -39864,7 +39921,6 @@ var ElSelectMenu = defineComponent({
       switch (code) {
         case tab:
         case esc: {
-          onEscOrTab();
           break;
         }
         case down: {
@@ -39886,7 +39942,7 @@ var ElSelectMenu = defineComponent({
       const {
         data,
         width
-      } = props;
+      } = props2;
       const {
         height,
         multiple,
@@ -39909,7 +39965,7 @@ var ElSelectMenu = defineComponent({
         "total": data.length,
         "onKeydown": onKeydown
       }), {
-        default: (props2) => createVNode(Item, props2, null)
+        default: (props3) => createVNode(Item, props3, null)
       }), (_d = slots.footer) == null ? void 0 : _d.call(slots)]);
     };
   }
@@ -39918,7 +39974,7 @@ var ElSelectMenu = defineComponent({
 function useAllowCreate(props, states) {
   const { aliasProps, getLabel, getValue } = useProps(props);
   const createOptionCount = ref(0);
-  const cachedSelectedOption = ref(null);
+  const cachedSelectedOption = ref();
   const enableAllowCreateMode = computed(() => {
     return props.allowCreate && props.filterable;
   });
@@ -40017,17 +40073,17 @@ const useSelect$1 = (props, emit) => {
     isBeforeHide: false
   });
   const popperSize = ref(-1);
-  const selectRef = ref(null);
-  const selectionRef = ref(null);
-  const tooltipRef = ref(null);
-  const tagTooltipRef = ref(null);
-  const inputRef = ref(null);
-  const calculatorRef = ref(null);
-  const prefixRef = ref(null);
-  const suffixRef = ref(null);
-  const menuRef = ref(null);
-  const tagMenuRef = ref(null);
-  const collapseItemRef = ref(null);
+  const selectRef = ref();
+  const selectionRef = ref();
+  const tooltipRef = ref();
+  const tagTooltipRef = ref();
+  const inputRef = ref();
+  const calculatorRef = ref();
+  const prefixRef = ref();
+  const suffixRef = ref();
+  const menuRef = ref();
+  const tagMenuRef = ref();
+  const collapseItemRef = ref();
   const {
     isComposing,
     handleCompositionStart,
@@ -40072,7 +40128,11 @@ const useSelect$1 = (props, emit) => {
   const iconComponent = computed(() => props.remote && props.filterable ? "" : arrow_down_default);
   const iconReverse = computed(() => iconComponent.value && nsSelect.is("reverse", expanded.value));
   const validateState = computed(() => (elFormItem == null ? void 0 : elFormItem.validateState) || "");
-  const validateIcon = computed(() => ValidateComponentsMap[validateState.value]);
+  const validateIcon = computed(() => {
+    if (!validateState.value)
+      return;
+    return ValidateComponentsMap[validateState.value];
+  });
   const debounce$1 = computed(() => props.remote ? 300 : 0);
   const emptyText = computed(() => {
     if (props.loading) {
@@ -40445,7 +40505,7 @@ const useSelect$1 = (props, emit) => {
     }
   };
   const onHoverOption = (idx) => {
-    states.hoveringIndex = idx;
+    states.hoveringIndex = idx != null ? idx : -1;
   };
   const updateHoveringIndex = () => {
     if (!props.multiple) {
@@ -40679,15 +40739,7 @@ const _sfc_main$L = defineComponent({
   },
   directives: { ClickOutside },
   props: SelectProps,
-  emits: [
-    UPDATE_MODEL_EVENT,
-    CHANGE_EVENT,
-    "remove-tag",
-    "clear",
-    "visible-change",
-    "focus",
-    "blur"
-  ],
+  emits: selectEmits,
   setup(props, { emit }) {
     const modelValue = computed(() => {
       const { modelValue: rawModelValue, multiple } = props;
@@ -40707,6 +40759,7 @@ const _sfc_main$L = defineComponent({
         height: API.popupHeight,
         modelValue
       }),
+      expanded: API.expanded,
       tooltipRef: API.tooltipRef,
       onSelect: API.onSelect,
       onHover: API.onHover,
@@ -43743,12 +43796,23 @@ function useTree$2(watcherData) {
       });
     }
   };
+  const updateKeyChildren = (key, data) => {
+    const { lazy: lazy2, rowKey } = instance.props;
+    if (!lazy2)
+      return;
+    if (!rowKey)
+      throw new Error("[Table] rowKey is required in updateKeyChild");
+    if (lazyTreeNodeMap.value[key]) {
+      lazyTreeNodeMap.value[key] = data;
+    }
+  };
   return {
     loadData,
     loadOrToggle,
     toggleTreeExpansion,
     updateTreeExpandKeys,
     updateTreeData,
+    updateKeyChildren,
     normalize,
     states: {
       expandRowKeys,
@@ -44121,6 +44185,7 @@ function useWatcher$1() {
     updateTreeExpandKeys,
     toggleTreeExpansion,
     updateTreeData,
+    updateKeyChildren,
     loadOrToggle,
     states: treeStates
   } = useTree$2({
@@ -44178,6 +44243,7 @@ function useWatcher$1() {
     updateCurrentRowData,
     loadOrToggle,
     updateTreeData,
+    updateKeyChildren,
     states: {
       tableSize,
       rowKey,
@@ -44674,6 +44740,9 @@ const _sfc_main$B = defineComponent({
     },
     upDataColumn: {
       type: Function
+    },
+    appendTo: {
+      type: String
     }
   },
   setup(props) {
@@ -44818,7 +44887,8 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
     effect: "light",
     pure: "",
     "popper-class": _ctx.filterClassName,
-    persistent: ""
+    persistent: "",
+    "append-to": _ctx.appendTo
   }, {
     content: withCtx(() => [
       _ctx.multiple ? (openBlock(), createElementBlock("div", { key: 0 }, [
@@ -44911,7 +44981,7 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
       ])
     ]),
     _: 3
-  }, 8, ["visible", "placement", "popper-class"]);
+  }, 8, ["visible", "placement", "popper-class", "append-to"]);
 }
 var FilterPanel = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["render", _sfc_render$4], ["__file", "filter-panel.vue"]]);
 
@@ -45322,6 +45392,9 @@ var TableHeader = defineComponent({
           order: ""
         };
       }
+    },
+    appendFilterPanelTo: {
+      type: String
     }
   },
   setup(props, { emit }) {
@@ -45452,6 +45525,7 @@ var TableHeader = defineComponent({
           column.filterable && h$1(FilterPanel, {
             store,
             placement: column.filterPlacement || "bottom-start",
+            appendTo: $parent.appendFilterPanelTo,
             column,
             upDataColumn: (key, value) => {
               column[key] = value;
@@ -46185,6 +46259,9 @@ function useUtils(store) {
   const sort = (prop, order) => {
     store.commit("sort", { prop, order });
   };
+  const updateKeyChildren = (key, data) => {
+    store.updateKeyChildren(key, data);
+  };
   return {
     setCurrentRow,
     getSelectionRows,
@@ -46194,7 +46271,8 @@ function useUtils(store) {
     toggleAllSelection,
     toggleRowExpansion,
     clearSort,
-    sort
+    sort,
+    updateKeyChildren
   };
 }
 
@@ -46584,6 +46662,7 @@ var defaultProps$1 = {
   scrollbarAlwaysOn: Boolean,
   flexible: Boolean,
   showOverflowTooltip: [Boolean, Object],
+  appendFilterPanelTo: String,
   scrollbarTabindex: {
     type: [Number, String],
     default: void 0
@@ -46699,7 +46778,8 @@ const _sfc_main$A = defineComponent({
       toggleAllSelection,
       toggleRowExpansion,
       clearSort,
-      sort
+      sort,
+      updateKeyChildren
     } = useUtils(store);
     const {
       isHidden,
@@ -46773,6 +46853,7 @@ const _sfc_main$A = defineComponent({
       clearSort,
       doLayout,
       sort,
+      updateKeyChildren,
       t,
       setDragVisible,
       context: table,
@@ -46853,8 +46934,9 @@ function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
             border: _ctx.border,
             "default-sort": _ctx.defaultSort,
             store: _ctx.store,
+            "append-filter-panel-to": _ctx.appendFilterPanelTo,
             onSetDragVisible: _ctx.setDragVisible
-          }, null, 8, ["border", "default-sort", "store", "onSetDragVisible"])
+          }, null, 8, ["border", "default-sort", "store", "append-filter-panel-to", "onSetDragVisible"])
         ], 6)
       ], 2)), [
         [_directive_mousewheel, _ctx.handleHeaderFooterMousewheel]
@@ -46893,8 +46975,9 @@ function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
                 border: _ctx.border,
                 "default-sort": _ctx.defaultSort,
                 store: _ctx.store,
+                "append-filter-panel-to": _ctx.appendFilterPanelTo,
                 onSetDragVisible: _ctx.setDragVisible
-              }, null, 8, ["class", "border", "default-sort", "store", "onSetDragVisible"])) : createCommentVNode("v-if", true),
+              }, null, 8, ["class", "border", "default-sort", "store", "append-filter-panel-to", "onSetDragVisible"])) : createCommentVNode("v-if", true),
               createVNode(_component_table_body, {
                 context: _ctx.context,
                 highlight: _ctx.highlightCurrentRow,