npm - @deot/vc-components - Versions diffs - 1.0.9 → 1.0.11 - Mend

@deot/vc-components 1.0.9 → 1.0.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/index.cjs CHANGED Viewed

@@ -14,6 +14,8 @@ const helperValidator = require('@deot/helper-validator');
 const helperCache = require('@deot/helper-cache');
 const Load = require('@deot/helper-load');
 const helperScheduler = require('@deot/helper-scheduler');
+const lodash = require('lodash');
+const helperFp = require('@deot/helper-fp');
 function _interopNamespaceDefault(e) {
 	const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -89,9 +91,9 @@ const props$1q = {
 /** @jsxImportSource vue */
-const COMPONENT_NAME$1Z = 'vc-action-sheet';
+const COMPONENT_NAME$1$ = 'vc-action-sheet';
 const ActionSheet = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1Z,
+  name: COMPONENT_NAME$1$,
   props: props$1q,
   setup(props, {
     slots
@@ -278,9 +280,9 @@ const IconManager = new Manager();
 /** @jsxImportSource vue */
-const COMPONENT_NAME$1Y = 'vc-icon';
+const COMPONENT_NAME$1_ = 'vc-icon';
 const Icon = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1Y,
+  name: COMPONENT_NAME$1_,
   props: props$1o,
   setup(props) {
     const viewBox = vue.ref('0 0 1024 1024');
@@ -479,9 +481,9 @@ const useTransition = () => {
   };
 };
-const COMPONENT_NAME$1X = "vc-transition";
+const COMPONENT_NAME$1Z = "vc-transition";
 const Transition = vue.defineComponent({
-  name: COMPONENT_NAME$1X,
+  name: COMPONENT_NAME$1Z,
   props: props$1n,
   // 当不声明emits的情况下，事件存在于attrs中
   inheritAttrs: false,
@@ -502,9 +504,9 @@ const Transition = vue.defineComponent({
   }
 });
-const COMPONENT_NAME$1W = "vc-transition-collapse";
+const COMPONENT_NAME$1Y = "vc-transition-collapse";
 const TransitionCollapse = vue.defineComponent({
-  name: COMPONENT_NAME$1W,
+  name: COMPONENT_NAME$1Y,
   props: props$1n,
   // 当不声明emits的情况下，事件存在于attrs中
   inheritAttrs: false,
@@ -623,9 +625,9 @@ const TransitionCollapse = vue.defineComponent({
   }
 });
-const COMPONENT_NAME$1V = "vc-transition-fade";
+const COMPONENT_NAME$1X = "vc-transition-fade";
 const TransitionFade = vue.defineComponent({
-  name: COMPONENT_NAME$1V,
+  name: COMPONENT_NAME$1X,
   props: {
     ...props$1n,
     // inheritAttrs必须是false
@@ -660,9 +662,9 @@ const TransitionFade = vue.defineComponent({
   }
 });
-const COMPONENT_NAME$1U = "vc-transition-scale";
+const COMPONENT_NAME$1W = "vc-transition-scale";
 const TransitionScale = vue.defineComponent({
-  name: COMPONENT_NAME$1U,
+  name: COMPONENT_NAME$1W,
   props: {
     ...props$1n,
     mode: {
@@ -702,9 +704,9 @@ const TransitionScale = vue.defineComponent({
   }
 });
-const COMPONENT_NAME$1T = "vc-transition-slide";
+const COMPONENT_NAME$1V = "vc-transition-slide";
 const TransitionSlide = vue.defineComponent({
-  name: COMPONENT_NAME$1T,
+  name: COMPONENT_NAME$1V,
   props: {
     ...props$1n,
     mode: {
@@ -744,9 +746,9 @@ const TransitionSlide = vue.defineComponent({
   }
 });
-const COMPONENT_NAME$1S = "vc-transition-zoom";
+const COMPONENT_NAME$1U = "vc-transition-zoom";
 const TransitionZoom = vue.defineComponent({
-  name: COMPONENT_NAME$1S,
+  name: COMPONENT_NAME$1U,
   props: {
     ...props$1n,
     mode: {
@@ -788,7 +790,7 @@ const TransitionZoom = vue.defineComponent({
 /** @jsxImportSource vue */
-const COMPONENT_NAME$1R = 'vc-alert';
+const COMPONENT_NAME$1T = 'vc-alert';
 // [color, borderColor, backgroundColor], -> CSS
 const THEME_MAP = {
@@ -798,7 +800,7 @@ const THEME_MAP = {
   warning: ['#ffbf00', '#ffe58f', '#fffbe6']
 };
 const Alert = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1R,
+  name: COMPONENT_NAME$1T,
   props: props$1p,
   setup(props, {
     slots,
@@ -897,9 +899,9 @@ const props$1m = {
 /** @jsxImportSource vue */
-const COMPONENT_NAME$1Q = 'vc-artboard';
+const COMPONENT_NAME$1S = 'vc-artboard';
 const Artboard = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1Q,
+  name: COMPONENT_NAME$1S,
   props: props$1m,
   setup(props, {
     slots
@@ -938,9 +940,9 @@ const props$1l = {
 /** @jsxImportSource vue */
-const COMPONENT_NAME$1P = 'vc-spin';
+const COMPONENT_NAME$1R = 'vc-spin';
 const Spin = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1P,
+  name: COMPONENT_NAME$1R,
   props: props$1l,
   setup(props, {
     slots
@@ -991,9 +993,9 @@ const props$1k = {
   exclude: RegExp
 };
-const COMPONENT_NAME$1O = "vc-debounce";
+const COMPONENT_NAME$1Q = "vc-debounce";
 const Debounce = vue.defineComponent({
-  name: COMPONENT_NAME$1O,
+  name: COMPONENT_NAME$1Q,
   props: props$1k,
   /**
    * 不声明emits使得事件被透传放入attrs中, 这样可以让所有的事件透传
@@ -1065,9 +1067,9 @@ const props$1j = {
 /** @jsxImportSource vue */
-const COMPONENT_NAME$1N = 'vc-button';
+const COMPONENT_NAME$1P = 'vc-button';
 const Button = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1N,
+  name: COMPONENT_NAME$1P,
   emits: ['click'],
   props: props$1j,
   setup(props, {
@@ -1147,9 +1149,9 @@ const props$1i = {
 /** @jsxImportSource vue */
-const COMPONENT_NAME$1M = 'vc-button-group';
+const COMPONENT_NAME$1O = 'vc-button-group';
 const ButtonGroup = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1M,
+  name: COMPONENT_NAME$1O,
   props: props$1i,
   setup(props, {
     slots
@@ -1183,9 +1185,9 @@ const props$1h = {
 /** @jsxImportSource vue */
-const COMPONENT_NAME$1L = 'vc-calendar';
+const COMPONENT_NAME$1N = 'vc-calendar';
 const Calendar = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1L,
+  name: COMPONENT_NAME$1N,
   props: props$1h,
   setup(props, {
     slots
@@ -1223,9 +1225,9 @@ const props$1g = {
 /** @jsxImportSource vue */
-const COMPONENT_NAME$1K = 'vc-card';
+const COMPONENT_NAME$1M = 'vc-card';
 const Card = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1K,
+  name: COMPONENT_NAME$1M,
   props: props$1g,
   setup(props, {
     slots
@@ -1261,9 +1263,9 @@ const props$1f = {
 /** @jsxImportSource vue */
-const COMPONENT_NAME$1J = 'vc-carousel';
+const COMPONENT_NAME$1L = 'vc-carousel';
 const Carousel = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1J,
+  name: COMPONENT_NAME$1L,
   props: props$1f,
   setup(props, {
     slots
@@ -1287,9 +1289,9 @@ const props$1e = {
 /** @jsxImportSource vue */
-const COMPONENT_NAME$1I = 'vc-cascader';
+const COMPONENT_NAME$1K = 'vc-cascader';
 const Cascader = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1I,
+  name: COMPONENT_NAME$1K,
   props: props$1e,
   setup(props, {
     slots
@@ -1358,9 +1360,9 @@ const props$1d = {
 /** @jsxImportSource vue */
-const COMPONENT_NAME$1H = 'vc-chart';
+const COMPONENT_NAME$1J = 'vc-chart';
 const Chart = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1H,
+  name: COMPONENT_NAME$1J,
   props: props$1d,
   emits: [...EVENTS, 'ready'],
   setup(props, {
@@ -1591,9 +1593,9 @@ const useCheckbox = () => {
 /** @jsxImportSource vue */
-const COMPONENT_NAME$1G = 'vc-checkbox';
+const COMPONENT_NAME$1I = 'vc-checkbox';
 const Checkbox = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1G,
+  name: COMPONENT_NAME$1I,
   props: props$1c,
   emits: ['update:modelValue', 'change'],
   setup(props, {
@@ -1680,9 +1682,9 @@ const useCheckboxGroup = () => {
 /** @jsxImportSource vue */
-const COMPONENT_NAME$1F = 'vc-checkbox-group';
+const COMPONENT_NAME$1H = 'vc-checkbox-group';
 const CheckboxGroup = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1F,
+  name: COMPONENT_NAME$1H,
   props: props$1b,
   emits: ['update:modelValue', 'change'],
   setup(props, {
@@ -1700,9 +1702,9 @@ const CheckboxGroup = /* @__PURE__ */ vue.defineComponent({
 /** @jsxImportSource vue */
-const COMPONENT_NAME$1E = 'vcm-checkbox';
+const COMPONENT_NAME$1G = 'vcm-checkbox';
 const MCheckbox = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1E,
+  name: COMPONENT_NAME$1G,
   props: props$1c,
   emits: ['update:modelValue', 'change'],
   setup(props, {
@@ -1742,9 +1744,9 @@ const MCheckbox = /* @__PURE__ */ vue.defineComponent({
 /** @jsxImportSource vue */
-const COMPONENT_NAME$1D = 'vcm-checkbox-group';
+const COMPONENT_NAME$1F = 'vcm-checkbox-group';
 const MCheckboxGroup = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1D,
+  name: COMPONENT_NAME$1F,
   props: props$1b,
   emits: ['update:modelValue', 'change'],
   setup(props, {
@@ -1803,9 +1805,9 @@ const props$19 = {
   }
 };
-const COMPONENT_NAME$1C = "vc-customer";
+const COMPONENT_NAME$1E = "vc-customer";
 const Customer = vue.defineComponent({
-  name: COMPONENT_NAME$1C,
+  name: COMPONENT_NAME$1E,
   props: props$19,
   setup(props, context) {
     return () => vue.h(() => {
@@ -1816,9 +1818,9 @@ const Customer = vue.defineComponent({
 /** @jsxImportSource vue */
-const COMPONENT_NAME$1B = 'vc-message';
+const COMPONENT_NAME$1D = 'vc-message';
 const MessageView = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1B,
+  name: COMPONENT_NAME$1D,
   emits: ['before-close', 'close', 'portal-fulfilled'],
   props: props$1a,
   setup(props, {
@@ -1965,7 +1967,7 @@ class PortalLeaf {
   }
 }
-const COMPONENT_NAME$1A = "vc-portal";
+const COMPONENT_NAME$1C = "vc-portal";
 class Portal {
   /**
    * 清理Portals类型组件
@@ -2017,7 +2019,7 @@ class Portal {
     this.wrapper = wrapper;
     this.globalOptions = {
       ...options,
-      name: options?.name || wrapper.name || Utils__namespace.getUid(COMPONENT_NAME$1A)
+      name: options?.name || wrapper.name || Utils__namespace.getUid(COMPONENT_NAME$1C)
     };
   }
   popup(propsData, options) {
@@ -2116,7 +2118,7 @@ class Portal {
       ...rest
     } = options;
     let useAllNodes = fragment;
-    const name = multiple ? `${name$}__${Utils__namespace.getUid(COMPONENT_NAME$1A)}` : name$;
+    const name = multiple ? `${name$}__${Utils__namespace.getUid(COMPONENT_NAME$1C)}` : name$;
     const container = document.createElement(tag);
     const root = typeof el === "object" ? el : document.querySelector(el || "body");
     !alive && Portal.leafs.get(name)?.destroy();
@@ -2150,7 +2152,7 @@ class Portal {
     } else {
       const wrapper = this.wrapper;
       const app = vue.createApp({
-        name: COMPONENT_NAME$1A,
+        name: COMPONENT_NAME$1C,
         parent,
         setup() {
           if (alive) {
@@ -2262,13 +2264,13 @@ const props$18 = {
   }
 };
-const COMPONENT_NAME$1z = 'vc-portal-view';
+const COMPONENT_NAME$1B = 'vc-portal-view';
 /**
  * 写法不同，但与vue@2.x 保持一致
  */
 const PortalView = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1z,
+  name: COMPONENT_NAME$1B,
   props: props$18,
   setup(props, {
     slots
@@ -2439,9 +2441,9 @@ const useClipboard = (done) => {
   return () => vue.h(props.tag, { onClick: handleClick, class: "vc-clipboard" }, slots?.default?.());
 };
-const COMPONENT_NAME$1y = "vc-clipboard";
+const COMPONENT_NAME$1A = "vc-clipboard";
 const Clipboard$1 = vue.defineComponent({
-  name: COMPONENT_NAME$1y,
+  name: COMPONENT_NAME$1A,
   props: props$17,
   setup() {
     return useClipboard((content) => Message.success({ content }));
@@ -2481,9 +2483,9 @@ const MTransitionZoom = TransitionZoom;
 /** @jsxImportSource vue */
-const COMPONENT_NAME$1x = 'vcm-toast';
+const COMPONENT_NAME$1z = 'vcm-toast';
 const MToastView = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1x,
+  name: COMPONENT_NAME$1z,
   emits: ['close', 'portal-fulfilled'],
   props: props$16,
   setup(props, {
@@ -2585,9 +2587,9 @@ const warning$2 = create$3({ mode: "warning" });
 const error$2 = create$3({ mode: "error" });
 const MToast = Object.assign(MToastView, { destroy: destroy$4, info: info$2, success: success$2, loading, warning: warning$2, error: error$2 });
-const COMPONENT_NAME$1w = "vcm-clipboard";
+const COMPONENT_NAME$1y = "vcm-clipboard";
 const MClipboard$1 = vue.defineComponent({
-  name: COMPONENT_NAME$1w,
+  name: COMPONENT_NAME$1y,
   props: props$17,
   setup() {
     return useClipboard((content) => MToast.info({ content }));
@@ -2619,9 +2621,9 @@ const props$15 = {
   }
 };
-const COMPONENT_NAME$1v = "vc-collapse";
+const COMPONENT_NAME$1x = "vc-collapse";
 const Collapse = vue.defineComponent({
-  name: COMPONENT_NAME$1v,
+  name: COMPONENT_NAME$1x,
   props: props$15,
   emits: ["update:moodelValue", "change"],
   setup(props, { slots, emit }) {
@@ -2738,9 +2740,9 @@ const props$13 = {
 function _isSlot$3(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
-const COMPONENT_NAME$1u = 'vc-expand';
-const Expand = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1u,
+const COMPONENT_NAME$1w = 'vc-expand';
+const Expand$1 = /* @__PURE__ */ vue.defineComponent({
+  name: COMPONENT_NAME$1w,
   props: props$13,
   setup(props, {
     slots
@@ -2770,9 +2772,9 @@ const Expand = /* @__PURE__ */ vue.defineComponent({
 /** @jsxImportSource vue */
-const COMPONENT_NAME$1t = 'vc-collapse-item';
+const COMPONENT_NAME$1v = 'vc-collapse-item';
 const CollapseItem = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1t,
+  name: COMPONENT_NAME$1v,
   props: props$14,
   setup(props, {
     slots,
@@ -2819,7 +2821,7 @@ const CollapseItem = /* @__PURE__ */ vue.defineComponent({
           "onClick": handleToggle
         }, [slots.default?.(), slots.icon?.({
           visible: isActive.value
-        })]), vue.createVNode(Expand, {
+        })]), vue.createVNode(Expand$1, {
           "modelValue": isActive.value,
           "alive": alive.value,
           "onChange": v => isActive.value = v
@@ -2847,9 +2849,9 @@ const props$12 = {
 /** @jsxImportSource vue */
-const COMPONENT_NAME$1s = 'vc-color-picker';
+const COMPONENT_NAME$1u = 'vc-color-picker';
 const ColorPicker = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1s,
+  name: COMPONENT_NAME$1u,
   props: props$12,
   setup(props, {
     slots
@@ -2873,9 +2875,9 @@ const props$11 = {
 /** @jsxImportSource vue */
-const COMPONENT_NAME$1r = 'vc-countdown';
+const COMPONENT_NAME$1t = 'vc-countdown';
 const Countdown = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1r,
+  name: COMPONENT_NAME$1t,
   props: props$11,
   setup(props, {
     slots
@@ -3126,6 +3128,10 @@ const props$Y = {
   changeOnSelect: {
     type: Boolean,
     default: false
+  },
+  nullValue: {
+    type: [Number, String, Object],
+    default: ""
   }
 };
@@ -3320,9 +3326,9 @@ const useNativeEmitter = (input, expose) => {
 /** @jsxImportSource vue */
-const COMPONENT_NAME$1q = 'vc-input';
+const COMPONENT_NAME$1s = 'vc-input';
 const Input = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1q,
+  name: COMPONENT_NAME$1s,
   inheritAttrs: false,
   props: {
     ...props$$,
@@ -3656,9 +3662,9 @@ const useInputNumber = () => {
 /** @jsxImportSource vue */
-const COMPONENT_NAME$1p = 'vc-input-number';
+const COMPONENT_NAME$1r = 'vc-input-number';
 const InputNumber = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1p,
+  name: COMPONENT_NAME$1r,
   props: props$X,
   inheritAttrs: false,
   setup(props, {
@@ -3722,9 +3728,9 @@ const props$W = {
 /** @jsxImportSource vue */
-const COMPONENT_NAME$1o = 'vc-input-search';
+const COMPONENT_NAME$1q = 'vc-input-search';
 const InputSearch = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1o,
+  name: COMPONENT_NAME$1q,
   props: props$W,
   inheritAttrs: false,
   setup(props, {
@@ -4015,9 +4021,9 @@ const usePos = () => {
 function _isSlot$2(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
-const COMPONENT_NAME$1n = 'vc-popover-wrapper';
+const COMPONENT_NAME$1p = 'vc-popover-wrapper';
 const PopoverWrapper = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1n,
+  name: COMPONENT_NAME$1p,
   props: props$_,
   emits: ['portal-fulfilled', 'close'],
   setup(props, {
@@ -4269,9 +4275,9 @@ const PopoverPortal = new Portal(PopoverWrapper);
 /** @jsxImportSource vue */
-const COMPONENT_NAME$1m = 'vc-popover';
+const COMPONENT_NAME$1o = 'vc-popover';
 const Popover$1 = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1m,
+  name: COMPONENT_NAME$1o,
   props: props$Z,
   emits: ['update:modelValue', 'visible-change', 'ready', 'close'],
   setup(props, {
@@ -4421,6 +4427,7 @@ const DEFAULT_FORMATS = {
   datetime: "YYYY-MM-DD HH:mm:ss",
   time: "HH:mm:ss",
   timerange: "HH:mm:ss",
+  monthrange: "YYYY-MM",
   daterange: "YYYY-MM-DD",
   datetimerange: "YYYY-MM-DD HH:mm:ss"
 };
@@ -4968,8 +4975,8 @@ const useBase = () => {
   const props = instance.props;
   const isHover = vue.ref(false);
   const isActive = vue.ref(false);
-  const currentValue = vue.ref("");
-  const focusedDate = vue.ref(null);
+  const currentValue = vue.ref([]);
+  const focusedDate = vue.ref();
   const formItem = vue.inject("vc-form-item", {});
   const its = vcHooks.useAttrs({ merge: false });
   const formatDateText = (value) => {
@@ -5034,23 +5041,22 @@ const useBase = () => {
   };
   const parseValue = (val) => {
     if (isEmpty(val)) {
-      return isRange.value ? [null, null] : [];
+      return [];
     }
     return parserDate(val);
   };
-  const rest = (date) => {
-    currentValue.value = date;
+  const reset = (v) => {
+    currentValue.value = value2Array(v);
   };
   const sync = (eventName, value) => {
-    const date = isRange.value || isQuarter.value ? value : value[0];
-    const dateString = formatDate(value);
-    emit("input", date);
-    emit("update:modelValue", dateString);
+    const formatValue = formatDate(isRange.value || isQuarter.value ? value : value[0]) || props.nullValue;
+    emit("update:modelValue", formatValue);
     eventName = typeof eventName === "string" ? [eventName] : eventName;
     eventName.forEach((name) => {
-      emit(name, dateString, rest);
+      emit(name, formatValue, reset);
     });
-    formItem?.change?.(date);
+    formItem?.change?.();
+    return formatValue;
   };
   const executePromise = (promiseFn, cb, param) => {
     try {
@@ -5080,11 +5086,9 @@ const useBase = () => {
   };
   const handleClear = () => {
     const clear = () => {
-      const date = isRange.value ? [] : "";
       isActive.value = false;
-      currentValue.value = date;
-      sync("change", date);
-      emit("clear", date);
+      currentValue.value = [];
+      emit("clear", sync("change", []));
     };
     executePromise(instance.vnode.props?.onBeforeClear, clear);
   };
@@ -5101,10 +5105,10 @@ const useBase = () => {
     executePromise(instance.vnode.props?.onBeforeOk, ok, value);
   };
   const handleClose = () => {
-    const val = parseValue(props.modelValue);
-    const isSetValueProp = instance.props.modelValue;
-    if (!lodashEs.isEqualWith(currentValue.value, val) && isSetValueProp) {
-      currentValue.value = value2Array(val);
+    const v = parseValue(props.modelValue);
+    const isSetValueProp = props.modelValue;
+    if (!lodashEs.isEqualWith(currentValue.value, v) && isSetValueProp) {
+      currentValue.value = value2Array(v);
     }
     emit("close");
   };
@@ -5112,7 +5116,7 @@ const useBase = () => {
     () => props.modelValue,
     (v) => {
       v = parseValue(v);
-      focusedDate.value = v[0] || props.startDate || /* @__PURE__ */ new Date();
+      focusedDate.value = v?.[0] || props.startDate || /* @__PURE__ */ new Date();
       currentValue.value = value2Array(v);
     },
     { immediate: true }
@@ -5148,9 +5152,8 @@ const useBase = () => {
 /** @jsxImportSource vue */
-const COMPONENT_NAME$1l = 'vc-picker';
-const createPicker = (pickerProps, usePicker) => /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1l,
+const createPicker = (name, pickerProps, usePicker) => /* @__PURE__ */ vue.defineComponent({
+  name,
   props: Object.assign(props$Y, pickerProps),
   inheritAttrs: false,
   emits: ['update:modelValue', 'change', 'clear', 'error', 'close', 'input', 'ready', 'visible-change', 'ok'],
@@ -5206,7 +5209,7 @@ const createPicker = (pickerProps, usePicker) => /* @__PURE__ */ vue.defineCompo
           "disabled": props.disabled,
           "modelValue": visibleValue.value,
           "allowDispatch": false,
-          "class": "vc-picker__input",
+          "class": "vc-date-picker__input",
           "readonly": true,
           "placeholder": props.placeholder || '请选择'
         }, {
@@ -5214,7 +5217,7 @@ const createPicker = (pickerProps, usePicker) => /* @__PURE__ */ vue.defineCompo
             return vue.createVNode("div", {
               "class": [{
                 'is-clear': showClear
-              }, 'vc-picker__append']
+              }, 'vc-date-picker__append']
             }, [vue.createVNode(Icon, {
               "type": showClear.value ? 'clear' : icon.value,
               "onClick": handleIconClick
@@ -5375,9 +5378,9 @@ const getTimeType = type => {
   }
   return view;
 };
-const COMPONENT_NAME$1k = 'vc-date-confirm';
+const COMPONENT_NAME$1n = 'vc-date-confirm';
 const Confirm = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1k,
+  name: COMPONENT_NAME$1n,
   props: {
     showTime: {
       type: Boolean,
@@ -5441,9 +5444,9 @@ const Confirm = /* @__PURE__ */ vue.defineComponent({
 /** @jsxImportSource vue */
-const COMPONENT_NAME$1j = 'vc-date-header';
+const COMPONENT_NAME$1m = 'vc-date-header';
 const DateHeader = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1j,
+  name: COMPONENT_NAME$1m,
   props: {
     panelDate: Date,
     showNext: {
@@ -5527,9 +5530,9 @@ const DateHeader = /* @__PURE__ */ vue.defineComponent({
 /** @jsxImportSource vue */
-const COMPONENT_NAME$1i = 'vc-date-table';
+const COMPONENT_NAME$1l = 'vc-date-table';
 const DateTable = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1i,
+  name: COMPONENT_NAME$1l,
   props: {
     value: Array,
     firstDayOfWeek: {
@@ -5738,9 +5741,9 @@ const DateTable = /* @__PURE__ */ vue.defineComponent({
 /** @jsxImportSource vue */
-const COMPONENT_NAME$1h = 'vc-month-table';
+const COMPONENT_NAME$1k = 'vc-month-table';
 const MonthTable = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1h,
+  name: COMPONENT_NAME$1k,
   props: {
     value: Array,
     panelDate: Date,
@@ -5872,7 +5875,7 @@ const MonthTable = /* @__PURE__ */ vue.defineComponent({
 /** @jsxImportSource vue */
-const COMPONENT_NAME$1g = 'vc-quarter-table';
+const COMPONENT_NAME$1j = 'vc-quarter-table';
 /**
  * 获取季度对应的月份范围
@@ -5906,7 +5909,7 @@ const getQuarterRangeByMonth = value => {
   }
 };
 const QuarterTable = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1g,
+  name: COMPONENT_NAME$1j,
   props: {
     value: Array,
     panelDate: Date,
@@ -6029,9 +6032,9 @@ const QuarterTable = /* @__PURE__ */ vue.defineComponent({
 /** @jsxImportSource vue */
-const COMPONENT_NAME$1f = 'vc-shortcuts-select';
+const COMPONENT_NAME$1i = 'vc-shortcuts-select';
 const ShortcutsSelect = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1f,
+  name: COMPONENT_NAME$1i,
   props: {
     panelDate: Date,
     config: Array,
@@ -6071,9 +6074,9 @@ const ShortcutsSelect = /* @__PURE__ */ vue.defineComponent({
 /** @jsxImportSource vue */
-const COMPONENT_NAME$1e = 'vc-time-select';
+const COMPONENT_NAME$1h = 'vc-time-select';
 const TimeSelect = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1e,
+  name: COMPONENT_NAME$1h,
   props: {
     hours: {
       type: [Number, String],
@@ -6352,9 +6355,9 @@ const TimeSelect = /* @__PURE__ */ vue.defineComponent({
 /** @jsxImportSource vue */
-const COMPONENT_NAME$1d = 'vc-year-table';
+const COMPONENT_NAME$1g = 'vc-year-table';
 const YearTable = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1d,
+  name: COMPONENT_NAME$1g,
   props: {
     value: Array,
     panelDate: Date,
@@ -6477,9 +6480,9 @@ const getDateIsInRange = (value, type, leftPanelDate, rightPanelDate) => {
   }
   return true;
 };
-const COMPONENT_NAME$1c = 'vc-date-range-panel';
+const COMPONENT_NAME$1f = 'vc-date-range-panel';
 const DateRangePanel = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1c,
+  name: COMPONENT_NAME$1f,
   props: {
     ...props$V,
     confirm: {
@@ -6858,9 +6861,9 @@ const DateRangePanel = /* @__PURE__ */ vue.defineComponent({
 /** @jsxImportSource vue */
-const COMPONENT_NAME$1b = 'vc-date-panel';
+const COMPONENT_NAME$1e = 'vc-date-panel';
 const DatePanel = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1b,
+  name: COMPONENT_NAME$1e,
   props: {
     ...props$V,
     type: String,
@@ -7068,9 +7071,9 @@ const isEqualYear$1 = value => {
   const endYear = value[1].getFullYear();
   return startYear === endYear;
 };
-const COMPONENT_NAME$1a = 'vc-monthrange-panel';
+const COMPONENT_NAME$1d = 'vc-monthrange-panel';
 const MonthRangePanel = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1a,
+  name: COMPONENT_NAME$1d,
   props: {
     ...props$V,
     confirm: {
@@ -7245,9 +7248,9 @@ const isEqualYear = value => {
   const endYear = value[1].getFullYear();
   return startYear === endYear;
 };
-const COMPONENT_NAME$19 = 'vc-quarterrange-panel';
+const COMPONENT_NAME$1c = 'vc-quarterrange-panel';
 const QuarterRangePanel = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$19,
+  name: COMPONENT_NAME$1c,
   props: {
     ...props$V,
     confirm: {
@@ -7486,9 +7489,9 @@ const getComparedDate = (leftDate, rightDate) => {
     seconds
   };
 };
-const COMPONENT_NAME$18 = 'vc-timerange-panel';
+const COMPONENT_NAME$1b = 'vc-timerange-panel';
 const TimeRangePanel = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$18,
+  name: COMPONENT_NAME$1b,
   props: props$U,
   emits: ['pick', 'clear', 'ok'],
   setup(props, {
@@ -7587,9 +7590,9 @@ const TimeRangePanel = /* @__PURE__ */ vue.defineComponent({
 /** @jsxImportSource vue */
-const COMPONENT_NAME$17 = 'vc-time-panel';
+const COMPONENT_NAME$1a = 'vc-time-panel';
 const TimePanel = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$17,
+  name: COMPONENT_NAME$1a,
   props: props$U,
   emits: ['pick', 'clear', 'ok'],
   setup(props, {
@@ -7644,6 +7647,7 @@ const TimePanel = /* @__PURE__ */ vue.defineComponent({
 /** @jsxImportSource vue */
+const COMPONENT_NAME$19 = 'vc-date-picker';
 const getPanel$1 = type => {
   if (['daterange', 'datetimerange'].includes(type)) {
     return DateRangePanel;
@@ -7654,7 +7658,7 @@ const getPanel$1 = type => {
   }
   return DatePanel;
 };
-const DatePicker = createPicker(props$10, () => {
+const DatePicker = createPicker(COMPONENT_NAME$19, props$10, () => {
   const props = vue.getCurrentInstance().props;
   const icon = vue.ref('date');
   const panel = vue.shallowRef({});
@@ -7687,9 +7691,9 @@ const props$T = {
 /** @jsxImportSource vue */
-const COMPONENT_NAME$16 = 'vc-divider';
+const COMPONENT_NAME$18 = 'vc-divider';
 const Divider = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$16,
+  name: COMPONENT_NAME$18,
   props: props$T,
   setup(props, {
     slots
@@ -7844,7 +7848,7 @@ const props$Q = {
 /** @jsxImportSource vue */
-const COMPONENT_NAME$15 = 'vc-scroller-track';
+const COMPONENT_NAME$17 = 'vc-scroller-track';
 const BAR_MAP = {
   vertical: {
     scroll: 'scrollTop',
@@ -7864,12 +7868,14 @@ const BAR_MAP = {
   }
 };
 const Track = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$15,
+  name: COMPONENT_NAME$17,
   props: props$S,
   emits: ['change'],
+  inheritAttrs: false,
   setup(props, {
     emit,
-    expose
+    expose,
+    attrs
   }) {
     const instance = vue.getCurrentInstance();
     const track = vue.ref();
@@ -8036,6 +8042,7 @@ const Track = /* @__PURE__ */ vue.defineComponent({
         default: () => [vue.withDirectives(vue.createVNode("div", {
           "ref": track,
           "class": ['is-' + barOptions.value.key, 'vc-scroller-track'],
+          "style": attrs.style,
           "onMousedown": handleClickTrack
         }, [vue.createVNode("div", {
           "ref": thumb,
@@ -8050,9 +8057,9 @@ const Track = /* @__PURE__ */ vue.defineComponent({
 /** @jsxImportSource vue */
-const COMPONENT_NAME$14 = 'vc-scroller-bar';
+const COMPONENT_NAME$16 = 'vc-scroller-bar';
 const Bar = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$14,
+  name: COMPONENT_NAME$16,
   props: props$R,
   emits: ['change'],
   setup(props, {
@@ -8267,7 +8274,7 @@ const useScroller = (expose) => {
 /** @jsxImportSource vue */
-const COMPONENT_NAME$13 = 'vc-scroller';
+const COMPONENT_NAME$15 = 'vc-scroller';
 /**
  * 作为备选方案,目前推荐使用ScrollerWheel
@@ -8278,7 +8285,7 @@ const COMPONENT_NAME$13 = 'vc-scroller';
  * 2. 增加了一层嵌套
  */
 const Scroller = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$13,
+  name: COMPONENT_NAME$15,
   props: props$Q,
   emits: ['scroll'],
   setup(props, {
@@ -8339,7 +8346,7 @@ const Scroller = /* @__PURE__ */ vue.defineComponent({
 /** @jsxImportSource vue */
-const COMPONENT_NAME$12 = 'vc-scroller-wheel';
+const COMPONENT_NAME$14 = 'vc-scroller-wheel';
 /**
  * 为减少一层嵌套，为去除滚动bar的抖动，使用wheel模拟
@@ -8361,8 +8368,13 @@ const COMPONENT_NAME$12 = 'vc-scroller-wheel';
  * 设置scrollTop不会reflow和repaint，不需要考虑transfrom来改变content（transform也只在draw完成）
  */
 const ScrollerWheel = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$12,
-  props: props$Q,
+  name: COMPONENT_NAME$14,
+  props: Object.assign(props$Q, {
+    stopPropagation: {
+      type: Boolean,
+      default: true
+    }
+  }),
   emits: ['scroll'],
   setup(props, {
     slots,
@@ -8422,7 +8434,10 @@ const ScrollerWheel = /* @__PURE__ */ vue.defineComponent({
     vue.onMounted(() => {
       wheel = new helperWheel.Wheel(wrapper.value, {
         shouldWheelX,
-        shouldWheelY
+        shouldWheelY,
+        stopPropagation: () => {
+          return props.stopPropagation;
+        }
       });
       wheel.on(handleWheel);
     });
@@ -8532,9 +8547,9 @@ const props$P = {
 /** @jsxImportSource vue */
-const COMPONENT_NAME$11 = 'vc-drawer';
+const COMPONENT_NAME$13 = 'vc-drawer';
 const DrawerView = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$11,
+  name: COMPONENT_NAME$13,
   props: props$P,
   emits: ['close', 'update:modelValue', 'visible-change'],
   setup(props, {
@@ -8707,9 +8722,9 @@ const props$O = {
 /** @jsxImportSource vue */
-const COMPONENT_NAME$10 = 'vc-dropdown';
+const COMPONENT_NAME$12 = 'vc-dropdown';
 const Dropdown = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$10,
+  name: COMPONENT_NAME$12,
   props: props$O,
   setup(props, {
     slots
@@ -8733,9 +8748,9 @@ const props$N = {
 /** @jsxImportSource vue */
-const COMPONENT_NAME$$ = 'vc-editor';
+const COMPONENT_NAME$11 = 'vc-editor';
 const Editor = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$$,
+  name: COMPONENT_NAME$11,
   props: props$N,
   setup(props, {
     slots
@@ -8750,7 +8765,7 @@ const Editor = /* @__PURE__ */ vue.defineComponent({
 const MEditor = Editor;
-const MExpand = Expand;
+const MExpand = Expand$1;
 const props$M = {
   tag: {
@@ -8879,9 +8894,9 @@ const useForm = (expose, options = {}) => {
   });
 };
-const COMPONENT_NAME$_ = "vc-form";
+const COMPONENT_NAME$10 = "vc-form";
 const Form = vue.defineComponent({
-  name: COMPONENT_NAME$_,
+  name: COMPONENT_NAME$10,
   props: props$M,
   setup(props, { slots, expose }) {
     useForm(expose);
@@ -9201,9 +9216,9 @@ const useFormItem = (expose) => {
 /** @jsxImportSource vue */
-const COMPONENT_NAME$Z = 'vc-form-item';
+const COMPONENT_NAME$$ = 'vc-form-item';
 const FormItem = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$Z,
+  name: COMPONENT_NAME$$,
   props: props$L,
   setup(props, {
     slots,
@@ -9268,9 +9283,9 @@ const props$K = {
   }
 };
-const COMPONENT_NAME$Y = "vcm-form";
+const COMPONENT_NAME$_ = "vcm-form";
 const MForm = vue.defineComponent({
-  name: COMPONENT_NAME$Y,
+  name: COMPONENT_NAME$_,
   props: props$K,
   setup(props, { slots, expose }) {
     useForm(expose, {
@@ -9301,9 +9316,9 @@ const props$J = {
 /** @jsxImportSource vue */
-const COMPONENT_NAME$X = 'vcm-form-item';
+const COMPONENT_NAME$Z = 'vcm-form-item';
 const MFormItem = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$X,
+  name: COMPONENT_NAME$Z,
   props: props$J,
   setup(props, {
     slots,
@@ -9357,9 +9372,9 @@ const MFormItem = /* @__PURE__ */ vue.defineComponent({
   }
 });
-const COMPONENT_NAME$W = "vc-fragment";
+const COMPONENT_NAME$Y = "vc-fragment";
 const Fragment = vue.defineComponent({
-  name: COMPONENT_NAME$W,
+  name: COMPONENT_NAME$Y,
   setup(_, { slots }) {
     return () => vue.h(vue.Fragment, slots.default?.());
   }
@@ -9376,9 +9391,9 @@ const props$I = {
 /** @jsxImportSource vue */
-const COMPONENT_NAME$V = 'vc-html-to-image';
+const COMPONENT_NAME$X = 'vc-html-to-image';
 const HTMLToImage = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$V,
+  name: COMPONENT_NAME$X,
   props: props$I,
   setup(props, {
     slots
@@ -9454,7 +9469,7 @@ const IMGStore$1 = new IMGStore();
 /** @jsxImportSource vue */
-const COMPONENT_NAME$U = 'vc-image';
+const COMPONENT_NAME$W = 'vc-image';
 let isSupportObjectFit = false;
 window.addEventListener('DOMContentLoaded', () => {
   isSupportObjectFit = !vcShared.IS_SERVER && document.documentElement.style.objectFit !== undefined;
@@ -9467,7 +9482,7 @@ const ObjectFit = {
   SCALE_DOWN: 'scale-down'
 };
 const Image = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$U,
+  name: COMPONENT_NAME$W,
   inheritAttrs: false,
   props: props$H,
   setup(props, {
@@ -9672,9 +9687,9 @@ const props$G = {
 /** @jsxImportSource vue */
-const COMPONENT_NAME$T = 'vc-image-crop';
+const COMPONENT_NAME$V = 'vc-image-crop';
 const ImageCrop = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$T,
+  name: COMPONENT_NAME$V,
   props: props$G,
   setup(props, {
     slots
@@ -9698,9 +9713,9 @@ const props$F = {
 /** @jsxImportSource vue */
-const COMPONENT_NAME$S = 'vc-image-preview';
+const COMPONENT_NAME$U = 'vc-image-preview';
 const ImagePreview = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$S,
+  name: COMPONENT_NAME$U,
   props: props$F,
   setup(props, {
     slots
@@ -9724,9 +9739,9 @@ const props$E = {
 /** @jsxImportSource vue */
-const COMPONENT_NAME$R = 'vc-image-processing';
+const COMPONENT_NAME$T = 'vc-image-processing';
 const ImageProcessing = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$R,
+  name: COMPONENT_NAME$T,
   props: props$E,
   setup(props, {
     slots
@@ -9743,9 +9758,9 @@ const MImageProcessing = ImageProcessing;
 /** @jsxImportSource vue */
-const COMPONENT_NAME$Q = 'vcm-input';
+const COMPONENT_NAME$S = 'vcm-input';
 const MInput = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$Q,
+  name: COMPONENT_NAME$S,
   inheritAttrs: false,
   props: {
     ...props$$,
@@ -9834,9 +9849,9 @@ const MInput = /* @__PURE__ */ vue.defineComponent({
 /** @jsxImportSource vue */
-const COMPONENT_NAME$P = 'vcm-input-number';
+const COMPONENT_NAME$R = 'vcm-input-number';
 const MInputNumber = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$P,
+  name: COMPONENT_NAME$R,
   props: props$X,
   inheritAttrs: false,
   setup(props, {
@@ -9885,9 +9900,9 @@ const MInputNumber = /* @__PURE__ */ vue.defineComponent({
 /** @jsxImportSource vue */
-const COMPONENT_NAME$O = 'vcm-input-search';
+const COMPONENT_NAME$Q = 'vcm-input-search';
 const MInputSearch = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$O,
+  name: COMPONENT_NAME$Q,
   props: {
     ...props$W,
     cancelText: {
@@ -9964,9 +9979,9 @@ const props$D = {
   }
 };
-const COMPONENT_NAME$N = "vcm-list";
+const COMPONENT_NAME$P = "vcm-list";
 const MList = vue.defineComponent({
-  name: COMPONENT_NAME$N,
+  name: COMPONENT_NAME$P,
   props: props$D,
   setup(props, { slots }) {
     vue.provide("vc-list", { props });
@@ -10021,10 +10036,10 @@ const props$C = {
 /** @jsxImportSource vue */
-const COMPONENT_NAME$M = 'vcm-list-item';
+const COMPONENT_NAME$O = 'vcm-list-item';
 const HTTP_REGEX = /[a-zA-z]+:\/\/[^\s]*/;
 const MListItem = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$M,
+  name: COMPONENT_NAME$O,
   props: props$C,
   emits: ['click'],
   setup(props, {
@@ -10118,11 +10133,11 @@ const props$B = {
 /** @jsxImportSource vue */
-const COMPONENT_NAME$L = 'vc-marquee';
+const COMPONENT_NAME$N = 'vc-marquee';
 const ANIMATION = $.prefixStyle('animation').camel;
 const TRANSFORM_KEBAB = $.prefixStyle('transform').kebab;
 const Marquee = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$L,
+  name: COMPONENT_NAME$N,
   props: props$B,
   setup(props, {
     slots
@@ -10186,9 +10201,9 @@ const props$A = {
   }
 };
-const COMPONENT_NAME$K = "vc-resizer";
+const COMPONENT_NAME$M = "vc-resizer";
 const Resizer = vue.defineComponent({
-  name: COMPONENT_NAME$K,
+  name: COMPONENT_NAME$M,
   props: props$A,
   emit: ["resize", "change"],
   setup(props, { emit, slots, expose }) {
@@ -10331,10 +10346,10 @@ const props$z = {
 /** @jsxImportSource vue */
-const COMPONENT_NAME$J = 'vc-modal';
+const COMPONENT_NAME$L = 'vc-modal';
 let zIndexNumber = 1002;
 const ModalView = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$J,
+  name: COMPONENT_NAME$L,
   emits: ['update:modelValue', 'close', 'portal-fulfilled', 'visible-change', 'ok', 'cancel'],
   props: props$z,
   setup(props, {
@@ -10392,11 +10407,6 @@ const ModalView = /* @__PURE__ */ vue.defineComponent({
       };
     });
     vcHooks.useScrollbar(isActive);
-    vue.watch(() => props.modelValue, v => {
-      isActive.value = v;
-    }, {
-      immediate: true
-    });
     let startX = 0;
     let startY = 0;
     // Portal调用时，可作为初始值
@@ -10423,7 +10433,17 @@ const ModalView = /* @__PURE__ */ vue.defineComponent({
     }, 250, {
       leading: true
     });
-    const handleEnter = () => resetOrigin();
+    const isTransitionEnd = vue.ref(false);
+    const handleBeforeEnter = () => {
+      isTransitionEnd.value = false;
+    };
+    const handleEnter = () => {
+      resetOrigin();
+    };
+    const handleAfterEnter = () => {
+      isTransitionEnd.value = true;
+      resizer.value.refresh();
+    };
     /**
      * 动画执行后关闭, 关闭事件都会被执行
      * visible-change 由移除之后触发
@@ -10494,11 +10514,15 @@ const ModalView = /* @__PURE__ */ vue.defineComponent({
      * 这里由于scroller的resize时，render会重置height(实际上就是保留height, 无法移除)
      * 1. 改用nextTick, 抖动严重
      * 2. resizer.value.refresh, 不抖动
+     *
+     * container在最大值时，需要移除，宽度才会缩回去
      */
     const handleContentResize = () => {
-      const has = !!scroller.value.wrapper.style.getPropertyValue('height');
-      has && scroller.value.wrapper.style.removeProperty('height');
-      has && resizer.value.refresh();
+      const needRefreshScroller = !!scroller.value.wrapper.style.getPropertyValue('height');
+      const needRefreshContainer = !!container.value.style.getPropertyValue('height');
+      needRefreshContainer && container.value.style.removeProperty('height');
+      needRefreshScroller && scroller.value.wrapper.style.removeProperty('height');
+      needRefreshScroller && resizer.value.refresh();
     };
     const handleClick = e => {
       // isActive click先触发,后设置后
@@ -10563,6 +10587,11 @@ const ModalView = /* @__PURE__ */ vue.defineComponent({
       document.removeEventListener('mousemove', handleMouseMove);
       document.removeEventListener('mouseup', handleMouseUp);
     });
+    vue.watch(() => props.modelValue, v => {
+      isActive.value = v;
+    }, {
+      immediate: true
+    });
     expose({
       isActive,
       // for portal
@@ -10591,7 +10620,9 @@ const ModalView = /* @__PURE__ */ vue.defineComponent({
         "onClick": e => handleClose(e, false)
       }, [vue.createVNode(TransitionScale, {
         "mode": "part",
+        "onBeforeEnter": handleBeforeEnter,
         "onEnter": handleEnter,
+        "onAfterEnter": handleAfterEnter,
         "onAfterLeave": handleRemove
       }, {
         default: () => [vue.withDirectives(vue.createVNode("div", {
@@ -10627,8 +10658,8 @@ const ModalView = /* @__PURE__ */ vue.defineComponent({
             return vue.createVNode(Scroller, {
               "ref": scroller,
               "native": false,
-              "always": true,
-              "height": row.height,
+              "always": false,
+              "height": isTransitionEnd.value ? row.height : void 0,
               "contentClass": [{
                 'is-confirm': props.mode
               }, props.portalClass, 'vc-modal__content']
@@ -10744,9 +10775,9 @@ const props$y = {
 /** @jsxImportSource vue */
-const COMPONENT_NAME$I = 'vc-modal';
+const COMPONENT_NAME$K = 'vc-modal';
 const MModalView = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$I,
+  name: COMPONENT_NAME$K,
   emits: ['update:modelValue', 'portal-fulfilled', 'close', 'ok', 'cancel'],
   props: props$y,
   setup(props, {
@@ -10958,9 +10989,9 @@ const props$x = {
 /** @jsxImportSource vue */
-const COMPONENT_NAME$H = 'vc-notice';
+const COMPONENT_NAME$J = 'vc-notice';
 const NoticeView = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$H,
+  name: COMPONENT_NAME$J,
   props: props$x,
   emits: ['portal-fulfilled', 'close', 'before-close'],
   setup(props, {
@@ -11133,9 +11164,9 @@ const props$w = {
 /** @jsxImportSource vue */
-const COMPONENT_NAME$G = 'vc-option';
+const COMPONENT_NAME$I = 'vc-option';
 const Option$1 = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$G,
+  name: COMPONENT_NAME$I,
   props: props$w,
   setup(props, {
     slots
@@ -11202,12 +11233,12 @@ const getLabel = (data, v) => {
   const { label = "" } = data.find((i) => i.value == v) || {};
   return label;
 };
-const flattenData = (data, options = {}) => {
+const flattenData$1 = (data, options = {}) => {
   let result = [];
   data.forEach((item) => {
     if (item.children) {
       const { children, ...rest } = item;
-      const items = flattenData(children, options);
+      const items = flattenData$1(children, options);
       result = result.concat(
         options.parent ? [options.cascader ? item : rest].concat(items) : items
       );
@@ -11248,9 +11279,9 @@ const props$u = {
 /** @jsxImportSource vue */
-const COMPONENT_NAME$F = 'vc-tag';
+const COMPONENT_NAME$H = 'vc-tag';
 const Tag = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$F,
+  name: COMPONENT_NAME$H,
   props: props$u,
   emits: ['close', 'change'],
   setup(props, {
@@ -11319,9 +11350,9 @@ const props$t = {
 /** @jsxImportSource vue */
-const COMPONENT_NAME$E = 'vc-select-option';
+const COMPONENT_NAME$G = 'vc-select-option';
 const Option = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$E,
+  name: COMPONENT_NAME$G,
   props: props$t,
   setup(props, {
     slots
@@ -11394,9 +11425,9 @@ const props$s = {
 /** @jsxImportSource vue */
-const COMPONENT_NAME$D = 'vc-select-option-group';
+const COMPONENT_NAME$F = 'vc-select-option-group';
 const OptionGroup = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$D,
+  name: COMPONENT_NAME$F,
   props: props$s,
   setup(props, {
     slots
@@ -11494,9 +11525,9 @@ const props$r = {
 function _isSlot$1(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
-const COMPONENT_NAME$C = 'vc-select';
+const COMPONENT_NAME$E = 'vc-select';
 const Select = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$C,
+  name: COMPONENT_NAME$E,
   props: props$r,
   emits: ['ready', 'close', 'visible-change', 'clear', 'change', 'update:modelValue'],
   setup(props, {
@@ -11517,7 +11548,7 @@ const Select = /* @__PURE__ */ vue.defineComponent({
     const searchRegex = vue.ref(new RegExp(''));
     const currentValue = vue.ref([]);
     const source = vue.computed(() => {
-      return flattenData(props.data, {
+      return flattenData$1(props.data, {
         parent: true,
         cascader: true
       });
@@ -11740,9 +11771,9 @@ const Select = /* @__PURE__ */ vue.defineComponent({
 /** @jsxImportSource vue */
-const COMPONENT_NAME$B = 'vc-pagination';
+const COMPONENT_NAME$D = 'vc-pagination';
 const Pagination = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$B,
+  name: COMPONENT_NAME$D,
   props: props$v,
   emits: ['update:current', 'change', 'page-size-change'],
   setup(props, {
@@ -11940,9 +11971,9 @@ const props$q = {
 /** @jsxImportSource vue */
-const COMPONENT_NAME$A = 'vc-picker';
+const COMPONENT_NAME$C = 'vc-picker';
 const Picker = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$A,
+  name: COMPONENT_NAME$C,
   props: props$q,
   setup(props, {
     slots
@@ -11966,9 +11997,9 @@ const props$p = {
 /** @jsxImportSource vue */
-const COMPONENT_NAME$z = 'vc-popconfirm';
+const COMPONENT_NAME$B = 'vc-popconfirm';
 const Popconfirm = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$z,
+  name: COMPONENT_NAME$B,
   props: props$p,
   setup(props, {
     slots
@@ -11994,9 +12025,9 @@ const props$o = {
 /** @jsxImportSource vue */
-const COMPONENT_NAME$y = 'vc-popup';
+const COMPONENT_NAME$A = 'vc-popup';
 const Popup = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$y,
+  name: COMPONENT_NAME$A,
   props: props$o,
   setup(props, {
     slots
@@ -12023,9 +12054,9 @@ const props$n = {
 /** @jsxImportSource vue */
-const COMPONENT_NAME$x = 'vc-print';
+const COMPONENT_NAME$z = 'vc-print';
 const Print = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$x,
+  name: COMPONENT_NAME$z,
   props: props$n,
   setup(props, {
     expose,
@@ -12121,9 +12152,9 @@ const props$m = {
 /** @jsxImportSource vue */
-const COMPONENT_NAME$w = 'vc-progress-circle';
+const COMPONENT_NAME$y = 'vc-progress-circle';
 const Circle = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$w,
+  name: COMPONENT_NAME$y,
   props: props$m,
   setup(props, {
     slots
@@ -12173,16 +12204,16 @@ const Circle = /* @__PURE__ */ vue.defineComponent({
         "fill-opacity": "0"
       }, null)]), vue.createVNode("div", {
         "class": "vc-progress-circle__inner"
-      }, [slots.default ? slots.default() : vue.createVNode("span", null, [`${props.percent}%`])])])]);
+      }, [slots.default ? slots.default() : props.showText && vue.createVNode("span", null, [`${props.percent}%`])])])]);
     };
   }
 });
 /** @jsxImportSource vue */
-const COMPONENT_NAME$v = 'vc-progress-line';
+const COMPONENT_NAME$x = 'vc-progress-line';
 const Line = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$v,
+  name: COMPONENT_NAME$x,
   props: props$m,
   setup(props) {
     const colorStyle = vue.computed(() => {
@@ -12226,9 +12257,9 @@ const Line = /* @__PURE__ */ vue.defineComponent({
 function _isSlot(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
-const COMPONENT_NAME$u = 'vc-progress';
+const COMPONENT_NAME$w = 'vc-progress';
 const Progress = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$u,
+  name: COMPONENT_NAME$w,
   props: props$m,
   setup(props, {
     slots
@@ -12380,9 +12411,9 @@ const useRadio = () => {
 /** @jsxImportSource vue */
-const COMPONENT_NAME$t = 'vc-radio';
+const COMPONENT_NAME$v = 'vc-radio';
 const Radio = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$t,
+  name: COMPONENT_NAME$v,
   props: props$l,
   emits: ['update:modelValue', 'change'],
   setup(props, {
@@ -12493,9 +12524,9 @@ const useRadioGroup = () => {
 /** @jsxImportSource vue */
-const COMPONENT_NAME$s = 'vc-radio-group';
+const COMPONENT_NAME$u = 'vc-radio-group';
 const RadioGroup = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$s,
+  name: COMPONENT_NAME$u,
   props: props$k,
   emits: ['update:modelValue', 'change'],
   setup(props, {
@@ -12517,9 +12548,9 @@ const RadioGroup = /* @__PURE__ */ vue.defineComponent({
 /** @jsxImportSource vue */
-const COMPONENT_NAME$r = 'vcm-radio';
+const COMPONENT_NAME$t = 'vcm-radio';
 const MRadio = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$r,
+  name: COMPONENT_NAME$t,
   props: props$l,
   emits: ['update:modelValue', 'change'],
   setup(props, {
@@ -12560,9 +12591,9 @@ const MRadio = /* @__PURE__ */ vue.defineComponent({
 /** @jsxImportSource vue */
-const COMPONENT_NAME$q = 'vcm-radio-group';
+const COMPONENT_NAME$s = 'vcm-radio-group';
 const MRadioGroup = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$q,
+  name: COMPONENT_NAME$s,
   props: props$k,
   emits: ['update:modelValue', 'change'],
   setup(props, {
@@ -12591,9 +12622,9 @@ const props$j = {
 /** @jsxImportSource vue */
-const COMPONENT_NAME$p = 'vc-rate';
+const COMPONENT_NAME$r = 'vc-rate';
 const Rate = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$p,
+  name: COMPONENT_NAME$r,
   props: props$j,
   setup(props, {
     slots
@@ -12661,9 +12692,9 @@ const props$i = {
 /** @jsxImportSource vue */
-const COMPONENT_NAME$o = 'vc-recycle-list-scroll-state';
+const COMPONENT_NAME$q = 'vc-recycle-list-scroll-state';
 const ScrollState = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$o,
+  name: COMPONENT_NAME$q,
   setup(_, {
     slots
   }) {
@@ -12793,12 +12824,12 @@ const useDirectionKeys = () => {
 /** @jsxImportSource vue */
-const COMPONENT_NAME$n = 'vc-recycle-list-container';
+const COMPONENT_NAME$p = 'vc-recycle-list-container';
 // TODO: 抽离
 const transformKey = $__namespace.prefixStyle('transform').camel;
 const Container = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$n,
+  name: COMPONENT_NAME$p,
   props: props$h,
   emits: ['refresh'],
   setup(props, {
@@ -12896,9 +12927,9 @@ const Container = /* @__PURE__ */ vue.defineComponent({
 /** @jsxImportSource vue */
-const COMPONENT_NAME$m = 'vc-recycle-list-item';
+const COMPONENT_NAME$o = 'vc-recycle-list-item';
 const Item = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$m,
+  name: COMPONENT_NAME$o,
   props: {
     vertical: {
       type: Boolean,
@@ -12941,11 +12972,11 @@ const Item = /* @__PURE__ */ vue.defineComponent({
 /** @jsxImportSource vue */
-const COMPONENT_NAME$l = 'vc-recycle-list';
+const COMPONENT_NAME$n = 'vc-recycle-list';
 const RecycleList = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$l,
+  name: COMPONENT_NAME$n,
   props: props$i,
-  emits: ['scroll'],
+  emits: ['scroll', 'row-resize'],
   setup(props, {
     slots,
     expose,
@@ -13044,7 +13075,7 @@ const RecycleList = /* @__PURE__ */ vue.defineComponent({
     const isLoading = vue.computed(() => {
       return loadings.value.length;
     });
-    const scrollTo = options => {
+    const scrollTo = (options, force) => {
       let options$ = {
         x: 0,
         y: 0
@@ -13055,10 +13086,9 @@ const RecycleList = /* @__PURE__ */ vue.defineComponent({
         options$ = Object.assign(options$, options);
       }
       const el = wrapper.value;
-      const x = el.scrollLeft;
-      const y = el.scrollTop;
-      x !== options$.x && (el.scrollLeft = options$.x);
-      y !== options$.y && (el.scrollTop = options$.y);
+      (force || el.scrollLeft !== options$.x) && (el.scrollLeft = options$.x);
+      (force || el.scrollLeft !== options$.y) && (el.scrollTop = options$.y);
+      scroller.value.scrollTo(options);
     };
     const scrollToIndex = (index, offset = 0) => {
       const item = rebuildData.value[index];
@@ -13091,12 +13121,21 @@ const RecycleList = /* @__PURE__ */ vue.defineComponent({
       const current = props.inverted ? rebuildData.value[rebuildDataIndexMap.value[index]] : rebuildData.value[index];
       if (!current) return; // 受到`removeUnusedPlaceholders`影响，无效的会被回收
+      const oldSize = current.size;
       const dom = preloads.value[index] || curloads.value[props.inverted ? index : index - firstItemIndex.value];
       if (dom) {
         current.size = dom[K.offsetSize] || placeholderSize.value;
       } else if (current) {
         current.size = placeholderSize.value;
       }
+      // 这样的考虑欠佳，待优化
+      if (oldSize !== current.size) {
+        emit('row-resize', {
+          index: current.id,
+          size: current.size
+        });
+      }
     };
     const refreshItemPosition = () => {
       const sizes = Array.from({
@@ -13503,9 +13542,9 @@ const props$g = {
 /** @jsxImportSource vue */
-const COMPONENT_NAME$k = 'vc-slider';
+const COMPONENT_NAME$m = 'vc-slider';
 const Slider = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$k,
+  name: COMPONENT_NAME$m,
   props: props$g,
   setup(props, {
     slots
@@ -13529,9 +13568,9 @@ const props$f = {
 /** @jsxImportSource vue */
-const COMPONENT_NAME$j = 'vc-sort-list';
+const COMPONENT_NAME$l = 'vc-sort-list';
 const SortList = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$j,
+  name: COMPONENT_NAME$l,
   props: props$f,
   setup(props, {
     slots
@@ -13555,9 +13594,9 @@ const props$e = {
 /** @jsxImportSource vue */
-const COMPONENT_NAME$i = 'vc-steps';
+const COMPONENT_NAME$k = 'vc-steps';
 const Steps = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$i,
+  name: COMPONENT_NAME$k,
   props: props$e,
   setup(props, {
     slots
@@ -13670,9 +13709,9 @@ const useSwitch = (expose) => {
 /** @jsxImportSource vue */
-const COMPONENT_NAME$h = 'vc-switch';
+const COMPONENT_NAME$j = 'vc-switch';
 const Switch = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$h,
+  name: COMPONENT_NAME$j,
   props: props$d,
   // click -> onClick要被拦截，此处不能放置
   emits: ['update:modelValue', 'change', 'click'],
@@ -13709,9 +13748,9 @@ const Switch = /* @__PURE__ */ vue.defineComponent({
 /** @jsxImportSource vue */
-const COMPONENT_NAME$g = 'vcm-switch';
+const COMPONENT_NAME$i = 'vcm-switch';
 const MSwitch = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$g,
+  name: COMPONENT_NAME$i,
   props: props$d,
   // click -> onClick要被拦截，此处不能放置
   emits: ['update:modelValue', 'change', 'click'],
@@ -13746,31 +13785,2938 @@ const MSwitch = /* @__PURE__ */ vue.defineComponent({
   }
 });
-const props$c = {
-  tag: {
-    type: String,
-    default: "div"
+const parseHeight = (height) => {
+  if (typeof height === "number") {
+    return height;
+  }
+  if (height && typeof height === "string") {
+    if (/^\d+(?:px)?/.test(height)) {
+      return parseInt(height, 10);
+    }
+    throw new VcError("table", "Invalid Height");
+  }
+  return null;
+};
+const parseWidth = (width) => {
+  if (width !== void 0) {
+    width = parseInt(width, 10);
+    if (isNaN(width)) {
+      width = null;
+    }
+  }
+  return width;
+};
+const parseMinWidth = (minWidth) => {
+  if (typeof minWidth !== "undefined") {
+    minWidth = parseWidth(minWidth);
+    if (isNaN(minWidth)) {
+      minWidth = 80;
+    }
+  }
+  return minWidth;
+};
+const getRowIdentity = (row, rowKey) => {
+  if (row.__KEY__) return row.__KEY__;
+  if (!row) throw new VcError("table", "row is required when get row identity");
+  if (typeof rowKey === "string") {
+    if (!rowKey.includes(".")) {
+      return row[rowKey];
+    }
+    const key = rowKey.split(".");
+    let current = row;
+    for (let i = 0; i < key.length; i++) {
+      current = current[key[i]];
+    }
+    return current;
+  } else if (typeof rowKey === "function") {
+    return rowKey.call(null, row);
+  }
+};
+const walkTreeNode = (root, cb, opts = {}) => {
+  const {
+    childrenKey = "children",
+    lazyKey = "hasChildren",
+    level: baseLevel = 0
+  } = opts;
+  const isNil = (array) => !(Array.isArray(array) && array.length);
+  function _walker(parent, children, level) {
+    cb(parent, children, level);
+    children.forEach((item) => {
+      if (item[lazyKey]) {
+        cb(item, null, level + 1);
+        return;
+      }
+      const $children = item[childrenKey];
+      if (!isNil($children)) {
+        _walker(item, $children, level + 1);
+      }
+    });
+  }
+  root.forEach((item) => {
+    if (item[lazyKey]) {
+      cb(item, null, baseLevel);
+      return;
+    }
+    const children = item[childrenKey];
+    if (!isNil(children)) {
+      _walker(item, children, baseLevel);
+    }
+  });
+};
+const getKeysMap = (array = [], rowKey) => {
+  const arrayMap = {};
+  array.forEach((row, index) => {
+    arrayMap[getRowIdentity(row, rowKey)] = { row, index };
+  });
+  return arrayMap;
+};
+const getColumnById = (columns, columnId) => {
+  let column = null;
+  columns.forEach((item) => {
+    if (item.id === columnId) {
+      column = item;
+    }
+  });
+  return column;
+};
+const getColumnByCell = (table, cell) => {
+  const matches = (cell.className || "").match(/vc-table_[^\s]+/gm);
+  if (matches) {
+    return getColumnById(table, matches[0]);
+  }
+  return null;
+};
+const getCell = (event) => {
+  let cell = event.target;
+  while (cell && cell.tagName.toUpperCase() !== "HTML") {
+    if (cell.tagName.toUpperCase() === "TD") {
+      return cell;
+    }
+    cell = cell.parentNode;
+  }
+  return null;
+};
+const flattenData = (data, opts = {}) => {
+  const result = [];
+  data.forEach((item) => {
+    if (item.children) {
+      const { children, ...rest } = item;
+      opts.parent ? result.push(...[opts.cascader ? item : rest, ...flattenData(children, opts)]) : result.push(...flattenData(children));
+    } else {
+      result.push(item);
+    }
+  });
+  return result;
+};
+class BaseWatcher {
+  states = vue.reactive({
+    // 渲染的数据来源，是对 table 中的 data 过滤排序后的结果
+    _data: [],
+    data: [],
+    list: [],
+    // 是否包含固定列
+    isComplex: false,
+    // 列
+    _columns: [],
+    // 动态收集vc-table-column中的columnConfig
+    originColumns: [],
+    // leftFixedColumns, notFixedColumns, rightFixedColumns
+    columns: [],
+    // 包括 leftFixedLeafColumns，leafColumns，rightFixedLeafColumns
+    leftFixedColumns: [],
+    rightFixedColumns: [],
+    leafColumns: [],
+    leftFixedLeafColumns: [],
+    rightFixedLeafColumns: [],
+    leafColumnsLength: 0,
+    leftFixedLeafColumnsLength: 0,
+    rightFixedLeafColumnsLength: 0,
+    // 选择
+    isAllSelected: false,
+    selection: [],
+    reserveSelection: false,
+    selectable: null,
+    hoverRowIndex: null,
+    // Current
+    currentRow: null,
+    // Expand
+    defaultExpandAll: false,
+    expandRows: [],
+    // Tree
+    treeExpandRowValue: [],
+    treeData: {},
+    // item的状态，比如loading, loaded
+    treeLazy: false,
+    treelazyNodeMap: {},
+    // 源数据
+    treeLazyData: [],
+    // 源数据展开
+    treeLazyColumnIdentifier: "hasChildren",
+    treeChildrenColumnName: "children"
+  });
+}
+class Expand {
+  store;
+  constructor(store) {
+    this.store = store;
+  }
+  update() {
+    const store = this.store;
+    const { rowKey, defaultExpandAll } = this.store.table.props;
+    const { data = [], expandRows } = store.states;
+    if (defaultExpandAll) {
+      store.states.expandRows = data.slice();
+    } else if (rowKey) {
+      const expandRowsMap = getKeysMap(expandRows, rowKey);
+      store.states.expandRows = data.reduce((prev, row) => {
+        const rowId = getRowIdentity(row, rowKey);
+        const rowInfo = expandRowsMap[rowId];
+        if (rowInfo) {
+          prev.push(row);
+        }
+        return prev;
+      }, []);
+    } else {
+      store.states.expandRows = [];
+    }
+  }
+  toggle(row, expanded) {
+    const store = this.store;
+    const { expandRows } = store.states;
+    const changed = store.toggleRowStatus(expandRows, row, expanded);
+    if (changed) {
+      store.table.emit("expand-change", row, expandRows.slice());
+      store.scheduleLayout();
+    }
+  }
+  reset(ids) {
+    const store = this.store;
+    store.checkRowKey();
+    const { rowKey } = store.table.props;
+    const { data } = store.states;
+    const keysMap = getKeysMap(data, rowKey);
+    store.states.expandRows = ids.reduce((prev, cur) => {
+      const info = keysMap[cur];
+      if (info) {
+        prev.push(info.row);
+      }
+      return prev;
+    }, []);
+  }
+  isExpanded(row) {
+    const { rowKey } = this.store.table.props;
+    const { expandRows = [] } = this.store.states;
+    if (rowKey) {
+      const expandMap = getKeysMap(expandRows, rowKey);
+      return !!expandMap[getRowIdentity(row, rowKey)];
+    }
+    return expandRows.indexOf(row) !== -1;
+  }
+}
+class Current {
+  store;
+  constructor(store) {
+    this.store = store;
+  }
+  reset(id) {
+    const store = this.store;
+    const { rowKey } = store.table.props;
+    store.checkRowKey();
+    const { data = [] } = store.states;
+    const currentRow = data.find((item) => getRowIdentity(item, rowKey) === id);
+    store.states.currentRow = currentRow || null;
+  }
+  update() {
+    const store = this.store;
+    const { rowKey } = store.table.props;
+    const { data = [], currentRow } = store.states;
+    const oldCurrentRow = currentRow;
+    if (oldCurrentRow && !data.includes(oldCurrentRow)) {
+      let newCurrentRow = null;
+      if (rowKey) {
+        newCurrentRow = data.find((item) => {
+          return getRowIdentity(item, rowKey) === getRowIdentity(oldCurrentRow, rowKey);
+        });
+      }
+      store.states.currentRow = newCurrentRow;
+      if (newCurrentRow !== oldCurrentRow) {
+        store.table.emit("current-change", null, oldCurrentRow);
+      }
+    }
+  }
+}
+let Tree$1 = class Tree {
+  store;
+  /**
+   * 解决问题嵌入型的数据，watch 无法是检测到变化
+   * TODO: 是否会造成性能问题？同base-watcher flattenData
+   * { id: { level, children } }
+   */
+  normalizedData = vue.computed(() => {
+    const { rowKey } = this.store.table.props;
+    if (!rowKey) return {};
+    return this.normalize(this.store.states.data || []);
+  });
+  /**
+   * 针对懒加载的情形，不处理嵌套数据
+   * { id: { children } }
+   */
+  normalizedLazyNode = vue.computed(() => {
+    const { rowKey } = this.store.table.props;
+    const { treelazyNodeMap, treeLazyColumnIdentifier, treeChildrenColumnName } = this.store.states;
+    const keys = Object.keys(treelazyNodeMap);
+    const res = {};
+    if (!keys.length) return res;
+    keys.forEach((key) => {
+      if (treelazyNodeMap[key].length) {
+        const item = { children: [] };
+        treelazyNodeMap[key].forEach((row) => {
+          const id = getRowIdentity(row, rowKey);
+          item.children.push(id);
+          const hasChildren = row[treeLazyColumnIdentifier] || row[treeChildrenColumnName] && row[treeChildrenColumnName].length === 0;
+          if (hasChildren && !res[id]) {
+            res[id] = { children: [] };
+          }
+        });
+        res[key] = item;
+      }
+    });
+    return res;
+  });
+  constructor(store) {
+    this.store = store;
+    vue.watch(
+      () => [this.normalizedData.value, this.normalizedLazyNode.value],
+      () => this.update()
+    );
+  }
+  normalize(data) {
+    const { rowKey } = this.store.table.props;
+    const { treeChildrenColumnName, treeLazyColumnIdentifier, treeLazy } = this.store.states;
+    const res = {};
+    walkTreeNode(
+      data,
+      (parent, children, level) => {
+        const parentId = getRowIdentity(parent, rowKey);
+        if (Array.isArray(children)) {
+          res[parentId] = {
+            children: children.map((row) => getRowIdentity(row, rowKey)),
+            level
+          };
+        } else if (treeLazy) {
+          res[parentId] = {
+            children: [],
+            lazy: true,
+            level
+          };
+        }
+      },
+      {
+        childrenKey: treeChildrenColumnName,
+        lazyKey: treeLazyColumnIdentifier
+      }
+    );
+    return res;
+  }
+  // 获取当前展开最大的level
+  getMaxLevel() {
+    const { rowKey } = this.store.table.props;
+    const { data, treeData } = this.store.states;
+    const levels = data.map((item) => {
+      const traverse = (source) => {
+        if (!source) return 0;
+        if (source.expanded && source.children.length > 0) {
+          return lodashEs.max([source.level, ...source.children.map((key) => traverse(treeData[key]))]);
+        } else {
+          return source.level;
+        }
+      };
+      const id = getRowIdentity(item, rowKey);
+      return traverse(treeData[id]);
+    });
+    return lodashEs.max(levels) || 0;
+  }
+  update() {
+    const nested = this.normalizedData.value;
+    const normalizedLazyNode = this.normalizedLazyNode.value;
+    const keys = Object.keys(nested);
+    const newTreeData = {};
+    if (keys.length) {
+      const { defaultExpandAll } = this.store.table.props;
+      const { treeData: oldTreeData, treeExpandRowValue, treeLazy } = this.store.states;
+      const rootLazyRowValue = [];
+      const getExpanded = (oldValue, key) => {
+        const included = defaultExpandAll || treeExpandRowValue && treeExpandRowValue.indexOf(key) !== -1;
+        return !!(oldValue && oldValue.expanded || included);
+      };
+      keys.forEach((key) => {
+        const oldValue = oldTreeData[key];
+        const newValue = { ...nested[key] };
+        newValue.expanded = getExpanded(oldValue, key);
+        if (newValue.lazy) {
+          const { loaded = false, loading = false } = oldValue || {};
+          newValue.loaded = !!loaded;
+          newValue.loading = !!loading;
+          rootLazyRowValue.push(key);
+        }
+        newTreeData[key] = newValue;
+      });
+      const lazyKeys = Object.keys(normalizedLazyNode);
+      if (treeLazy && lazyKeys.length && rootLazyRowValue.length) {
+        lazyKeys.forEach((key) => {
+          const oldValue = oldTreeData[key];
+          const lazyNodeChildren = normalizedLazyNode[key].children;
+          if (rootLazyRowValue.includes(key)) {
+            if (newTreeData[key].children.length !== 0) {
+              throw new VcError("table", "children需要为空数组");
+            }
+            newTreeData[key].children = lazyNodeChildren;
+          } else {
+            const { loaded = false, loading = false } = oldValue || {};
+            newTreeData[key] = vue.reactive({
+              lazy: true,
+              loaded: !!loaded,
+              loading: !!loading,
+              expanded: getExpanded(oldValue, key),
+              children: lazyNodeChildren,
+              level: ""
+            });
+          }
+        });
+      }
+    }
+    this.store.states.treeData = newTreeData;
+    this.store.updateTableScrollY();
+  }
+  expand(ids) {
+    this.store.states.treeExpandRowValue = ids;
+    this.update();
+  }
+  toggle(row, expanded) {
+    this.store.checkRowKey();
+    const { rowKey } = this.store.table.props;
+    const { treeData } = this.store.states;
+    const id = getRowIdentity(row, rowKey);
+    const data = id && treeData[id];
+    if (id && data && "expanded" in data) {
+      const oldExpanded = data.expanded;
+      expanded = typeof expanded === "undefined" ? !data.expanded : expanded;
+      this.store.states.treeData[id].expanded = expanded;
+      if (oldExpanded !== expanded) {
+        this.store.table.emit("expand-change", row, expanded, this.getMaxLevel());
+      }
+      this.store.updateTableScrollY();
+    }
+  }
+  loadOrToggle(row) {
+    this.store.checkRowKey();
+    const { rowKey } = this.store.table.props;
+    const { treeLazy, treeData } = this.store.states;
+    const id = getRowIdentity(row, rowKey);
+    const data = treeData[id];
+    if (treeLazy && data && "loaded" in data && !data.loaded) {
+      this.loadData(row, id, data);
+    } else {
+      this.toggle(row);
+    }
+  }
+  loadData(row, key, treeNode) {
+    this.store.checkRowKey();
+    const { table } = this.store;
+    const { rowKey } = table.props;
+    const { treelazyNodeMap, treeData, treeChildrenColumnName, treeLazyColumnIdentifier } = this.store.states;
+    if (table.props.loadExpand && !treeData[key].loaded) {
+      this.store.states.treeData[key].loading = true;
+      const promise = table.props.loadExpand(row, treeNode);
+      const fn = (data) => {
+        if (!Array.isArray(data)) {
+          throw new VcError("table", "data必须是数组");
+        }
+        this.store.states.treeData[key].loading = false;
+        this.store.states.treeData[key].loaded = true;
+        this.store.states.treeData[key].expanded = true;
+        walkTreeNode(
+          data,
+          (parent, _, level) => {
+            const id = getRowIdentity(parent, rowKey);
+            Object.defineProperty(parent, "__KEY__", {
+              value: `${level}__${id}`,
+              writable: false
+            });
+          },
+          {
+            childrenKey: treeChildrenColumnName,
+            lazyKey: treeLazyColumnIdentifier,
+            level: treeNode.level
+          }
+        );
+        if (data.length) {
+          this.store.states.treelazyNodeMap[key] = data;
+          if (table.props.expandSelectable) {
+            this.store.states.treeLazyData = Object.keys(treelazyNodeMap).reduce((pre, cur) => {
+              return pre.concat(treelazyNodeMap[cur]);
+            }, []);
+          }
+        }
+        if (this.store.isSelected(row)) {
+          data.forEach((i) => {
+            this.store.toggleRowSelection(i);
+          });
+        }
+        this.store.updateAllSelected();
+        vue.nextTick(() => {
+          table.emit("expand-change", row, true, this.getMaxLevel());
+        });
+      };
+      if (promise && promise.then) {
+        promise.then((data) => fn(data)).catch((e) => {
+          throw new VcError("table", e);
+        });
+      } else if (Array.isArray(promise)) {
+        fn(promise);
+      }
+    }
+  }
+};
+class Layout {
+  table;
+  store;
+  states = vue.reactive({
+    height: null,
+    scrollX: false,
+    scrollY: false,
+    bodyWidth: null,
+    leftFixedWidth: null,
+    rightFixedWidth: null,
+    tableHeight: null,
+    headerHeight: 44,
+    // Table Header Height
+    appendHeight: 0,
+    // Append Slot Height
+    footerHeight: 44,
+    // Table Footer Height
+    bodyHeight: null
+    // Table Height - Table Header Height
+  });
+  constructor(store) {
+    this.store = store;
+    this.table = store.table;
+    if (!this.table) {
+      throw new VcError("table", "Table Layout 必须包含table实例");
+    }
+    if (!this.store) {
+      throw new VcError("table", "Table Layout 必须包含store实例");
+    }
+    this.updateScroller = this.updateScroller.bind(this);
+    this.updateColumns = this.updateColumns.bind(this);
+    vue.onMounted(() => {
+      this.updateColumns();
+      this.updateScroller();
+    });
+    let __updated__;
+    vue.onUpdated(() => {
+      if (__updated__) return;
+      this.updateColumns();
+      this.updateScroller();
+      __updated__ = true;
+    });
+  }
+  updateScrollY() {
+    const { height, bodyHeight } = this.states;
+    if (height === null || bodyHeight === null) return;
+    const scroller = this.table.exposed.scroller.value;
+    if (this.table.vnode.el && scroller) {
+      const body = scroller.$el.querySelector(".vc-table__body");
+      this.states.scrollY = body.offsetHeight > bodyHeight;
+    }
+  }
+  setHeight(value, prop = "height") {
+    if (vcShared.IS_SERVER) return;
+    const el = this.table.vnode.el;
+    value = parseHeight(value);
+    this.states.height = value;
+    if (!el && (value || value === 0)) return vue.nextTick(() => this.setHeight(value, prop));
+    if (value) {
+      el.style[prop] = `${value}px`;
+      this.updateElsHeight();
+    }
+  }
+  setMaxHeight(value) {
+    this.setHeight(value, "max-height");
+  }
+  getFlattenColumns() {
+    const flattenColumns = [];
+    const columns = this.store.states.columns;
+    columns.forEach((column) => {
+      if (column.isColumnGroup) {
+        flattenColumns.push(...column.columns);
+      } else {
+        flattenColumns.push(column);
+      }
+    });
+    return flattenColumns;
+  }
+  updateElsHeight() {
+    if (!this.table.exposed.isReady.value) return vue.nextTick(() => this.updateElsHeight());
+    const table = this.table.exposed;
+    const headerWrapper = table.headerWrapper.value;
+    const appendWrapper = table.appendWrapper.value;
+    const footerWrapper = table.footerWrapper.value;
+    const { showHeader } = this.table.props;
+    this.states.appendHeight = appendWrapper ? appendWrapper.offsetHeight : 0;
+    if (showHeader && !headerWrapper) return;
+    const headerHeight = !showHeader ? 0 : headerWrapper.offsetHeight;
+    this.states.headerHeight = headerHeight;
+    if (showHeader && headerWrapper.offsetWidth > 0 && (this.store.states.columns || []).length > 0 && headerHeight < 2) {
+      return vue.nextTick(() => this.updateElsHeight());
+    }
+    const tableHeight = this.table.vnode.el.clientHeight;
+    this.states.tableHeight = tableHeight;
+    const footerHeight = footerWrapper ? footerWrapper.offsetHeight : 0;
+    this.states.footerHeight = footerHeight;
+    if (this.states.height !== null) {
+      this.states.bodyHeight = tableHeight - headerHeight - footerHeight + (footerWrapper ? 1 : 0);
+    }
+    this.updateScrollY();
+    this.updateScroller();
+  }
+  updateColumnsWidth() {
+    if (vcShared.IS_SERVER) return;
+    const bodyWidth = this.table.vnode.el.clientWidth;
+    let bodyMinWidth = 0;
+    const flattenColumns = this.getFlattenColumns();
+    const flexColumns = flattenColumns.filter((column) => typeof column.width !== "number");
+    const { fit } = this.table.props;
+    if (flexColumns.length > 0 && fit) {
+      flattenColumns.forEach((column) => {
+        bodyMinWidth += column.width || column.minWidth || 80;
+      });
+      if (bodyMinWidth <= bodyWidth) {
+        this.states.scrollX = false;
+        const totalFlexWidth = bodyWidth - bodyMinWidth;
+        if (flexColumns.length === 1) {
+          flexColumns[0].realWidth = (flexColumns[0].minWidth || 80) + totalFlexWidth;
+        } else {
+          const allColumnsWidth = flexColumns.reduce((prev, column) => prev + (column.minWidth || 80), 0);
+          const flexWidthPerPixel = totalFlexWidth / allColumnsWidth;
+          let noneFirstWidth = 0;
+          flexColumns.forEach((column, index) => {
+            if (index === 0) return;
+            const flexWidth = Math.floor((column.minWidth || 80) * flexWidthPerPixel);
+            noneFirstWidth += flexWidth;
+            column.realWidth = (column.minWidth || 80) + flexWidth;
+          });
+          flexColumns[0].realWidth = (flexColumns[0].minWidth || 80) + totalFlexWidth - noneFirstWidth;
+        }
+      } else {
+        this.states.scrollX = true;
+        flexColumns.forEach(function(column) {
+          column.realWidth = column.width || column.minWidth;
+        });
+      }
+      this.states.bodyWidth = Math.max(bodyMinWidth, bodyWidth);
+      this.table.exposed.resizeState.value.width = this.states.bodyWidth;
+    } else {
+      flattenColumns.forEach((column) => {
+        if (!column.width && !column.minWidth) {
+          column.realWidth = 80;
+        } else {
+          column.realWidth = column.width || column.minWidth;
+        }
+        bodyMinWidth += column.realWidth;
+      });
+      this.states.scrollX = bodyMinWidth > bodyWidth;
+      this.states.bodyWidth = bodyMinWidth;
+    }
+    const leftFixedColumns = this.store.states.leftFixedColumns;
+    if (leftFixedColumns.length > 0) {
+      let leftFixedWidth = 0;
+      leftFixedColumns.forEach(function(column) {
+        leftFixedWidth += column.realWidth || column.width;
+      });
+      this.states.leftFixedWidth = leftFixedWidth;
+    }
+    const rightFixedColumns = this.store.states.rightFixedColumns;
+    if (rightFixedColumns.length > 0) {
+      let rightFixedWidth = 0;
+      rightFixedColumns.forEach(function(column) {
+        rightFixedWidth += column.realWidth || column.width;
+      });
+      this.states.rightFixedWidth = rightFixedWidth;
+    }
+    this.updateColumns();
+  }
+  // v2.x中的 notifyObservers
+  updateColumns() {
+  }
+  updateScroller() {
+  }
+}
+class Store extends BaseWatcher {
+  table;
+  current;
+  expand;
+  tree;
+  layout;
+  flattenData = vue.computed(() => {
+    if (this.table.props.expandSelectable) {
+      return lodash.concat(
+        flattenData(this.states.data, { parent: true, cascader: true }),
+        this.states.treeLazyData
+      );
+    } else {
+      return this.states.data;
+    }
+  });
+  constructor(options) {
+    super();
+    if (!options.table) {
+      throw new VcError("table", "table必传");
+    }
+    this.table = options.table;
+    this.current = new Current(this);
+    this.expand = new Expand(this);
+    this.tree = new Tree$1(this);
+    this.layout = new Layout(this);
+    const { props } = options.table;
+    lodash.merge(this.states, {
+      treeLazy: props.lazy || false,
+      treeLazyColumnIdentifier: props.treeMap.hasChildren || "hasChildren",
+      treeChildrenColumnName: props.treeMap.children || "children"
+    });
+  }
+  setData(data) {
+    const dataInstanceChanged = this.states._data !== data;
+    this.states._data = data;
+    this.states.data = data;
+    this.states.list = data.reduce((pre, row, index) => {
+      pre.push({
+        rows: [
+          {
+            index,
+            data: row,
+            height: "",
+            heightMap: {
+              left: "",
+              main: "",
+              right: ""
+            }
+          }
+        ],
+        expand: false
+      });
+      return pre;
+    }, []);
+    this.current.update();
+    this.expand.update();
+    if (!this.states.reserveSelection) {
+      if (dataInstanceChanged) {
+        this.clearSelection();
+      } else {
+        this.cleanSelection();
+      }
+    } else {
+      this.checkRowKey();
+      this.updateSelectionByRowKey();
+    }
+    this.updateAllSelected();
+    this.updateTableScrollY();
+  }
+  rowSelectedChanged(row) {
+    this.toggleRowSelection(row);
+    this.updateAllSelected();
+  }
+  // TODO: 合并的多行管理
+  setHoverRow(index) {
+    this.states.hoverRowIndex = index;
+  }
+  setCurrentRow(row) {
+    const oldCurrentRow = this.states.currentRow;
+    this.states.currentRow = row;
+    if (oldCurrentRow !== row) {
+      this.table.emit("current-change", row, oldCurrentRow);
+    }
+  }
+  /**
+   * 检查 rowKey 是否存在
+   */
+  checkRowKey() {
+    const { rowKey } = this.table.props;
+  }
+  /**
+   * states
+   * 	-> _columns
+   * 	-> selectable
+   * 	-> reserveSelection
+   * @param column ~
+   * @param index ~
+   * @param parent ~
+   */
+  insertColumn(column, index, parent) {
+    let array = this.states._columns;
+    if (parent) {
+      array = parent.children;
+      if (!array) {
+        array = [];
+        parent.children = array;
+      }
+    }
+    if (typeof index !== "undefined") {
+      array.splice(index, 0, column);
+    } else {
+      array.push(column);
+    }
+    if (column.type === "selection") {
+      this.states.selectable = column.selectable;
+      this.states.reserveSelection = column.reserveSelection;
+    }
+    if (this.table.exposed.isReady.value) {
+      this.updateColumns();
+      this.scheduleLayout();
+    }
+  }
+  removeColumn(column, parent) {
+    let array = this.states._columns;
+    if (parent) {
+      array = parent.children || [];
+    }
+    if (array) {
+      array.splice(array.indexOf(column), 1);
+    }
+    if (this.table.exposed.isReady.value) {
+      this.updateColumns();
+      this.scheduleLayout();
+    }
+  }
+  /**
+   * 更新列
+   * leftFixedColumns: 左fixed
+   * rightFixedColumns: 右fixed
+   * originColumns: 中（包括左右）
+   * columns: 展开以上
+   * leafColumnsLength
+   * leftFixedLeafColumnsLength
+   * rightFixedLeafColumnsLength
+   * isComplex: 是否包含固定列
+   */
+  updateColumns() {
+    const { states } = this;
+    const _columns = states._columns || [];
+    states.leftFixedColumns = _columns.filter((column) => column.fixed === true || column.fixed === "left");
+    states.rightFixedColumns = _columns.filter((column) => column.fixed === "right");
+    if (states.leftFixedColumns.length > 0 && _columns[0] && _columns[0].type === "selection" && !_columns[0].fixed) {
+      _columns[0].fixed = true;
+      states.leftFixedColumns.unshift(_columns[0]);
+    }
+    const notFixedColumns = _columns.filter((column) => !column.fixed);
+    states.originColumns = lodash.concat(states.leftFixedColumns, notFixedColumns, states.rightFixedColumns);
+    const leafColumns = flattenData(notFixedColumns);
+    const leftFixedLeafColumns = flattenData(states.leftFixedColumns);
+    const rightFixedLeafColumns = flattenData(states.rightFixedColumns);
+    states.leafColumnsLength = leafColumns.length;
+    states.leftFixedLeafColumnsLength = leftFixedLeafColumns.length;
+    states.rightFixedLeafColumnsLength = rightFixedLeafColumns.length;
+    states.columns = lodash.concat(leftFixedLeafColumns, leafColumns, rightFixedLeafColumns);
+    states.isComplex = states.leftFixedColumns.length > 0 || states.rightFixedColumns.length > 0;
+  }
+  // 选择
+  isSelected(row) {
+    const { selection = [] } = this.states;
+    return selection.includes(row);
+  }
+  /**
+   * 清除选择
+   */
+  clearSelection() {
+    this.states.isAllSelected = false;
+    const oldSelection = this.states.selection;
+    if (this.states.selection.length) {
+      this.states.selection = [];
+    }
+    if (oldSelection.length > 0) {
+      this.table.emit("selection-change", []);
+    }
+  }
+  /**
+   * 清理选择
+   */
+  cleanSelection() {
+    const { rowKey } = this.table.props;
+    const { selection = [] } = this.states;
+    let deleted;
+    if (rowKey) {
+      deleted = [];
+      const selectedMap = getKeysMap(selection, rowKey);
+      const dataMap = getKeysMap(selection, rowKey);
+      for (const key in selectedMap) {
+        if (Utils.hasOwn(selectedMap, key) && !dataMap[key]) {
+          deleted.push(selectedMap[key].row);
+        }
+      }
+    } else {
+      deleted = selection.filter((item) => {
+        return !this.flattenData.value.includes(item);
+      });
+    }
+    deleted.forEach((deletedItem) => {
+      selection.splice(selection.indexOf(deletedItem), 1);
+    });
+    if (deleted.length) {
+      const newSelection = selection.filter((item) => !deleted.includes(item));
+      this.states.selection = newSelection;
+      this.table.emit("selection-change", newSelection.slice());
+    }
+  }
+  /**
+   * 存在副作用
+   * 对statusArr做添加和删除的操作
+   * 如 this.states.selection
+   * @param statusArr ~
+   * @param row ~
+   * @param newVal ~
+   * @returns ~
+   */
+  toggleRowStatus(statusArr, row, newVal) {
+    let changed = false;
+    const index = statusArr.indexOf(row);
+    const included = index !== -1;
+    const addRow = () => {
+      statusArr.push(row);
+      changed = true;
+    };
+    const removeRow = () => {
+      statusArr.splice(index, 1);
+      changed = true;
+    };
+    if (typeof newVal === "boolean") {
+      if (newVal && !included) {
+        addRow();
+      } else if (!newVal && included) {
+        removeRow();
+      }
+    } else {
+      included ? removeRow() : addRow();
+    }
+    return changed;
+  }
+  toggleRowSelection(row, selected, emitChange = true) {
+    const { selection } = this.states;
+    const changed = this.toggleRowStatus(selection, row, selected);
+    if (changed) {
+      const newSelection = (this.states.selection || []).slice();
+      if (emitChange) {
+        this.table.emit("select", newSelection, row);
+      }
+      this.table.emit("selection-change", newSelection);
+    }
+  }
+  toggleAllSelection = lodash.debounce(() => {
+    const { indeterminate } = this.table.props;
+    const { selection, isAllSelected, selectable } = this.states;
+    const value = indeterminate ? !isAllSelected : !(isAllSelected || selection.length);
+    this.states.isAllSelected = value;
+    let selectionChanged = false;
+    this.flattenData.value.forEach((row, index) => {
+      if (selectable) {
+        if (selectable.call(null, row, index) && this.toggleRowStatus(selection, row, value)) {
+          selectionChanged = true;
+        }
+      } else if (this.toggleRowStatus(selection, row, value)) {
+        selectionChanged = true;
+      }
+    });
+    if (selectionChanged) {
+      this.table.emit("selection-change", selection ? selection.slice() : []);
+    }
+    this.table.emit("select-all", selection);
+  }, 10);
+  // 展开行与 TreeTable 都要使用
+  toggleRowExpansionAdapter(row, expanded) {
+    const { columns } = this.states;
+    const hasExpandColumn = columns.some(({ type }) => type === "expand");
+    if (hasExpandColumn) {
+      this.expand.toggle(row, expanded);
+    } else {
+      this.tree.toggle(row, expanded);
+    }
+  }
+  // 适配层，expand-primary-keys 在 Expand 与 TreeTable 中都有使用
+  // 这里会触发额外的计算，但为了兼容性，暂时这么做
+  setExpandRowValueAdapter(val) {
+    this.expand.reset(val);
+    this.tree.expand(val);
+  }
+  updateSelectionByRowKey() {
+    const { rowKey } = this.table.props;
+    const { selection } = this.states;
+    const selectedMap = getKeysMap(selection, rowKey);
+    this.states.selection = this.flattenData.value.reduce((prev, row) => {
+      const rowId = getRowIdentity(row, rowKey);
+      const rowInfo = selectedMap[rowId];
+      if (rowInfo) {
+        prev.push(row);
+      }
+      return prev;
+    }, []);
+  }
+  updateAllSelected() {
+    const { selectable, data = [] } = this.states;
+    if (data.length === 0) {
+      this.states.isAllSelected = false;
+      return;
+    }
+    let isAllSelected = true;
+    let selectedCount = 0;
+    const temp = this.flattenData.value;
+    for (let i = 0, j = temp.length; i < j; i++) {
+      const row = temp[i];
+      const isRowSelectable = selectable && selectable.call(null, row, i);
+      if (!this.isSelected(row)) {
+        if (!selectable || isRowSelectable) {
+          isAllSelected = false;
+          break;
+        }
+      } else {
+        selectedCount++;
+      }
+    }
+    if (selectedCount === 0) isAllSelected = false;
+    this.states.isAllSelected = isAllSelected;
+  }
+  updateTableScrollY() {
+    vue.nextTick(() => this.table.exposed.updateScrollY());
+  }
+  // 更新 DOM
+  scheduleLayout(needUpdateColumns) {
+    if (needUpdateColumns) {
+      this.updateColumns();
+    }
+    this.table.exposed.debouncedUpdateLayout();
+  }
+}
+const useStates = (mapper, $store) => {
+  const instance = vue.getCurrentInstance();
+  const store = $store || instance.proxy?.store;
+  const states = vue.reactive({});
+  Object.keys(mapper).forEach((key) => {
+    const value = mapper[key];
+    if (typeof value === "string") {
+      states[key] = vue.computed(() => {
+        return store.states[value];
+      });
+    } else if (typeof value === "function") {
+      states[key] = vue.computed(() => {
+        return value(store.states);
+      });
+    } else {
+      console.error("invalid value type");
+    }
+  });
+  return states;
+};
+/** @jsxImportSource vue */
+const COMPONENT_NAME$h = 'vc-table-normal-list';
+const NormalList = /* @__PURE__ */ vue.defineComponent({
+  name: COMPONENT_NAME$h,
+  props: {
+    data: Array,
+    default: () => []
+  },
+  emits: ['row-resize'],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const handleResize = (size, index) => {
+      emit('row-resize', {
+        index,
+        size
+      });
+    };
+    return () => {
+      return props.data.map((row, index) => {
+        return vue.createVNode(Item, {
+          "vertical": false,
+          "onChange": e => handleResize(e, index)
+        }, {
+          default: () => [slots.default?.({
+            row,
+            index
+          })]
+        });
+      });
+    };
+  }
+});
+const TableBody = /* @__PURE__ */ vue.defineComponent({
+  name: 'vc-table-body',
+  props: {
+    store: Object,
+    fixed: String,
+    heightStyle: [Object, Array, String]
+  },
+  emits: ['scroll'],
+  setup(props, {
+    emit,
+    expose
+  }) {
+    const instance = vue.getCurrentInstance();
+    const table = vcHooks.getInstance('table', 'tableId');
+    const states = useStates({
+      data: 'data',
+      list: 'list',
+      columns: 'columns',
+      leftFixedLeafCount: 'leftFixedLeafColumnsLength',
+      rightFixedLeafCount: 'rightFixedLeafColumnsLength',
+      columnsCount: states$ => states$.columns.length,
+      leftFixedCount: states$ => states$.leftFixedColumns.length,
+      rightFixedCount: states$ => states$.rightFixedColumns.length,
+      hasExpandColumn: states$ => states$.columns.some(({
+        type
+      }) => type === 'expand'),
+      firstDefaultColumnIndex: states$ => states$.columns.findIndex(({
+        type
+      }) => type === 'default')
+    });
+    vue.watch(() => props.store.states.hoverRowIndex, (v, oldV) => {
+      if (!props.store.states.isComplex || vcShared.IS_SERVER) return;
+      Utils.raf(() => {
+        const rows = instance.vnode.el.querySelectorAll('.vc-table__row');
+        const oldRow = rows[oldV];
+        const newRow = rows[v];
+        oldRow && $.removeClass(oldRow, 'hover-row');
+        newRow && $.addClass(newRow, 'hover-row');
+      });
+    });
+    const getKeyOfRow = (row, index) => {
+      const {
+        rowKey
+      } = table.props;
+      if (rowKey) {
+        return getRowIdentity(row, rowKey);
+      }
+      return index;
+    };
+    const isColumnHidden = index => {
+      if (props.fixed === 'left') {
+        return index >= states.leftFixedLeafCount;
+      } else if (props.fixed === 'right') {
+        return index < states.columnsCount - states.rightFixedLeafCount;
+      } else {
+        return index < states.leftFixedLeafCount || index >= states.columnsCount - states.rightFixedLeafCount;
+      }
+    };
+    const columnsHidden = vue.computed(() => {
+      return states.columns.map((_, index) => isColumnHidden(index));
+    });
+    const getRowStyle = (row, rowIndex) => {
+      const {
+        rowStyle
+      } = table.props;
+      if (typeof rowStyle === 'function') {
+        return rowStyle.call(null, {
+          row,
+          rowIndex
+        });
+      }
+      return rowStyle || null;
+    };
+    const getRowClass = (row, rowIndex) => {
+      const classes = ['vc-table__row'];
+      if (table.props.highlight && row === props.store.states.currentRow) {
+        classes.push('current-row');
+      }
+      if (table.props.stripe && rowIndex % 2 === 1) {
+        classes.push('vc-table__row--striped');
+      }
+      const rowClass = table.props.rowClass;
+      if (typeof rowClass === 'string') {
+        classes.push(rowClass);
+      } else if (typeof rowClass === 'function') {
+        classes.push(rowClass.call(null, {
+          row,
+          rowIndex
+        }));
+      }
+      if (props.store.states.expandRows.indexOf(row) > -1) {
+        classes.push('expanded');
+      }
+      return classes;
+    };
+    const getCellStyle = (rowIndex, columnIndex, row, column) => {
+      const {
+        cellStyle
+      } = table.props;
+      if (typeof cellStyle === 'function') {
+        return cellStyle.call(null, {
+          rowIndex,
+          columnIndex,
+          row,
+          column
+        });
+      }
+      return cellStyle;
+    };
+    const getCellClass = (rowIndex, columnIndex, row, column) => {
+      const classes = [column.align, column.className];
+      if (isColumnHidden(columnIndex)) {
+        classes.push('is-hidden');
+      }
+      const cellClass = table.props.cellClass;
+      if (typeof cellClass === 'string') {
+        classes.push(cellClass);
+      } else if (typeof cellClass === 'function') {
+        classes.push(cellClass.call(null, {
+          rowIndex,
+          columnIndex,
+          row,
+          column
+        }));
+      }
+      return classes.join(' ');
+    };
+    const handleCellMouseEnter = (e, row) => {
+      const cell = getCell(e);
+      if (cell) {
+        const column = getColumnByCell(states.columns, cell);
+        const hoverState = {
+          cell,
+          column,
+          row
+        };
+        table.exposed.hoverState.value = hoverState;
+        table.emit('cell-mouse-enter', hoverState.row, hoverState.column, hoverState.cell, e);
+      }
+      // 判断是否text-overflow, 如果是就显示tooltip
+      const cellChild = e.target.querySelector('.vc-table__cell');
+      if (!($.hasClass(cellChild, 'vc-popover') && cellChild.childNodes.length)) {
+        return;
+      }
+      // 使用范围宽度而不是滚动宽度来确定文本是否溢出，以解决潜在的FireFox bug
+      // https://bugzilla.mozilla.org/show_bug.cgi?id=1074543#c3
+      const range = document.createRange();
+      range.setStart(cellChild, 0);
+      range.setEnd(cellChild, cellChild.childNodes.length);
+      const rangeWidth = range.getBoundingClientRect().width;
+      const padding = (parseInt(cellChild.style.paddingLeft, 10) || 0) + (parseInt(cellChild.style.paddingRight, 10) || 0);
+      if (rangeWidth + padding > cellChild.offsetWidth || cellChild.scrollWidth > cellChild.offsetWidth) {
+        Popover.open({
+          el: document.body,
+          name: 'vc-table-popover',
+          // 确保不重复创建
+          triggerEl: cell,
+          hover: true,
+          theme: 'dark',
+          placement: 'top',
+          content: cell.innerText || cell.textContent,
+          alone: true
+        });
+      }
+    };
+    const handleCellMouseLeave = e => {
+      const cell = getCell(e);
+      if (!cell) return;
+      const oldHoverState = table.exposed.hoverState.value || {};
+      table.emit('cell-mouse-leave', oldHoverState.row, oldHoverState.column, oldHoverState.cell, event);
+    };
+    const handleMouseEnter = lodashEs.debounce(index => {
+      props.store.setHoverRow(index);
+    }, 30);
+    const handleMouseLeave = lodashEs.debounce(() => {
+      props.store.setHoverRow(null);
+    }, 30);
+    const handleEvent = (e, row, name) => {
+      const cell = getCell(e);
+      let column;
+      if (cell) {
+        column = getColumnByCell(states.columns, cell);
+        if (column) {
+          table.emit(`cell-${name}`, row, column, cell, e);
+        }
+      }
+      table.emit(`row-${name}`, row, column, e);
+    };
+    const handleContextMenu = (e, row) => {
+      handleEvent(e, row, 'contextmenu');
+    };
+    const handleDoubleClick = (e, row) => {
+      handleEvent(e, row, 'dblclick');
+    };
+    const handleClick = (e, row) => {
+      props.store.setCurrentRow(row);
+      handleEvent(e, row, 'click');
+    };
+    const renderRow = (rowData, rowIndex) => {
+      const {
+        data: row
+      } = rowData;
+      const {
+        columns
+      } = states;
+      const key = getKeyOfRow(row, rowIndex);
+      return vue.createVNode("div", {
+        "key": key,
+        "class": [getRowClass(row, rowIndex), 'vc-table__tr'],
+        "style": getRowStyle(row, rowIndex),
+        "onDblclick": e => handleDoubleClick(e, row),
+        "onClick": e => handleClick(e, row),
+        "onContextmenu": e => handleContextMenu(e, row),
+        "onMouseenter": () => handleMouseEnter(rowIndex),
+        "onMouseleave": () => handleMouseLeave()
+      }, [columns.map((column, columnIndex) => {
+        const {
+          realWidth,
+          renderCell
+        } = column;
+        const sizeStyle = {
+          width: `${realWidth}px`,
+          height: `${rowData.height ? `${rowData.height}px` : 'auto'}`
+        };
+        if (columnsHidden.value[columnIndex]) {
+          return vue.createVNode("div", {
+            "style": [sizeStyle]
+          }, null);
+        }
+        return vue.createVNode("div", {
+          "style": [getCellStyle(rowIndex, columnIndex, row, column), sizeStyle],
+          "class": [getCellClass(rowIndex, columnIndex, row, column), 'vc-table__td'],
+          "onMouseenter": e => handleCellMouseEnter(e, row),
+          "onMouseleave": e => handleCellMouseLeave(e)
+        }, [renderCell({
+          row,
+          column,
+          rowIndex,
+          columnIndex,
+          store: props.store
+        })]);
+      })]);
+    };
+    const renderMergeRow = (mergeData, mergeIndex) => {
+      const {
+        rows
+      } = mergeData;
+      return vue.createVNode("div", {
+        "class": "vc-table__merge-row",
+        "key": mergeIndex
+      }, [rows.map(row => {
+        return renderRow(row, row.index);
+      })]);
+    };
+    const handleMergeRowResize = v => {
+      states.list[v.index].rows.forEach(row => {
+        row.heightMap[props.fixed || 'main'] = v.size;
+        const heights = [row.heightMap.main];
+        if (states.leftFixedCount) {
+          heights.push(row.heightMap.left);
+        }
+        if (states.rightFixedCount) {
+          heights.push(row.heightMap.right);
+        }
+        if (heights.every(i => !!i)) {
+          row.height = Math.max(row.heightMap.left, row.heightMap.main, row.heightMap.right) || '';
+        }
+      });
+    };
+    const wrapper = vue.ref();
+    expose({
+      wrapper,
+      getRootElement: () => instance.vnode.el
+    });
+    return () => {
+      const layout = table.exposed.layout;
+      return vue.createVNode("div", {
+        "class": "vc-table__body"
+      }, [table.props.height ? vue.createVNode(RecycleList, {
+        "ref": wrapper,
+        "data": states.list,
+        "disabled": true,
+        "class": "vc-table__tbody",
+        "scrollerOptions": {
+          barTo: `.${table.exposed.tableId}`,
+          native: false,
+          always: false,
+          showBar: !props.fixed,
+          stopPropagation: !props.fixed,
+          trackOffsetY: [layout.states.headerHeight, 0, -layout.states.headerHeight - layout.states.footerHeight + 2,
+          // 2为上下border的高度
+          0]
+        },
+        "pageSize": table.props.rows,
+        "onScroll": e => emit('scroll', e),
+        "onRowResize": handleMergeRowResize,
+        "style": props.heightStyle
+      }, {
+        default: ({
+          row,
+          index
+        }) => renderMergeRow(row, index)
+      }) : vue.createVNode(NormalList, {
+        "data": states.list,
+        "onRowResize": handleMergeRowResize
+      }, {
+        default: ({
+          row,
+          index
+        }) => renderMergeRow(row, index)
+      })]);
+    };
+  }
+});
+// import TableSort from './table-sort';
+// import TableFilter from './table-filter';
+const TableSort = 'div';
+const TableFilter = 'div';
+const getAllColumns = columns => {
+  const result = [];
+  columns.forEach(column => {
+    if (column.children) {
+      result.push(column);
+      result.push(...getAllColumns(column.children));
+    } else {
+      result.push(column);
+    }
+  });
+  return result;
+};
+const convertToRows = originColumns => {
+  let maxLevel = 1;
+  const traverse = (column, parent) => {
+    if (parent) {
+      column.level = parent.level + 1;
+      if (maxLevel < column.level) {
+        maxLevel = column.level;
+      }
+    }
+    if (column.children) {
+      let colSpan = 0;
+      column.children.forEach(subColumn => {
+        traverse(subColumn, column);
+        colSpan += subColumn.colSpan;
+      });
+      column.colSpan = colSpan;
+    } else {
+      column.colSpan = 1;
+    }
+  };
+  originColumns.forEach(column => {
+    column.level = 1;
+    traverse(column);
+  });
+  const rows = [];
+  for (let i = 0; i < maxLevel; i++) {
+    rows.push([]);
+  }
+  const allColumns = getAllColumns(originColumns);
+  allColumns.forEach(column => {
+    if (!column.children) {
+      column.rowSpan = maxLevel - column.level + 1;
+    } else {
+      column.rowSpan = 1;
+    }
+    rows[column.level - 1].push(column);
+  });
+  return rows;
+};
+const TableHeader = /* @__PURE__ */ vue.defineComponent({
+  name: 'vc-table-header',
+  props: {
+    fixed: [Boolean, String],
+    store: {
+      type: Object,
+      required: true
+    },
+    border: Boolean,
+    // 排序全部交给外部处理，内部不处理数据，只做交互
+    defaultSort: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(props) {
+    const table = vcHooks.getInstance('table', 'tableId');
+    const instance = vue.getCurrentInstance();
+    const draggingColumn = vue.ref(null);
+    const dragging = vue.ref(false);
+    const dragState = vue.ref({});
+    const states = useStates({
+      columns: 'columns',
+      isAllSelected: 'isAllSelected',
+      leftFixedLeafCount: 'leftFixedLeafColumnsLength',
+      rightFixedLeafCount: 'rightFixedLeafColumnsLength',
+      columnsCount: $states => $states.columns.length,
+      leftFixedCount: $states => $states.leftFixedColumns.length,
+      rightFixedCount: $states => $states.rightFixedColumns.length
+    });
+    const isCellHidden = (index, columns) => {
+      let start = 0;
+      for (let i = 0; i < index; i++) {
+        start += columns[i].colSpan;
+      }
+      const after = start + columns[index].colSpan - 1;
+      if (props.fixed === true || props.fixed === 'left') {
+        return after >= states.leftFixedLeafCount;
+      } else if (props.fixed === 'right') {
+        return start < states.columnsCount - states.rightFixedLeafCount;
+      } else {
+        return after < states.leftFixedLeafCount || start >= states.columnsCount - states.rightFixedLeafCount;
+      }
+    };
+    const getHeaderRowStyle = rowIndex => {
+      const {
+        headerRowStyle
+      } = table.props;
+      if (typeof headerRowStyle === 'function') {
+        return headerRowStyle.call(null, {
+          rowIndex
+        });
+      }
+      return headerRowStyle;
+    };
+    const getHeaderRowClass = rowIndex => {
+      const classes = [];
+      const {
+        headerRowClass
+      } = table.props;
+      if (typeof headerRowClass === 'string') {
+        classes.push(headerRowClass);
+      } else if (typeof headerRowClass === 'function') {
+        classes.push(headerRowClass.call(null, {
+          rowIndex
+        }));
+      }
+      return classes.join(' ');
+    };
+    const getHeaderCellStyle = (rowIndex, columnIndex, row, column) => {
+      const {
+        headerCellStyle
+      } = table.props;
+      if (typeof headerCellStyle === 'function') {
+        return headerCellStyle.call(null, {
+          rowIndex,
+          columnIndex,
+          row,
+          column
+        });
+      }
+      return headerCellStyle;
+    };
+    const getHeaderCellClass = (rowIndex, columnIndex, row, column) => {
+      const classes = [column.id, column.order, column.headerAlign, column.className, column.labelClass];
+      if (rowIndex === 0 && isCellHidden(columnIndex, row)) {
+        classes.push('is-hidden');
+      }
+      if (!column.children) {
+        classes.push('is-leaf');
+      }
+      const {
+        headerCellClass
+      } = table.props;
+      if (typeof headerCellClass === 'string') {
+        classes.push(headerCellClass);
+      } else if (typeof headerCellClass === 'function') {
+        classes.push(headerCellClass.call(null, {
+          rowIndex,
+          columnIndex,
+          row,
+          column
+        }));
+      }
+      return classes.join(' ');
+    };
+    const handleHeaderClick = (e, column) => {
+      table.emit('header-click', column, e);
+    };
+    const handleHeaderContextMenu = (e, column) => {
+      table.emit('header-contextmenu', column, e);
+    };
+    const handleMouseDown = (e, column) => {
+      if (vcShared.IS_SERVER) return;
+      if (column.children && column.children.length > 0) return;
+      /* istanbul ignore if */
+      if (draggingColumn.value && props.border) {
+        dragging.value = true;
+        table.exposed.resizeProxyVisible.value = true;
+        const tableEl = table.vnode.el;
+        const tableLeft = tableEl.getBoundingClientRect().left;
+        const columnEl = instance.vnode.el.querySelector(`.vc-table__th.${column.id}`);
+        const columnRect = columnEl.getBoundingClientRect();
+        const minLeft = columnRect.left - tableLeft + 30;
+        $.addClass(columnEl, 'noclick');
+        dragState.value = {
+          startMouseLeft: e.clientX,
+          startLeft: columnRect.right - tableLeft,
+          startColumnLeft: columnRect.left - tableLeft,
+          tableLeft
+        };
+        const resizeProxy = table.exposed.resizeProxy.value;
+        resizeProxy.style.left = dragState.value.startLeft + 'px';
+        document.onselectstart = () => false;
+        document.ondragstart = () => false;
+        const handleMouseMove = $e => {
+          const deltaLeft = $e.clientX - dragState.value.startMouseLeft;
+          const proxyLeft = dragState.value.startLeft + deltaLeft;
+          resizeProxy.style.left = Math.max(minLeft, proxyLeft) + 'px';
+        };
+        const handleMouseUp = () => {
+          if (dragging.value) {
+            const {
+              startColumnLeft,
+              startLeft
+            } = dragState.value;
+            const finalLeft = parseInt(resizeProxy.style.left, 10);
+            const columnWidth = finalLeft - startColumnLeft;
+            column.width = columnWidth;
+            column.realWidth = column.width;
+            table.$emit('header-dragend', column.width, startLeft - startColumnLeft, column, event);
+            props.store.scheduleLayout();
+            document.body.style.cursor = '';
+            dragging.value = false;
+            draggingColumn.value = null;
+            dragState.value = {};
+            table.resizeProxyVisible = false;
+          }
+          document.removeEventListener('mousemove', handleMouseMove);
+          document.removeEventListener('mouseup', handleMouseUp);
+          document.onselectstart = null;
+          document.ondragstart = null;
+          setTimeout(function () {
+            $.removeClass(columnEl, 'noclick');
+          }, 0);
+        };
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+      }
+    };
+    const handleMouseMove = (event, column) => {
+      if (column.children && column.children.length > 0) return;
+      let target = event.target;
+      while (target && !target.classList?.contains?.('vc-table__th')) {
+        target = target.parentNode;
+      }
+      if (!column || !column.resizable) return;
+      if (!dragging.value && props.border) {
+        const rect = target.getBoundingClientRect();
+        const bodyStyle = document.body.style;
+        if (rect.width > 12 && rect.right - event.pageX < 8) {
+          bodyStyle.cursor = 'col-resize';
+          if ($.hasClass(target, 'is-sortable')) {
+            target.style.cursor = 'col-resize';
+          }
+          draggingColumn.value = column;
+        } else if (!dragging.value) {
+          bodyStyle.cursor = '';
+          if ($.hasClass(target, 'is-sortable')) {
+            target.style.cursor = 'pointer';
+          }
+          draggingColumn.value = null;
+        }
+      }
+    };
+    const handleMouseOut = () => {
+      if (vcShared.IS_SERVER) return;
+      document.body.style.cursor = '';
+    };
+    const handleSort = (prop, order) => {
+      table.emit('sort-change', {
+        prop,
+        order
+      });
+    };
+    const handleFilter = (column, value) => {
+      const {
+        filter
+      } = column;
+      filter && filter(value);
+    };
+    const handleCellMouseEnter = (e, column) => {
+      Popover.open({
+        el: document.body,
+        name: 'vc-table-header-popover',
+        // 确保不重复创建
+        triggerEl: e.currentTarget,
+        hover: true,
+        theme: 'dark',
+        placement: 'top',
+        content: column.tooltip,
+        alone: true
+      });
+    };
+    return () => {
+      const {
+        originColumns
+      } = props.store.states;
+      const columnRows = convertToRows(originColumns);
+      // 是否拥有多级表头
+      const isGroup = columnRows.length > 1;
+      if (isGroup) table.exposed.isGroup.value = true;
+      return vue.createVNode("div", {
+        "class": "vc-table__header"
+      }, [vue.createVNode("div", {
+        "class": [{
+          'is-group': isGroup
+        }, 'vc-table__thead']
+      }, [
+      // renderList
+      columnRows.map((columns, rowIndex) => vue.createVNode("div", {
+        "style": getHeaderRowStyle(rowIndex),
+        "class": [getHeaderRowClass(rowIndex), 'vc-table__tr']
+      }, [columns.map((column, cellIndex) => vue.createVNode("div", {
+        "colspan": column.colSpan,
+        "rowspan": column.rowSpan,
+        "onMousemove": $event => handleMouseMove($event, column),
+        "onMouseout": handleMouseOut,
+        "onMousedown": $event => handleMouseDown($event, column),
+        "onClick": $event => handleHeaderClick($event, column),
+        "onContextmenu": $event => handleHeaderContextMenu($event, column),
+        "style": [getHeaderCellStyle(rowIndex, cellIndex, columns, column), {
+          width: `${column.realWidth}px`
+        }],
+        "class": [getHeaderCellClass(rowIndex, cellIndex, columns, column), 'vc-table__th'],
+        "key": column.id
+      }, [vue.createVNode("div", {
+        "class": ['vc-table__cell',
+        // {
+        // 	"highlight": column.filteredValue && column.filteredValue.length > 0
+        // },
+        column.labelClass]
+      }, [column.renderHeader ? column.renderHeader({
+        column,
+        $index: cellIndex,
+        // index: cellIndex,
+        store: props.store,
+        _self: instance
+      }) : column.label, column.tooltip ? vue.createVNode(Icon, {
+        "type": "o-info",
+        "onMouseenter": e => handleCellMouseEnter(e, column)
+      }, null) : null, column.sortable ? vue.createVNode(TableSort, {
+        "order": column.prop === props.defaultSort.prop ? props.defaultSort.order : '',
+        "onClick": order => handleSort(column.prop, order)
+      }, null) : null, column.filters ? vue.createVNode(TableFilter, {
+        "data": column.filters,
+        "value": column.filteredValue,
+        "icon": column.filterIcon,
+        "portalClass": column.filterPopupClass,
+        "multiple": column.filterMultiple,
+        "onChange": v => handleFilter(column, v)
+      }, null) : null])]))]))])]);
+    };
+  }
+});
+const TableFooter = /* @__PURE__ */ vue.defineComponent({
+  name: 'vc-table-footer',
+  props: {
+    fixed: [String, Boolean],
+    store: {
+      type: Object,
+      required: true
+    },
+    getSummary: Function,
+    sumText: String,
+    border: Boolean
+  },
+  setup(props) {
+    const states = useStates({
+      data: 'data',
+      columns: 'columns',
+      isAllSelected: 'isAllSelected',
+      leftFixedLeafCount: 'leftFixedLeafColumnsLength',
+      rightFixedLeafCount: 'rightFixedLeafColumnsLength',
+      columnsCount: $states => $states.columns.length,
+      leftFixedCount: $states => $states.leftFixedColumns.length,
+      rightFixedCount: $states => $states.rightFixedColumns.length
+    });
+    const isCellHidden = (index, columns, column) => {
+      if (props.fixed === true || props.fixed === 'left') {
+        return index >= states.leftFixedLeafCount;
+      } else if (props.fixed === 'right') {
+        let before = 0;
+        for (let i = 0; i < index; i++) {
+          before += columns[i].colSpan;
+        }
+        return before < states.columnsCount - states.rightFixedLeafCount;
+      } else if (!props.fixed && column.fixed) {
+        // hide cell when footer instance is not fixed and column is fixed
+        return true;
+      } else {
+        return index < states.leftFixedCount || index >= states.columnsCount - states.rightFixedCount;
+      }
+    };
+    const getRowClasses = (column, cellIndex) => {
+      const classes = [column.id, column.align, column.labelClass];
+      if (column.className) {
+        classes.push(column.className);
+      }
+      if (isCellHidden(cellIndex, states.columns, column)) {
+        classes.push('is-hidden');
+      }
+      if (!column.children) {
+        classes.push('is-leaf');
+      }
+      return classes;
+    };
+    return () => {
+      let sums = [];
+      if (props.getSummary) {
+        sums = props.getSummary({
+          columns: states.columns,
+          data: states.data
+        });
+      } else {
+        states.columns.forEach((column, index) => {
+          if (index === 0) {
+            sums[index] = props.sumText;
+            return;
+          }
+          const values = states.data.map(item => Number(item[column.prop]));
+          const precisions = [];
+          let notNumber = true;
+          values.forEach(value => {
+            if (!isNaN(value)) {
+              notNumber = false;
+              const decimal = ('' + value).split('.')[1];
+              precisions.push(decimal ? decimal.length : 0);
+            }
+          });
+          const precision = Math.max.apply(null, precisions);
+          if (!notNumber) {
+            sums[index] = values.reduce((prev, curr) => {
+              const value = Number(curr);
+              if (!isNaN(value)) {
+                return parseFloat((prev + curr).toFixed(Math.min(precision, 20)));
+              } else {
+                return prev;
+              }
+            }, 0);
+          } else {
+            sums[index] = '';
+          }
+        });
+      }
+      return vue.createVNode("div", {
+        "class": "vc-table__footer",
+        "cellspacing": "0",
+        "cellpadding": "0",
+        "border": "0"
+      }, [vue.createVNode("div", {
+        "class": "vc-table__tbody"
+      }, [vue.createVNode("div", {
+        "class": "vc-table__tr"
+      }, [states.columns.map((column, cellIndex) => vue.createVNode("div", {
+        "key": cellIndex,
+        "colspan": column.colSpan,
+        "rowspan": column.rowSpan,
+        "class": [getRowClasses(column, cellIndex), 'vc-table__td'],
+        "style": [{
+          width: `${column.realWidth}px`
+        }]
+      }, [vue.createVNode("div", {
+        "class": ['vc-table__cell', column.labelClass]
+      }, [sums[cellIndex]])]))])])]);
+    };
+  }
+});
+const props$c = {
+  data: {
+    type: Array,
+    default: () => []
+  },
+  width: [String, Number],
+  height: [String, Number],
+  maxHeight: [String, Number],
+  // 列的宽度是否自撑开
+  fit: {
+    type: Boolean,
+    default: true
+  },
+  // 是否为斑马纹 table
+  stripe: Boolean,
+  // 是否带有纵向边框
+  border: Boolean,
+  // 非常影响表格虚拟滚动的性能，按容器的高度手动优化该值
+  // 后续考虑移除，动态计算
+  rows: {
+    type: Number,
+    default: 10
+  },
+  rowKey: [String, Function],
+  // 是否显示表头
+  showHeader: {
+    type: Boolean,
+    default: true
+  },
+  showSummary: Boolean,
+  sumText: String,
+  getSummary: Function,
+  rowClass: [String, Function],
+  rowStyle: [Object, Function],
+  cellClass: [String, Function],
+  cellStyle: [Object, Function],
+  headerRowClass: [String, Function],
+  headerRowStyle: [Object, Function],
+  headerCellClass: [String, Function],
+  headerCellStyle: [Object, Function],
+  // 当前对应的currentRow是否可高亮
+  highlight: Boolean,
+  // TODO: 支持数组
+  currentRowValue: [String, Number],
+  emptyText: [String, Function],
+  expandRowValue: Array,
+  defaultExpandAll: Boolean,
+  /**
+   * 在多选表格中，当仅有部分行被选中时，点击表头的多选框时的行为。
+   * 若为 true，则选中所有行；若为 false，则取消选择所有行
+   */
+  indeterminate: {
+    type: Boolean,
+    default: true
+  },
+  lazy: Boolean,
+  // 展示树形数据时，树节点的缩进
+  indent: {
+    type: Number,
+    default: 16
+  },
+  treeMap: {
+    type: Object,
+    default: () => {
+      return {
+        hasChildren: "hasChildren",
+        children: "children"
+      };
+    }
+  },
+  // 树形表格子集是否需要显示选择按钮
+  expandSelectable: {
+    type: Boolean,
+    default: true
+  },
+  loadExpand: Function,
+  getSpan: Function,
+  placeholder: {
+    type: [String, Function],
+    default: "--"
+  },
+  /**
+   * 排序全部交给外部处理，内部不处理数据，只做交互
+   * 列与列之间互斥
+   */
+  defaultSort: {
+    type: Object,
+    default: () => ({})
+  }
+};
+/** @jsxImportSource vue */
+const COMPONENT_NAME$g = 'vc-table';
+const Table = /* @__PURE__ */ vue.defineComponent({
+  name: COMPONENT_NAME$g,
+  props: props$c,
+  emits: ['select', 'select-all', 'selection-change', 'cell-mouse-enter', 'cell-mouse-leave', 'cell-click', 'cell-dblclick', 'row-click', 'row-contextmenu', 'row-dblclick', 'header-click', 'header-contextmenu', 'current-change', 'header-dragend ', 'expand-change', 'sort-change'],
+  setup(props, {
+    slots,
+    expose
+  }) {
+    const instance = vue.getCurrentInstance();
+    const store = new Store({
+      table: instance
+    });
+    const {
+      layout
+    } = store;
+    // 由table-column控制
+    const renderExpanded = vue.ref(null);
+    const resizeProxyVisible = vue.ref(false);
+    const resizeState = vue.ref({
+      width: null,
+      height: null
+    });
+    // refs
+    const hiddenColumns = vue.ref(null);
+    const headerWrapper = vue.ref(null);
+    const tableHeader = vue.ref(null);
+    const scroller = vue.ref(null);
+    const body = vue.ref();
+    const emptyBlock = vue.ref(null);
+    const appendWrapper = vue.ref(null);
+    const footerWrapper = vue.ref(null);
+    const leftFixedWrapper = vue.ref(null);
+    const leftFixedHeaderWrapper = vue.ref(null);
+    const leftFixedTableHeader = vue.ref(null);
+    const leftFixedBodyWrapper = vue.ref(null);
+    const leftFixedBody = vue.ref(null);
+    const leftFixedFooterWrapper = vue.ref(null);
+    const rightFixedWrapper = vue.ref(null);
+    const rightFixedHeaderWrapper = vue.ref(null);
+    const rightFixedTableHeader = vue.ref(null);
+    const rightFixedBodyWrapper = vue.ref(null);
+    const rightFixedBody = vue.ref(null);
+    const rightFixedFooterWrapper = vue.ref(null);
+    const resizeProxy = vue.ref(null);
+    // 是否拥有多级表头, 由table-header控制
+    const isGroup = vue.ref(false);
+    const scrollPosition = vue.ref('left');
+    const hoverState = vue.ref(null);
+    const isReady = vue.ref(false);
+    const states = useStates({
+      columns: 'columns',
+      leftFixedColumns: 'leftFixedColumns',
+      rightFixedColumns: 'rightFixedColumns'
+    }, store);
+    const classes = vue.computed(() => {
+      return {
+        'vc-table--fit': props.fit,
+        'vc-table--striped': props.stripe,
+        'vc-table--border': props.border || isGroup.value,
+        'vc-table--group': isGroup.value,
+        'vc-table--fluid-height': props.maxHeight,
+        'vc-table--scrollable-x': layout.states.scrollX,
+        'vc-table--scrollable-y': layout.states.scrollY,
+        'vc-table--enable-row-hover': !store.states.isComplex,
+        'vc-table--enable-row-transition': (store.states.data || []).length !== 0 && (store.states.data || []).length < 100
+      };
+    });
+    const bodyXWrapper = vue.computed(() => {
+      return scroller.value?.wrapper;
+    });
+    const bodyYWrapper = vue.computed(() => {
+      return !props.height ? bodyXWrapper.value : body.value.getRootElement().querySelector('.vc-scroller__wrapper');
+    });
+    const shouldUpdateHeight = vue.computed(() => {
+      return props.height || props.maxHeight || states.leftFixedColumns.length > 0 || states.rightFixedColumns.length > 0;
+    });
+    const bodyWidthStyle = vue.computed(() => {
+      const {
+        bodyWidth: $bodyWidth
+      } = layout.states;
+      return {
+        width: $bodyWidth ? $bodyWidth + 'px' : ''
+      };
+    });
+    const bodyHeightStyle = vue.computed(() => {
+      const {
+        headerHeight,
+        bodyHeight: $bodyHeight,
+        footerHeight
+      } = layout.states;
+      if (props.height) {
+        return {
+          height: $bodyHeight ? $bodyHeight + 'px' : ''
+        };
+      } else if (props.maxHeight) {
+        const maxHeight = parseHeight(props.maxHeight);
+        if (maxHeight) {
+          return {
+            'max-height': maxHeight - (footerHeight || 0) - (props.showHeader ? headerHeight || 0 : 0) + 'px'
+          };
+        }
+      }
+      return {};
+    });
+    const fixedHeightStyle = vue.computed(() => {
+      if (props.maxHeight) {
+        if (props.showSummary) {
+          return {
+            bottom: 0
+          };
+        }
+        return {
+          bottom: layout.states.scrollX && props.data.length ? 0 : ''
+        };
+      } else {
+        if (props.showSummary) {
+          return {
+            height: layout.states.tableHeight ? layout.states.tableHeight + 'px' : ''
+          };
+        }
+        return {
+          height: layout.states.viewportHeight ? layout.states.viewportHeight + 'px' : ''
+        };
+      }
+    });
+    let isUnMount = false;
+    const updateScrollY = () => {
+      if (isUnMount) return;
+      layout.updateScrollY();
+      layout.updateColumnsWidth();
+    };
+    /**
+     * 对 Table 进行重新布局。
+     * 当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法
+     */
+    const refreshLayout = () => {
+      if (isUnMount) return;
+      layout.updateColumnsWidth();
+      if (shouldUpdateHeight.value) {
+        layout.updateElsHeight();
+      }
+      scroller.value?.refresh?.();
+    };
+    // 用于多选表格，切换所有行的选中状态
+    const toggleAllSelection = () => {
+      store.toggleAllSelection();
+    };
+    // 用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。
+    const setCurrentRow = row => {
+      store.setCurrentRow(row);
+    };
+    // 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
+    const toggleRowSelection = (row, selected, emitChange) => {
+      store.toggleRowSelection(row, selected, emitChange);
+      store.updateAllSelected();
+    };
+    // 用于可展开表格与树形表格，切换某一行的展开状态;如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开）
+    const toggleRowExpansion = (row, expanded) => {
+      store.toggleRowExpansionAdapter(row, expanded);
+    };
+    // 用于多选表格，清空用户的选择
+    const clearSelection = () => {
+      store.clearSelection();
+    };
+    // 同步滚动
+    const handleScollX = lodashEs.throttle(() => {
+      if (!bodyXWrapper.value) return;
+      const {
+        scrollLeft,
+        offsetWidth,
+        scrollWidth
+      } = bodyXWrapper.value;
+      if (headerWrapper.value) headerWrapper.value.scrollLeft = scrollLeft;
+      if (footerWrapper.value) footerWrapper.value.scrollLeft = scrollLeft;
+      const maxScrollLeftPosition = scrollWidth - offsetWidth - 1;
+      if (scrollLeft >= maxScrollLeftPosition) {
+        scrollPosition.value = 'right';
+      } else if (scrollLeft === 0) {
+        scrollPosition.value = 'left';
+      } else {
+        scrollPosition.value = 'middle';
+      }
+      if (!props.height) {
+        leftFixedBody.value.getRootElement().scrollTop = bodyXWrapper.value.scrollTop;
+        rightFixedBody.value.getRootElement().scrollTop = bodyXWrapper.value.scrollTop;
+      }
+    }, 20);
+    const handleScollY = e => {
+      const v = {
+        x: e.target.scrollLeft,
+        y: e.target.scrollTop
+      };
+      rightFixedBody.value?.wrapper.scrollTo(v, true);
+      leftFixedBody.value?.wrapper.scrollTo(v, true);
+    };
+    const handleResize = () => {
+      if (!isReady.value) return;
+      let shouldUpdateLayout = false;
+      const el = instance.vnode.el;
+      const {
+        width: oldWidth,
+        height: oldHeight
+      } = resizeState.value;
+      const width = el.offsetWidth;
+      if (oldWidth !== width) {
+        shouldUpdateLayout = true;
+      }
+      const height = el.offsetHeight;
+      if ((props.height || shouldUpdateHeight.value) && oldHeight !== height) {
+        shouldUpdateLayout = true;
+      }
+      if (shouldUpdateLayout) {
+        resizeState.value = {
+          width,
+          height
+        };
+        refreshLayout();
+      }
+    };
+    const handleMouseLeave = () => {
+      store.setHoverRow(null);
+      if (hoverState.value) hoverState.value = null;
+    };
+    const handleMousewheel = (deltaX, deltaY) => {
+      const {
+        scrollWidth: contentW,
+        clientWidth: wrapperW,
+        scrollLeft: scrollX
+      } = bodyXWrapper.value;
+      const {
+        scrollHeight: contentH,
+        clientHeight: wrapperH,
+        scrollTop: scrollY
+      } = bodyYWrapper.value;
+      if (Math.abs(deltaY) > Math.abs(deltaX) && contentH > wrapperH) {
+        // 虚拟滚动
+        if (props.height) {
+          body.value.wrapper?.scrollTo({
+            y: scrollY + deltaY
+          });
+        } else {
+          scroller.value.scrollTo({
+            y: scrollY + deltaY
+          });
+        }
+      } else if (deltaX && contentW > wrapperW) {
+        scroller.value.scrollTo({
+          x: scrollX + deltaX
+        });
+      }
+    };
+    let wheels = [];
+    const bindEvents = () => {
+      if (props.fit) {
+        helperResize.Resize.on(instance.vnode.el, handleResize);
+      }
+      vue.nextTick(() => {
+        wheels = [headerWrapper, footerWrapper, leftFixedWrapper, rightFixedWrapper].map(wrapper => {
+          if (!wrapper.value) return;
+          const wheel = new helperWheel.Wheel(wrapper.value, {
+            shouldWheelX: delta => {
+              const {
+                scrollWidth: contentW,
+                clientWidth: wrapperW,
+                scrollLeft: scrollX
+              } = bodyXWrapper.value;
+              if (wrapperW === contentW) {
+                return false;
+              }
+              delta = Math.round(delta);
+              if (delta === 0) {
+                return false;
+              }
+              return delta < 0 && scrollX > 0 || delta >= 0 && scrollX < contentW - wrapperW;
+            },
+            shouldWheelY: delta => {
+              const {
+                scrollHeight: contentH,
+                clientHeight: wrapperH,
+                scrollTop: scrollY
+              } = bodyYWrapper.value;
+              if (wrapperH === contentH) {
+                return false;
+              }
+              delta = Math.round(delta);
+              if (delta === 0) {
+                return false;
+              }
+              return delta < 0 && scrollY > 0 || delta >= 0 && scrollY < contentH - wrapperH;
+            }
+          });
+          wheel.on(handleMousewheel);
+          return wheel;
+        });
+      });
+    };
+    const unbindEvents = () => {
+      if (props.fit) {
+        helperResize.Resize.off(instance.vnode.el, handleResize);
+      }
+      wheels.forEach(wheel => wheel && wheel.off(handleMousewheel));
+    };
+    const debouncedUpdateLayout = lodashEs.debounce(() => refreshLayout(), 50);
+    vue.watch(() => props.height, v => {
+      layout.setHeight(v);
+    }, {
+      immediate: true
+    });
+    vue.watch(() => props.maxHeight, v => {
+      layout.setMaxHeight(v);
+    }, {
+      immediate: true
+    });
+    vue.watch(() => props.currentRowValue, v => {
+      if (!props.rowKey) return;
+      store.current.reset(v);
+    }, {
+      immediate: true
+    });
+    vue.watch(() => props.data, v => {
+      store.setData(v);
+      isReady.value && vue.nextTick(refreshLayout);
+    }, {
+      immediate: true
+    });
+    vue.watch(() => props.expandRowValue, v => {
+      if (v) {
+        store.setExpandRowValueAdapter(v);
+      }
+    }, {
+      immediate: true
+    });
+    // 直接修改className（不使用render函数）, 解决临界值设置修改className时的顿挫
+    vue.watch(() => scrollPosition.value, v => {
+      Utils.raf(() => {
+        const className = `is-scrolling-${layout.states.scrollX ? v : 'none'}`;
+        const el = bodyXWrapper.value;
+        el && el.classList.replace(el.classList.item(el.classList.length - 1), className);
+      });
+    }, {
+      immediate: true
+    });
+    vue.onMounted(() => {
+      bindEvents();
+      store.updateColumns();
+      refreshLayout();
+      resizeState.value = {
+        width: instance.vnode.el.offsetWidth,
+        height: instance.vnode.el.offsetHeight
+      };
+      isReady.value = true;
+    });
+    vue.onBeforeUnmount(() => {
+      isUnMount = true;
+      unbindEvents();
+    });
+    const tableId = Utils.getUid('table');
+    expose({
+      tableId,
+      store,
+      layout,
+      updateScrollY,
+      refreshLayout,
+      toggleAllSelection,
+      setCurrentRow,
+      toggleRowSelection,
+      toggleRowExpansion,
+      clearSelection,
+      scroller,
+      headerWrapper,
+      appendWrapper,
+      footerWrapper,
+      resizeState,
+      debouncedUpdateLayout,
+      isReady,
+      hoverState,
+      renderExpanded,
+      hiddenColumns
+    });
+    return () => {
+      return vue.createVNode("div", {
+        "class": [classes.value, tableId, 'vc-table'],
+        "onMouseleave": handleMouseLeave
+      }, [vue.createVNode("div", {
+        "ref": hiddenColumns,
+        "class": "vc-table__hidden"
+      }, [slots.default?.()]), props.showHeader && vue.createVNode("div", {
+        "ref": headerWrapper,
+        "class": "vc-table__header-wrapper"
+      }, [vue.createVNode(TableHeader, {
+        "ref": tableHeader,
+        "store": store,
+        "border": props.border,
+        "default-sort": props.defaultSort,
+        "style": bodyWidthStyle.value
+      }, null)]), states.columns.length > 0 && vue.createVNode(ScrollerWheel, {
+        "ref": scroller,
+        "class": ['vc-table__body-wrapper is-scrolling-none'],
+        "barTo": `.${tableId}`,
+        "native": false,
+        "always": false,
+        "track-offset-y": [layout.states.headerHeight, 0, -layout.states.headerHeight - layout.states.footerHeight, 0],
+        "style": [bodyHeightStyle.value],
+        "onScroll": handleScollX
+      }, {
+        default: () => [vue.createVNode(TableBody, {
+          "ref": body,
+          "store": store,
+          "style": [bodyWidthStyle.value],
+          "height-style": [bodyHeightStyle.value],
+          "onScroll": handleScollY
+        }, null), props.data.length === 0 && vue.createVNode("div", {
+          "ref": emptyBlock,
+          "style": bodyWidthStyle.value,
+          "class": "vc-table__empty-block"
+        }, [vue.createVNode("span", {
+          "class": "vc-table__empty-text"
+        }, [slots.empty ? slots.empty() : props.emptyText || '暂无数据'])]), slots.append && vue.createVNode("div", {
+          "ref": appendWrapper,
+          "class": "vc-table__append-wrapper"
+        }, [slots.append()])]
+      }), props.showSummary && vue.withDirectives(vue.createVNode("div", {
+        "ref": footerWrapper,
+        "class": "vc-table__footer-wrapper"
+      }, [vue.createVNode(TableFooter, {
+        "store": store,
+        "border": props.border,
+        "sum-text": props.sumText || '合计',
+        "get-summary": props.getSummary,
+        "style": bodyWidthStyle.value
+      }, null)]), [[vue.vShow, props.data && props.data.length > 0]]), states.leftFixedColumns.length > 0 && states.columns.length > 0 && vue.createVNode("div", {
+        "ref": leftFixedWrapper,
+        "style": [{
+          width: layout.states.leftFixedWidth ? layout.states.leftFixedWidth + 'px' : ''
+        }, fixedHeightStyle.value],
+        "class": "vc-table__fixed"
+      }, [props.showHeader && vue.createVNode("div", {
+        "ref": leftFixedHeaderWrapper,
+        "class": "vc-table__fixed-header-wrapper"
+      }, [vue.createVNode(TableHeader, {
+        "ref": leftFixedTableHeader,
+        "store": store,
+        "border": props.border,
+        "default-sort": props.defaultSort,
+        "style": bodyWidthStyle.value,
+        "fixed": "left"
+      }, null)]), vue.createVNode("div", {
+        "ref": leftFixedBodyWrapper,
+        "style": [{
+          top: layout.states.headerHeight + 'px'
+        }],
+        "class": "vc-table__fixed-body-wrapper"
+      }, [vue.createVNode(TableBody, {
+        "ref": leftFixedBody,
+        "store": store,
+        "style": [bodyWidthStyle.value, bodyHeightStyle.value],
+        "fixed": "left"
+      }, null), slots.append && vue.createVNode("div", {
+        "style": [{
+          height: layout.states.appendHeight + 'px'
+        }],
+        "class": "vc-table__append-gutter"
+      }, [slots.append()])]), props.showSummary && vue.withDirectives(vue.createVNode("div", {
+        "ref": leftFixedFooterWrapper,
+        "class": "vc-table__fixed-footer-wrapper"
+      }, [vue.createVNode(TableFooter, {
+        "store": store,
+        "border": props.border,
+        "sum-text": props.sumText || '合计',
+        "get-summary": props.getSummary,
+        "style": bodyWidthStyle.value,
+        "fixed": "left"
+      }, null)]), [[vue.vShow, props.data && props.data.length > 0]])]), states.rightFixedColumns.length > 0 && vue.createVNode("div", {
+        "ref": rightFixedWrapper,
+        "style": [{
+          width: layout.states.rightFixedWidth ? layout.states.rightFixedWidth + 'px' : ''
+        }, fixedHeightStyle.value],
+        "class": "vc-table__fixed-right"
+      }, [props.showHeader && vue.createVNode("div", {
+        "ref": rightFixedHeaderWrapper,
+        "class": "vc-table__fixed-header-wrapper"
+      }, [vue.createVNode(TableHeader, {
+        "ref": rightFixedTableHeader,
+        "store": store,
+        "border": props.border,
+        "default-sort": props.defaultSort,
+        "style": bodyWidthStyle.value,
+        "fixed": "right"
+      }, null)]), vue.createVNode("div", {
+        "ref": rightFixedBodyWrapper,
+        "style": [{
+          top: layout.states.headerHeight + 'px'
+        }],
+        "class": "vc-table__fixed-body-wrapper"
+      }, [vue.createVNode(TableBody, {
+        "ref": rightFixedBody,
+        "store": store,
+        "style": [bodyWidthStyle.value, bodyHeightStyle.value],
+        "fixed": "right"
+      }, null), slots.append && vue.createVNode("div", {
+        "style": [{
+          height: layout.states.appendHeight + 'px'
+        }],
+        "class": "vc-table__append-gutter"
+      }, [slots.append()])]), props.showSummary && vue.withDirectives(vue.createVNode("div", {
+        "ref": rightFixedFooterWrapper,
+        "class": "vc-table__fixed-footer-wrapper"
+      }, [vue.createVNode(TableFooter, {
+        "store": store,
+        "border": props.border,
+        "sum-text": props.sumText || '合计',
+        "get-summary": props.getSummary,
+        "style": bodyWidthStyle.value,
+        "fixed": "right"
+      }, null)]), [[vue.vShow, props.data && props.data.length > 0]])]), vue.withDirectives(vue.createVNode("div", {
+        "ref": resizeProxy,
+        "class": "vc-table__column-resize-proxy"
+      }, null), [[vue.vShow, resizeProxyVisible.value]])]);
+    };
+  }
+});
+const cellStarts = {
+  default: {
+    order: ''
+  },
+  selection: {
+    width: 48,
+    minWidth: 48,
+    realWidth: 48,
+    order: '',
+    className: 'vc-table-column--selection'
+  },
+  expand: {
+    width: 48,
+    minWidth: 48,
+    realWidth: 48,
+    order: ''
+  },
+  index: {
+    width: 48,
+    minWidth: 48,
+    realWidth: 48,
+    order: ''
   }
 };
-/** @jsxImportSource vue */
+// 这些选项不应该被覆盖
+const cellForced = {
+  selection: {
+    renderHeader({
+      store
+    }) {
+      return vue.createVNode(Checkbox, {
+        "modelValue": store.states.isAllSelected,
+        "disabled": store.states.data && store.states.data.length === 0,
+        "indeterminate": store.states.selection.length > 0 && !store.states.isAllSelected,
+        "onClick": e => {
+          e.stopPropagation();
+          store.toggleAllSelection();
+        }
+      }, null);
+    },
+    renderCell({
+      row,
+      column,
+      store,
+      rowIndex,
+      level
+    }) {
+      return vue.withDirectives(vue.createVNode(Checkbox, {
+        "modelValue": store.isSelected(row),
+        "disabled": column.selectable ? !column.selectable.call(null, row, rowIndex) : false,
+        "onChange": () => store.rowSelectedChanged(row),
+        "onClick": e => e.stopPropagation()
+      }, null), [[vue.vShow, store.table.props.expandSelectable || level === 0]]);
+    },
+    sortable: false,
+    resizable: false
+  },
+  index: {
+    renderHeader(h, {
+      column
+    }) {
+      return column.label || '#';
+    },
+    renderCell({
+      rowIndex,
+      column
+    }) {
+      let i = rowIndex + 1;
+      const index = column.index;
+      if (typeof index === 'number') {
+        i = rowIndex + index;
+      } else if (typeof index === 'function') {
+        i = index(rowIndex);
+      }
+      return vue.createVNode("div", null, [i]);
+    },
+    sortable: false
+  },
+  expand: {
+    renderHeader({
+      column
+    }) {
+      return column.label || '';
+    },
+    renderCell({
+      row,
+      store
+    }) {
+      const classes = ['vc-table__expand-icon'];
+      if (store.states.expandRows.includes(row)) {
+        classes.push('is-expand');
+      }
+      const handleClick = e => {
+        e.stopPropagation();
+        store.expand.toggle(row);
+      };
+      return vue.createVNode("div", {
+        "class": classes,
+        "onClick": handleClick
+      }, [vue.createVNode(Icon, {
+        "type": "triangle-up"
+      }, null)]);
+    },
+    sortable: false,
+    resizable: false,
+    className: 'vc-table__expand-column'
+  }
+};
-const COMPONENT_NAME$f = 'vc-table';
-const Table = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$f,
-  props: props$c,
+// Cell默认渲染value 或 formatter
+const defaultRenderCell = ({
+  row,
+  column = {},
+  rowIndex
+}) => {
+  const {
+    prop,
+    formatter
+  } = column;
+  let value;
+  if (prop) {
+    value = Utils.getPropByPath(row, prop).v;
+  }
+  if (formatter) {
+    return column.formatter({
+      row,
+      column,
+      value,
+      rowIndex
+    });
+  }
+  return value;
+};
+// Cell渲染前缀，如loading, expand
+const treeCellPrefix = ({
+  row,
+  treeNode,
+  store
+}) => {
+  if (!treeNode) return null;
+  const ele = [];
+  const handleClick = e => {
+    e.stopPropagation();
+    store.tree.loadOrToggle(row);
+  };
+  if (treeNode.indent) {
+    ele.push(vue.createVNode("span", {
+      "class": "vc-table__indent",
+      "style": {
+        'padding-left': treeNode.indent + 'px'
+      }
+    }, null));
+  }
+  if (typeof treeNode.expanded === 'boolean' && !treeNode.noLazyChildren) {
+    const expandClasses = {
+      'vc-table__expand-icon': true,
+      'is-expand': treeNode.expanded
+    };
+    ele.push(vue.createVNode("span", {
+      "class": expandClasses,
+      "onClick": handleClick
+    }, [treeNode.loading ? vue.createVNode(Spin, {
+      "size": 12
+    }, null) : vue.createVNode(Icon, {
+      "type": "triangle-up"
+    }, null)]));
+  } else {
+    ele.push(vue.createVNode("span", {
+      "class": "vc-table__placeholder"
+    }, null));
+  }
+  return ele;
+};
+const TableColumn = /* @__PURE__ */ vue.defineComponent({
+  name: 'vc-table-column',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    },
+    label: String,
+    customClass: String,
+    labelClass: String,
+    prop: String,
+    width: [Number, String],
+    minWidth: [Number, String],
+    renderHeader: Function,
+    resizable: {
+      type: Boolean,
+      default: true
+    },
+    columnKey: String,
+    align: String,
+    headerAlign: String,
+    showPopover: Boolean,
+    fixed: [Boolean, String],
+    formatter: Function,
+    selectable: Function,
+    reserveSelection: Boolean,
+    index: [Number, Function],
+    // 头部是否展示排序
+    sortable: Boolean,
+    // 数据过滤的选项
+    filters: Array,
+    // 是否支持多选
+    filterMultiple: {
+      type: Boolean,
+      default: true
+    },
+    filterIcon: String,
+    // 选中的数据过滤项
+    filteredValue: Array,
+    // 筛选弹层的样式
+    filterPopupClass: String,
+    // 筛选的方法
+    filter: Function,
+    tooltip: [String, Function]
+  },
   setup(props, {
-    slots
+    slots,
+    expose
   }) {
+    const instance = vue.getCurrentInstance();
+    const table = vcHooks.getInstance('table', 'tableId');
+    const parent = vcHooks.getInstance('table-column', 'columnId') || table;
+    const isSubColumn = table !== parent; // 用于多久表头
+    const columnId = vue.ref((parent.exposed.tableId || parent.exposed.columnId) + Utils.getUid('column'));
+    const realWidth = vue.computed(() => {
+      return parseWidth(props.width);
+    });
+    const realMinWidth = vue.computed(() => {
+      return parseMinWidth(props.minWidth);
+    });
+    const realAlign = vue.computed(() => {
+      return props.align ? 'is-' + props.align : null;
+    });
+    const realHeaderAlign = vue.computed(() => {
+      return props.headerAlign ? 'is-' + props.headerAlign : realAlign.value;
+    });
+    const columnConfig = vue.reactive({});
+    /**
+     * 获取当前值情况，this[key]
+     * @param args ~
+     * @returns ~
+     */
+    const getPropsData = (...args) => {
+      const result = args.reduce((prev, cur) => {
+        if (Array.isArray(cur)) {
+          cur.forEach(key => {
+            prev[key] = props[key];
+          });
+        }
+        return prev;
+      }, {});
+      return result;
+    };
+    /**
+     * compose 1
+     * 对于特定类型的 column，某些属性不允许设置
+     * 如 type: selection | index | expand
+     * @param column ~
+     * @returns ~
+     */
+    const setColumnForcedProps = column => {
+      const type = column.type;
+      const source = cellForced[type] || {};
+      Object.keys(source).forEach(prop => {
+        const value = source[prop];
+        if (value !== undefined) {
+          column[prop] = prop === 'customClass' ? `${column[prop]} ${value}` : value;
+        }
+      });
+      return column;
+    };
+    /**
+     * compose 2
+     * column
+     * 	 -> width
+     * 	 -> minWidth
+     * @param column ~
+     * @returns ~
+     */
+    const setColumnWidth = column => {
+      if (realWidth.value) {
+        column.width = realWidth.value;
+      }
+      if (realMinWidth.value) {
+        column.minWidth = realMinWidth.value;
+      }
+      if (!column.minWidth) {
+        column.minWidth = 80;
+      }
+      column.realWidth = column.width === undefined ? column.minWidth : column.width;
+      return column;
+    };
+    /**
+     * compose 3
+     * column
+     *   -> renderHeader: 渲染头部
+     *   -> renderCell: 渲染单元格
+     * owner
+     * 	 -> renderExpanded: 展开
+     * @param column ~
+     * @returns ~
+     */
+    const setColumnRenders = column => {
+      const specialTypes = Object.keys(cellForced);
+      // renderHeader 属性不推荐使用。
+      if (props.renderHeader) {
+        column.renderHeader = props.renderHeader;
+      } else if (specialTypes.indexOf(column.type) === -1) {
+        column.renderHeader = data => {
+          const renderHeader = slots.header;
+          return renderHeader ? renderHeader(data) : data?.column?.label;
+        };
+      }
+      let originRenderCell = column.renderCell;
+      // TODO: 这里的实现调整
+      if (column.type === 'expand') {
+        // 对于展开行，renderCell 不允许配置的。在上一步中已经设置过，这里需要简单封装一下。
+        column.renderCell = data => vue.createVNode("div", {
+          "class": "vc-table__cell"
+        }, [originRenderCell(data)]);
+        table.exposed.renderExpanded.value = data => {
+          return slots.default ? slots.default(data) : slots.default;
+        };
+      } else {
+        originRenderCell = originRenderCell || defaultRenderCell;
+        // 对 renderCell 进行包装
+        column.renderCell = data => {
+          let children = null;
+          if (slots.default) {
+            children = slots?.default?.(data);
+          } else {
+            children = originRenderCell(data);
+          }
+          let prefix = treeCellPrefix(data);
+          const $props = {
+            class: 'vc-table__cell',
+            style: {}
+          };
+          // 存在树形数组，且当前行无箭头图标且处于当前展开列，表格对齐
+          if (!lodashEs.isEmpty(table.exposed.store.states.treeData) && !prefix && data.isExpandColumn) {
+            prefix = vue.createVNode("span", {
+              "class": "vc-table-un-expand__indent"
+            }, null);
+          }
+          if (data.column.showPopover) {
+            $props.class += ' vc-popover';
+            $props.style = {
+              width: (data.column.realWidth || data.column.width) - 1 + 'px'
+            };
+          }
+          const {
+            placeholder
+          } = table.props;
+          const contentPlaceholder = typeof placeholder === 'function' ? placeholder() : placeholder;
+          return vue.createVNode("div", $props, [prefix, children === undefined || children === '' || children === null ? contentPlaceholder : children]);
+        };
+      }
+      return column;
+    };
+    const refreshColumnBasicConfig = () => {
+      const defaults = {
+        ...cellStarts[props.type],
+        type: props.type,
+        id: columnId.value,
+        align: realAlign.value,
+        headerAlign: realHeaderAlign.value,
+        prop: props.prop,
+        showPopover: props.showPopover,
+        // index 列
+        index: props.index
+      };
+      const basicProps = ['columnKey', 'label', 'customClass', 'labelClass', 'type', 'renderHeader', 'resizable', 'formatter', 'fixed', 'resizable']; // eslint-disable-line
+      const selectProps = ['selectable', 'reserveSelection'];
+      const sortProps = ['sortable'];
+      const filterProps = ['filters', 'filteredValue', 'filterMultiple', 'filter', 'filterIcon', 'filterPopupClass'];
+      let column = getPropsData(basicProps, selectProps, sortProps, filterProps);
+      column = lodashEs.merge(defaults, column);
+      // 注意 compose 中函数执行的顺序是从右到左
+      column = helperFp.compose(setColumnRenders, setColumnWidth, setColumnForcedProps)(column);
+      for (const key in column) {
+        if (Utils.hasOwn(column, key)) {
+          columnConfig[key] = column[key];
+        }
+      }
+    };
+    const registerComplexWatchers = () => {
+      vue.watch(() => props.fixed, () => {
+        table.exposed.store.scheduleLayout(true);
+      });
+      vue.watch(() => realWidth.value, () => {
+        table.exposed.store.scheduleLayout(false);
+      });
+      vue.watch(() => realMinWidth.value, () => {
+        table.exposed.store.scheduleLayout(false);
+      });
+    };
+    vue.onBeforeMount(() => {
+      refreshColumnBasicConfig();
+      registerComplexWatchers();
+    });
+    vue.onUpdated(refreshColumnBasicConfig);
+    vue.onMounted(() => {
+      const children = isSubColumn ? parent.vnode.el.children : parent.exposed.hiddenColumns.value.children;
+      // DOM上
+      const columnIndex = [...children].indexOf(instance.vnode.el);
+      table.exposed.store.insertColumn(columnConfig, columnIndex, isSubColumn && parent.exposed.columnConfig);
+    });
+    vue.onUnmounted(() => {
+      if (!instance.parent) return;
+      table.exposed.store.removeColumn(columnConfig, isSubColumn && parent.exposed.columnConfig);
+    });
+    expose({
+      columnId,
+      columnConfig
+    });
+    /**
+     * 可以计算 columnIndex(外层需要标签元素), 即h('div')
+     * this.$slots?.default?.() 用于多级表头
+     * @returns ~
+     */
     return () => {
-      return vue.createVNode("div", {
-        "class": "vc-table"
-      }, [slots?.default?.()]);
+      let children = [];
+      try {
+        const renderDefault = slots?.default?.({
+          row: {},
+          column: {},
+          $index: -1
+        });
+        if (renderDefault instanceof Array) {
+          for (const childNode of renderDefault) {
+            if (/^vcm?-table-column$/.test(childNode.type?.name)) {
+              children.push(childNode);
+            } else if (childNode.type === vue.Fragment && childNode.children instanceof Array) {
+              renderDefault.push(...childNode.children);
+            }
+          }
+        }
+      } catch {
+        children = [];
+      }
+      return vue.h('div', children);
     };
   }
 });
 const MTable = Table;
+const MTableColumn = TableColumn;
 const props$b = {
   type: {
@@ -13927,9 +16873,9 @@ const useTabs = (options = {}) => {
 /** @jsxImportSource vue */
-const COMPONENT_NAME$e = 'vc-tabs';
+const COMPONENT_NAME$f = 'vc-tabs';
 const Tabs = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$e,
+  name: COMPONENT_NAME$f,
   props: props$b,
   emits: ['update:modelValue', 'change', 'click'],
   setup(props, {
@@ -14177,9 +17123,9 @@ const useTabsPane = () => {
 /** @jsxImportSource vue */
-const COMPONENT_NAME$d = 'vc-tabs-pane';
+const COMPONENT_NAME$e = 'vc-tabs-pane';
 const TabsPane = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$d,
+  name: COMPONENT_NAME$e,
   props: props$a,
   setup(_, {
     slots
@@ -14234,9 +17180,9 @@ const props$9 = {
 /** @jsxImportSource vue */
-const COMPONENT_NAME$c = 'vcm-tabs';
+const COMPONENT_NAME$d = 'vcm-tabs';
 const MTabs = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$c,
+  name: COMPONENT_NAME$d,
   props: props$9,
   emits: ['update:modelValue', 'change', 'click'],
   setup(props, {
@@ -14501,9 +17447,9 @@ const MTabs = /* @__PURE__ */ vue.defineComponent({
 /** @jsxImportSource vue */
-const COMPONENT_NAME$b = 'vcm-tabs-pane';
+const COMPONENT_NAME$c = 'vcm-tabs-pane';
 const MTabsPane = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$b,
+  name: COMPONENT_NAME$c,
   props: props$a,
   setup(_, {
     slots
@@ -14627,9 +17573,9 @@ const getFitIndex = (options = {}) => {
 /** @jsxImportSource vue */
-const COMPONENT_NAME$a = 'vc-text';
+const COMPONENT_NAME$b = 'vc-text';
 const Text = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$a,
+  name: COMPONENT_NAME$b,
   props: props$8,
   setup(props, {
     emit
@@ -14722,9 +17668,9 @@ const props$7 = {
 /** @jsxImportSource vue */
-const COMPONENT_NAME$9 = 'vc-textarea';
+const COMPONENT_NAME$a = 'vc-textarea';
 const Textarea = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$9,
+  name: COMPONENT_NAME$a,
   props: props$7,
   setup(props, {
     slots
@@ -14782,9 +17728,9 @@ const props$6 = {
   }
 };
-const COMPONENT_NAME$8 = "vc-theme";
+const COMPONENT_NAME$9 = "vc-theme";
 const Theme = vue.defineComponent({
-  name: COMPONENT_NAME$8,
+  name: COMPONENT_NAME$9,
   props: props$6,
   setup(props, { slots }) {
     const themeId = Utils__namespace.getUid("vc-theme");
@@ -14870,9 +17816,9 @@ const Theme = vue.defineComponent({
   }
 });
-const COMPONENT_NAME$7 = "vc-theme-view";
+const COMPONENT_NAME$8 = "vc-theme-view";
 const ThemeView = vue.defineComponent({
-  name: COMPONENT_NAME$7,
+  name: COMPONENT_NAME$8,
   props: props$6,
   setup(props, { slots }) {
     return () => {
@@ -14888,9 +17834,9 @@ const ThemeView = vue.defineComponent({
   }
 });
-const COMPONENT_NAME$6 = "vc-theme-text";
+const COMPONENT_NAME$7 = "vc-theme-text";
 const ThemeText = vue.defineComponent({
-  name: COMPONENT_NAME$6,
+  name: COMPONENT_NAME$7,
   props: props$6,
   setup(props, { slots }) {
     return () => {
@@ -14906,9 +17852,9 @@ const ThemeText = vue.defineComponent({
   }
 });
-const COMPONENT_NAME$5 = "vc-theme-image";
+const COMPONENT_NAME$6 = "vc-theme-image";
 const ThemeImage = vue.defineComponent({
-  name: COMPONENT_NAME$5,
+  name: COMPONENT_NAME$6,
   props: props$6,
   setup(props, { slots }) {
     return () => {
@@ -14956,11 +17902,12 @@ const props$5 = {
 /** @jsxImportSource vue */
+const COMPONENT_NAME$5 = 'vc-time-picker';
 const getPanel = type => {
   const isRange = type === 'timerange';
   return isRange ? TimeRangePanel : TimePanel;
 };
-const TimePicker = createPicker(props$5, () => {
+const TimePicker = createPicker(COMPONENT_NAME$5, props$5, () => {
   const props = vue.getCurrentInstance().props;
   const icon = vue.ref('icon');
   const panel = vue.shallowRef({});
@@ -15239,7 +18186,8 @@ const Upload = vue.defineComponent({
       const { mode, size } = props;
       const onRequest = instance.vnode.props?.onRequest || VcInstance.options.Upload?.onRequest || (() => {
       });
-      const onResponse = instance.vnode.props?.onResponse || VcInstance.options.Upload?.onResponse;
+      const onResponse = instance.vnode.props?.onResponse || VcInstance.options.Upload?.onResponse || (() => {
+      });
       const $mode = mode.replace(/s$/, "");
       const onError = async (originalResponse, internalMessage) => {
         delete requests[vFile.uploadId];
@@ -15248,9 +18196,17 @@ const Upload = vue.defineComponent({
         emitError(originalResponse, internalMessage);
         done(vFile);
       };
-      const onSuccess = async (originalResponse) => {
+      const onSuccess = async (request) => {
         try {
-          const response = await onResponse(originalResponse, options) || originalResponse;
+          let response = await onResponse(request, options) || request;
+          if (response === request) {
+            const text = request.responseType ? request.responseText : request.response;
+            try {
+              response = JSON.parse(text);
+            } catch {
+              response = text;
+            }
+          }
           delete requests[vFile.uploadId];
           cycle.success++;
           cycle.responses = [...cycle.responses, response];
@@ -15284,7 +18240,7 @@ const Upload = vue.defineComponent({
         xhr.onreadystatechange = () => {
           if (xhr.readyState !== 4 || xhr.status === 0) return;
           if (xhr.status >= 200 && xhr.status < 300) {
-            onSuccess(!xhr.responseType ? xhr.responseText : xhr.response);
+            onSuccess(xhr);
           } else {
             onError({}, `服务异常`);
           }
@@ -15498,7 +18454,7 @@ exports.Drawer = Drawer;
 exports.DrawerView = DrawerView;
 exports.Dropdown = Dropdown;
 exports.Editor = Editor;
-exports.Expand = Expand;
+exports.Expand = Expand$1;
 exports.Form = Form;
 exports.FormItem = FormItem;
 exports.Fragment = Fragment;
@@ -15581,6 +18537,7 @@ exports.MSpin = MSpin;
 exports.MSteps = MSteps;
 exports.MSwitch = MSwitch;
 exports.MTable = MTable;
+exports.MTableColumn = MTableColumn;
 exports.MTabs = MTabs;
 exports.MTabsPane = MTabsPane;
 exports.MTag = MTag;
@@ -15631,6 +18588,7 @@ exports.Spin = Spin;
 exports.Steps = Steps;
 exports.Switch = Switch;
 exports.Table = Table;
+exports.TableColumn = TableColumn;
 exports.Tabs = Tabs;
 exports.TabsPane = TabsPane;
 exports.Tag = Tag;