@qin-ui/antd-vue-pro 1.1.25 → 2.0.0

package/es/table/index.js

@@ -1,149 +1,79 @@
-import { createVNode, defineComponent, ref, onMounted, computed, openBlock, createBlock, unref, mergeProps, withCtx, createTextVNode, toDisplayString, normalizeStyle, createCommentVNode, mergeModels, useModel, watch, createElementVNode, createElementBlock, Fragment, renderList, withModifiers, renderSlot, useAttrs, useSlots, toValue, createSlots, normalizeProps, guardReactiveProps, nextTick } from "vue";
+import { createElementBlock, openBlock, createElementVNode, defineComponent, ref, computed, watch, watchEffect, createBlock, unref, mergeProps, withCtx, createVNode, createCommentVNode, createTextVNode, toDisplayString, normalizeStyle, toValue, renderSlot, useAttrs, Fragment, renderList, withModifiers, inject, useSlots, onMounted, normalizeClass, isRef, createSlots, normalizeProps, guardReactiveProps, nextTick, reactive } from "vue";
+import { I as INJECT_CONFIG, g as getObject } from "../component-provider/index-DtsWFG3s.js";
+import _sfc_main$9, { ContainerFragment as _sfc_main$a, useForm } from "../form/index.js";
 import { Space, Button, Dropdown, Menu, MenuItem, Checkbox, MenuDivider, Table } from "ant-design-vue";
-import { useInjectProps, INJECT_KEYS } from "../component-provider/index.js";
-import { A as AntdIcon, _ as _sfc_main$6, g as get, a as _export_sfc, o as omit, b as _sfc_main$7, c as cloneDeep, u as useForm } from "../form/index-1cdda7ac.js";
-var ColumnHeightOutlined$2 = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M840 836H184c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h656c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm0-724H184c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h656c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zM610.8 378c6 0 9.4-7 5.7-11.7L515.7 238.7a7.14 7.14 0 00-11.3 0L403.6 366.3a7.23 7.23 0 005.7 11.7H476v268h-62.8c-6 0-9.4 7-5.7 11.7l100.8 127.5c2.9 3.7 8.5 3.7 11.3 0l100.8-127.5c3.7-4.7.4-11.7-5.7-11.7H548V378h62.8z" } }] }, "name": "column-height", "theme": "outlined" };
-const ColumnHeightOutlinedSvg = ColumnHeightOutlined$2;
-function _objectSpread$2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? Object(arguments[i]) : {};
-    var ownKeys = Object.keys(source);
-    if (typeof Object.getOwnPropertySymbols === "function") {
-      ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
-        return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-      }));
-    }
-    ownKeys.forEach(function(key) {
-      _defineProperty$2(target, key, source[key]);
-    });
+import { p as pick, c as cloneDeep } from "../vendor/utils/lodash-es-Bu1KKNMo.js";
+import { tableProps } from "ant-design-vue/es/table";
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
   }
   return target;
-}
-function _defineProperty$2(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, { value, enumerable: true, configurable: true, writable: true });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
-var ColumnHeightOutlined = function ColumnHeightOutlined2(props, context) {
-  var p = _objectSpread$2({}, props, context.attrs);
-  return createVNode(AntdIcon, _objectSpread$2({}, p, {
-    "icon": ColumnHeightOutlinedSvg
-  }), null);
 };
-ColumnHeightOutlined.displayName = "ColumnHeightOutlined";
-ColumnHeightOutlined.inheritAttrs = false;
-const ColumnHeightOutlined$1 = ColumnHeightOutlined;
-var DownOutlined$2 = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z" } }] }, "name": "down", "theme": "outlined" };
-const DownOutlinedSvg = DownOutlined$2;
-function _objectSpread$1(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? Object(arguments[i]) : {};
-    var ownKeys = Object.keys(source);
-    if (typeof Object.getOwnPropertySymbols === "function") {
-      ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
-        return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-      }));
-    }
-    ownKeys.forEach(function(key) {
-      _defineProperty$1(target, key, source[key]);
-    });
-  }
-  return target;
-}
-function _defineProperty$1(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, { value, enumerable: true, configurable: true, writable: true });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
-var DownOutlined = function DownOutlined2(props, context) {
-  var p = _objectSpread$1({}, props, context.attrs);
-  return createVNode(AntdIcon, _objectSpread$1({}, p, {
-    "icon": DownOutlinedSvg
-  }), null);
+const _sfc_main$8 = {};
+const _hoisted_1$7 = {
+  focusable: "false",
+  "data-icon": "down",
+  width: "1em",
+  height: "1em",
+  fill: "currentColor",
+  "aria-hidden": "true",
+  viewBox: "64 64 896 896"
 };
-DownOutlined.displayName = "DownOutlined";
-DownOutlined.inheritAttrs = false;
-const DownOutlined$1 = DownOutlined;
-var FilterOutlined$2 = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M880.1 154H143.9c-24.5 0-39.8 26.7-27.5 48L349 597.4V838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3 31.8-32V597.4L907.7 202c12.2-21.3-3.1-48-27.6-48zM603.4 798H420.6V642h182.9v156zm9.6-236.6l-9.5 16.6h-183l-9.5-16.6L212.7 226h598.6L613 561.4z" } }] }, "name": "filter", "theme": "outlined" };
-const FilterOutlinedSvg = FilterOutlined$2;
-function _objectSpread(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? Object(arguments[i]) : {};
-    var ownKeys = Object.keys(source);
-    if (typeof Object.getOwnPropertySymbols === "function") {
-      ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
-        return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-      }));
-    }
-    ownKeys.forEach(function(key) {
-      _defineProperty(target, key, source[key]);
-    });
-  }
-  return target;
-}
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, { value, enumerable: true, configurable: true, writable: true });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
+function _sfc_render$4(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$7, _cache[0] || (_cache[0] = [
+    createElementVNode("path", { d: "M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z" }, null, -1)
+  ]));
 }
-var FilterOutlined = function FilterOutlined2(props, context) {
-  var p = _objectSpread({}, props, context.attrs);
-  return createVNode(AntdIcon, _objectSpread({}, p, {
-    "icon": FilterOutlinedSvg
-  }), null);
-};
-FilterOutlined.displayName = "FilterOutlined";
-FilterOutlined.inheritAttrs = false;
-const FilterOutlined$1 = FilterOutlined;
-const rowGap = 16;
-const columnGap = 24;
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "SearchForm",
-    inheritAttrs: false
-  },
+const DownOutlined = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$4]]);
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+  ...{ name: "SearchForm" },
   __name: "SearchForm",
   props: {
     form: {},
     layout: { default: "grid" },
-    minExpandRows: { default: 1 },
-    defaultExpandStatus: { type: Boolean, default: false }
+    expand: { type: [Boolean, Object], default: true },
+    class: {},
+    style: {}
   },
   emits: ["search", "reset"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
-    let proFormHeight = "unset";
-    let collapseHeight = 0;
+    const proFormHeight = ref("unset");
+    const collapseHeight = ref(0);
+    let rowHeight = 32;
+    const rowGap = 16;
+    const columnGap = 24;
+    const computedExpand = computed(() => {
+      if (!props.expand) return false;
+      if (props.expand === true) return { minExpandRows: 2, expandStatus: false };
+      return {
+        minExpandRows: Math.max(Math.floor(props.expand.minExpandRows ?? 2), 1),
+        expandStatus: props.expand.expandStatus ?? false
+      };
+    });
     const showExpandToggle = ref(false);
-    const proFormRef = ref();
     const expandStatus = ref(true);
-    const expand = () => {
+    const changeExpandStatus = () => {
       expandStatus.value = !expandStatus.value;
     };
+    const { formRef, getFormData } = props.form;
     const setInitExpandStatus = () => {
       expandStatus.value = false;
-      if (proFormRef.value) {
-        const formEl = proFormRef.value.$el;
+      if (formRef.value && props.expand) {
+        const formEl = formRef.value.$el;
         const formItemsEl = formEl.querySelectorAll(".ant-form-item>[path]");
         const observer = new IntersectionObserver(
           (entries) => {
             expandStatus.value = entries.some((e) => {
               if (e.intersectionRatio === 0) {
                 const path = e.target.getAttribute("path");
-                const searchFieldValue = path ? get(props.form.formData.value, path) : void 0;
+                const searchFieldValue = path ? getFormData == null ? void 0 : getFormData(path) : void 0;
                 return ![null, void 0].includes(searchFieldValue);
               }
-              return props.defaultExpandStatus;
+              return props.expand.expandStatus;
             });
             observer.disconnect();
           },
@@ -154,20 +84,43 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
         });
       }
     };
-    onMounted(() => {
-      var _a, _b, _c, _d, _e;
-      if (props.layout === "grid") {
-        const proFormEl = (_a = proFormRef.value) == null ? void 0 : _a.$el;
+    watch(
+      [
+        () => {
+          var _a, _b, _c;
+          return (_c = (_b = (_a = props.form) == null ? void 0 : _a.fields.value) == null ? void 0 : _b.filter((f) => !f.hidden)) == null ? void 0 : _c.length;
+        },
+        () => formRef.value
+      ],
+      () => {
+        var _a, _b, _c, _d, _e;
+        if (!expandStatus.value || !formRef.value) return;
+        const proFormEl = (_a = formRef.value) == null ? void 0 : _a.$el;
         const { height = 0 } = ((_b = proFormEl == null ? void 0 : proFormEl.getBoundingClientRect) == null ? void 0 : _b.call(proFormEl)) || {};
-        proFormHeight = height;
-        const rowHeight = (_e = (_d = (_c = proFormEl.querySelector(".ant-form-item")) == null ? void 0 : _c.getBoundingClientRect) == null ? void 0 : _d.call(_c)) == null ? void 0 : _e.height;
-        collapseHeight = props.minExpandRows * rowHeight + (props.minExpandRows - 1) * rowGap;
-        showExpandToggle.value = height > collapseHeight;
-        if (showExpandToggle.value) {
-          setInitExpandStatus();
+        proFormHeight.value = height;
+        rowHeight = (_e = (_d = (_c = proFormEl == null ? void 0 : proFormEl.querySelector(".ant-form-item")) == null ? void 0 : _c.getBoundingClientRect) == null ? void 0 : _d.call(_c)) == null ? void 0 : _e.height;
+      },
+      { flush: "post", immediate: true }
+    );
+    watchEffect(
+      () => {
+        if (typeof proFormHeight.value !== "number") return;
+        if (props.layout === "grid" && computedExpand.value) {
+          const { minExpandRows } = computedExpand.value;
+          collapseHeight.value = Math.min(
+            minExpandRows * rowHeight + (minExpandRows - 1) * rowGap,
+            +proFormHeight.value
+          );
+          showExpandToggle.value = +proFormHeight.value > collapseHeight.value;
+          if (showExpandToggle.value) {
+            setInitExpandStatus();
+          }
+        } else {
+          showExpandToggle.value = false;
         }
-      }
-    });
+      },
+      { flush: "post" }
+    );
     const layoutProps = computed(
       () => props.layout === "grid" ? {
         grid: {
@@ -177,19 +130,19 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
         style: {
           display: "flex",
           overflow: "hidden",
-          height: `${expandStatus.value ? proFormHeight : collapseHeight}px`
+          height: `${expandStatus.value ? proFormHeight.value : collapseHeight.value}px`
         }
       } : {
         layout: "inline",
-        style: { gap: `${rowGap}px ${columnGap}px` }
+        style: { gap: `${rowGap}px ${columnGap}px` },
+        grid: false
       }
     );
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$6), mergeProps({
-        ref_key: "proFormRef",
-        ref: proFormRef,
-        form: _ctx.form
-      }, layoutProps.value, { class: "pro-form expand-transition" }), {
+      return openBlock(), createBlock(unref(_sfc_main$9), mergeProps(layoutProps.value, {
+        form: _ctx.form,
+        class: "search-form transition"
+      }), {
         default: withCtx(() => [
           createVNode(unref(Space), { align: "start" }, {
             default: withCtx(() => [
@@ -197,9 +150,10 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                 onClick: _cache[0] || (_cache[0] = ($event) => emit("reset"))
               }, {
                 default: withCtx(() => _cache[2] || (_cache[2] = [
-                  createTextVNode("重置")
+                  createTextVNode("重置", -1)
                 ])),
-                _: 1
+                _: 1,
+                __: [2]
               }),
               createVNode(unref(Button), {
                 type: "primary",
@@ -207,20 +161,22 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                 onClick: _cache[1] || (_cache[1] = ($event) => emit("search"))
               }, {
                 default: withCtx(() => _cache[3] || (_cache[3] = [
-                  createTextVNode(" 查询 ")
+                  createTextVNode(" 查询 ", -1)
                 ])),
-                _: 1
+                _: 1,
+                __: [3]
               }),
               showExpandToggle.value ? (openBlock(), createBlock(unref(Button), {
                 key: 0,
                 type: "link",
-                onClick: expand
+                class: "expand-toggle-button",
+                onClick: changeExpandStatus
               }, {
                 default: withCtx(() => [
                   createTextVNode(toDisplayString(expandStatus.value ? "收起" : "展开") + " ", 1),
-                  createVNode(unref(DownOutlined$1), {
-                    class: "expand-transition",
-                    style: normalizeStyle({ transform: `rotate(${expandStatus.value ? -180 : 0}deg)` })
+                  createVNode(DownOutlined, {
+                    class: "transition",
+                    style: normalizeStyle([{ "margin-left": "4px" }, { transform: `rotate(${expandStatus.value ? -180 : 0}deg)` }])
                   }, null, 8, ["style"])
                 ]),
                 _: 1
@@ -234,64 +190,157 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const SearchForm_vue_vue_type_style_index_0_scoped_0ed9c0b6_lang = "";
-const SearchForm = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-0ed9c0b6"]]);
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
-  __name: "Control",
-  props: /* @__PURE__ */ mergeModels({
-    columns: {},
-    table: { default: void 0 }
-  }, {
-    "size": { default: "large" },
-    "sizeModifiers": {}
-  }),
-  emits: ["update:size"],
+const SearchForm = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-107a0198"]]);
+function useModel(props, name, options) {
+  const eventName = `onUpdate:${name}`;
+  const emitUpdate = props[eventName];
+  const _modelValue = ref(toValue(options == null ? void 0 : options.default));
+  const modelValue = computed({
+    get: () => props[name] === void 0 ? _modelValue.value : props[name],
+    set: (val) => {
+      _modelValue.value = val;
+      emitUpdate == null ? void 0 : emitUpdate(val);
+    }
+  });
+  return modelValue;
+}
+const _sfc_main$6 = {};
+const _hoisted_1$6 = { class: "search-form-container" };
+function _sfc_render$3(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", _hoisted_1$6, [
+    renderSlot(_ctx.$slots, "default", {}, void 0, true)
+  ]);
+}
+const DefaultSearchFormContainer = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$3], ["__scopeId", "data-v-5904d9f4"]]);
+const _sfc_main$5 = {};
+const _hoisted_1$5 = { class: "table-container" };
+function _sfc_render$2(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", _hoisted_1$5, [
+    renderSlot(_ctx.$slots, "default", {}, void 0, true)
+  ]);
+}
+const DefaultTableContainer = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$2], ["__scopeId", "data-v-f089d734"]]);
+const _sfc_main$4 = {};
+const _hoisted_1$4 = {
+  focusable: "false",
+  "data-icon": "column-height",
+  width: "1em",
+  height: "1em",
+  fill: "currentColor",
+  "aria-hidden": "true",
+  viewBox: "64 64 896 896"
+};
+function _sfc_render$1(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$4, _cache[0] || (_cache[0] = [
+    createElementVNode("path", { d: "M840 836H184c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h656c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm0-724H184c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h656c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zM610.8 378c6 0 9.4-7 5.7-11.7L515.7 238.7a7.14 7.14 0 00-11.3 0L403.6 366.3a7.23 7.23 0 005.7 11.7H476v268h-62.8c-6 0-9.4 7-5.7 11.7l100.8 127.5c2.9 3.7 8.5 3.7 11.3 0l100.8-127.5c3.7-4.7.4-11.7-5.7-11.7H548V378h62.8z" }, null, -1)
+  ]));
+}
+const ColumnHeightOutlined = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$1]]);
+const _hoisted_1$3 = { class: "control-icon" };
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "SizeControl",
   setup(__props) {
-    const props = __props;
-    const size = useModel(__props, "size");
+    const attrs = useAttrs();
+    const size = useModel(attrs, "size", { default: "large" });
     const onSizeChange = (val) => {
       size.value = val.key;
     };
-    const checkAll = ref(false);
-    const indeterminate = ref(false);
     const sizeOptions = [
       { label: "默认", key: "large" },
       { label: "中等", key: "middle" },
       { label: "紧凑", key: "small" }
     ];
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Dropdown), {
+        arrow: "",
+        placement: "bottomRight"
+      }, {
+        overlay: withCtx(() => [
+          createVNode(unref(Menu), {
+            style: { "width": "100px", "text-align": "center" },
+            "selected-keys": unref(size) ? [unref(size)] : [],
+            items: sizeOptions,
+            onClick: onSizeChange
+          }, null, 8, ["selected-keys", "items"])
+        ]),
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_1$3, [
+            createVNode(ColumnHeightOutlined, { style: { "font-size": "16px" } })
+          ])
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+const SizeControl = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-d8e78b5b"]]);
+const _sfc_main$2 = {};
+const _hoisted_1$2 = {
+  focusable: "false",
+  "data-icon": "filter",
+  width: "1em",
+  height: "1em",
+  fill: "currentColor",
+  "aria-hidden": "true",
+  viewBox: "64 64 896 896"
+};
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$2, _cache[0] || (_cache[0] = [
+    createElementVNode("path", { d: "M880.1 154H143.9c-24.5 0-39.8 26.7-27.5 48L349 597.4V838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3 31.8-32V597.4L907.7 202c12.2-21.3-3.1-48-27.6-48zM603.4 798H420.6V642h182.9v156zm9.6-236.6l-9.5 16.6h-183l-9.5-16.6L212.7 226h598.6L613 561.4z" }, null, -1)
+  ]));
+}
+const FilterOutlined = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render]]);
+const _hoisted_1$1 = { class: "control-icon" };
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "ColumnControl",
+  props: {
+    columns: {},
+    table: { default: void 0 }
+  },
+  setup(__props) {
+    const props = __props;
+    const checkAll = ref(false);
+    const indeterminate = ref(false);
     const checkedColumnsOptions = computed(
-      () => {
-        var _a;
-        return (_a = props.columns) == null ? void 0 : _a.filter((item) => item.key && item.title).map((item) => ({
+      () => props.columns.flatMap(
+        (item) => item.key && item.title ? {
           label: item.title,
-          value: item.key
-        }));
-      }
+          value: item.key,
+          checked: !item.hidden
+        } : []
+      )
     );
-    const checkColumnsVisible = ref(false);
-    const checkedColumns = computed({
+    const checkedColumnKeys = computed({
       get() {
-        var _a, _b;
-        return ((_b = (_a = props.table) == null ? void 0 : _a.showColumnKeys) == null ? void 0 : _b.value) || [];
+        return checkedColumnsOptions.value.flatMap(
+          (item) => item.checked ? item.value : []
+        ) || [];
       },
       set(val) {
         var _a;
-        (_a = props.table) == null ? void 0 : _a.setShowColumnKeys(val || []);
+        (_a = checkedColumnsOptions.value) == null ? void 0 : _a.forEach((item) => {
+          var _a2, _b;
+          (_b = (_a2 = props.table) == null ? void 0 : _a2.setColumn) == null ? void 0 : _b.call(_a2, item.value, {
+            hidden: !val.includes(item.value)
+          });
+        });
       }
     });
     const onCheckAllChange = (e) => {
-      checkedColumns.value = e.target.checked ? checkedColumnsOptions.value.map((item) => item.value) : [];
+      checkedColumnKeys.value = e.target.checked ? checkedColumnsOptions.value.map((item) => item.value) : [];
       indeterminate.value = false;
     };
     const checkColumnsMenuItemClick = (val) => {
-      if (checkedColumns.value.includes(val)) {
-        checkedColumns.value = checkedColumns.value.filter((item) => item !== val);
+      if (checkedColumnKeys.value.includes(val)) {
+        checkedColumnKeys.value = checkedColumnKeys.value.filter(
+          (item) => item !== val
+        );
       } else {
-        checkedColumns.value = [...checkedColumns.value, val];
+        checkedColumnKeys.value = [...checkedColumnKeys.value, val];
       }
     };
     watch(
-      checkedColumns,
+      checkedColumnKeys,
       (val) => {
         indeterminate.value = !!val.length && val.length < checkedColumnsOptions.value.length;
         checkAll.value = val.length === checkedColumnsOptions.value.length;
@@ -299,324 +348,259 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       { immediate: true }
     );
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(Space), { size: "middle" }, {
-        default: withCtx(() => [
-          createVNode(unref(Dropdown), {
-            arrow: "",
-            placement: "bottomRight"
-          }, {
-            overlay: withCtx(() => [
-              createVNode(unref(Menu), {
-                style: { "width": "100px", "text-align": "center" },
-                "selected-keys": [size.value],
-                items: sizeOptions,
-                onClick: onSizeChange
-              }, null, 8, ["selected-keys", "items"])
-            ]),
-            default: withCtx(() => [
-              createVNode(unref(ColumnHeightOutlined$1), {
-                style: { fontSize: "16px" },
-                class: "control-icon"
-              })
-            ]),
-            _: 1
-          }),
-          createVNode(unref(Dropdown), {
-            open: checkColumnsVisible.value,
-            "onUpdate:open": _cache[1] || (_cache[1] = ($event) => checkColumnsVisible.value = $event),
-            arrow: "",
-            placement: "bottomRight"
-          }, {
-            overlay: withCtx(() => [
-              createElementVNode("div", null, [
-                createVNode(unref(Menu), {
-                  style: { "min-width": "100px", "max-height": "500px", "overflow-y": "scroll" },
-                  selectable: false
-                }, {
+      return openBlock(), createBlock(unref(Dropdown), {
+        arrow: "",
+        placement: "bottomRight"
+      }, {
+        overlay: withCtx(() => [
+          createElementVNode("div", null, [
+            createVNode(unref(Menu), {
+              style: { "min-width": "100px", "max-height": "500px", "overflow-y": "scroll" },
+              selectable: false
+            }, {
+              default: withCtx(() => [
+                (openBlock(), createBlock(unref(MenuItem), { key: 0 }, {
                   default: withCtx(() => [
-                    (openBlock(), createBlock(unref(MenuItem), { key: 0 }, {
-                      default: withCtx(() => [
-                        createElementVNode("div", null, [
-                          createVNode(unref(Checkbox), {
-                            checked: checkAll.value,
-                            indeterminate: indeterminate.value,
-                            onChange: onCheckAllChange
-                          }, {
-                            default: withCtx(() => _cache[2] || (_cache[2] = [
-                              createTextVNode(" 全选 ")
-                            ])),
-                            _: 1
-                          }, 8, ["checked", "indeterminate"])
-                        ])
-                      ]),
-                      _: 1
-                    })),
-                    createVNode(unref(MenuDivider)),
-                    (openBlock(true), createElementBlock(Fragment, null, renderList(checkedColumnsOptions.value, (item) => {
-                      return openBlock(), createBlock(unref(MenuItem), {
-                        key: item.value,
-                        onClick: ($event) => checkColumnsMenuItemClick(item.value)
+                    createElementVNode("div", null, [
+                      createVNode(unref(Checkbox), {
+                        checked: checkAll.value,
+                        indeterminate: indeterminate.value,
+                        onChange: onCheckAllChange
+                      }, {
+                        default: withCtx(() => _cache[1] || (_cache[1] = [
+                          createTextVNode(" 全选 ", -1)
+                        ])),
+                        _: 1,
+                        __: [1]
+                      }, 8, ["checked", "indeterminate"])
+                    ])
+                  ]),
+                  _: 1
+                })),
+                createVNode(unref(MenuDivider)),
+                (openBlock(true), createElementBlock(Fragment, null, renderList(checkedColumnsOptions.value, (item) => {
+                  return openBlock(), createBlock(unref(MenuItem), {
+                    key: item.value,
+                    onClick: ($event) => checkColumnsMenuItemClick(item.value)
+                  }, {
+                    default: withCtx(() => [
+                      createVNode(unref(Checkbox), {
+                        checked: checkedColumnKeys.value.includes(item.value)
                       }, {
                         default: withCtx(() => [
-                          createVNode(unref(Checkbox), {
-                            checked: checkedColumns.value.includes(item.value)
-                          }, {
-                            default: withCtx(() => [
-                              createElementVNode("div", {
-                                onClick: _cache[0] || (_cache[0] = withModifiers(() => {
-                                }, ["stop"]))
-                              }, toDisplayString(item.label), 1)
-                            ]),
-                            _: 2
-                          }, 1032, ["checked"])
+                          createElementVNode("div", {
+                            onClick: _cache[0] || (_cache[0] = withModifiers(() => {
+                            }, ["stop"]))
+                          }, toDisplayString(item.label), 1)
                         ]),
                         _: 2
-                      }, 1032, ["onClick"]);
-                    }), 128))
-                  ]),
-                  _: 1
-                })
-              ])
-            ]),
-            default: withCtx(() => [
-              createVNode(unref(FilterOutlined$1), {
-                style: { fontSize: "16px" },
-                class: "control-icon"
-              })
-            ]),
-            _: 1
-          }, 8, ["open"])
+                      }, 1032, ["checked"])
+                    ]),
+                    _: 2
+                  }, 1032, ["onClick"]);
+                }), 128))
+              ]),
+              _: 1
+            })
+          ])
+        ]),
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_1$1, [
+            createVNode(FilterOutlined, { style: { "font-size": "17px" } })
+          ])
         ]),
         _: 1
       });
     };
   }
 });
-const Control_vue_vue_type_style_index_0_scoped_4f46d39e_lang = "";
-const Control = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-4f46d39e"]]);
-const DefaultSearchContainer_vue_vue_type_style_index_0_scoped_c00ace37_lang = "";
-const _sfc_main$3 = {};
-const _hoisted_1$3 = { class: "search-container" };
-function _sfc_render$2(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1$3, [
-    renderSlot(_ctx.$slots, "default", {}, void 0, true)
-  ]);
-}
-const DefaultSearchContainer = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$2], ["__scopeId", "data-v-c00ace37"]]);
-const DefaultTableContainer_vue_vue_type_style_index_0_scoped_db2f53ee_lang = "";
-const _sfc_main$2 = {};
-const _hoisted_1$2 = { class: "table-container" };
-function _sfc_render$1(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1$2, [
-    renderSlot(_ctx.$slots, "default", {}, void 0, true)
-  ]);
-}
-const DefaultTableContainer = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$1], ["__scopeId", "data-v-db2f53ee"]]);
-const DefaultControlContainer_vue_vue_type_style_index_0_scoped_1d26ef2f_lang = "";
-const _sfc_main$1 = {};
-const _hoisted_1$1 = { class: "control-container" };
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1$1, [
-    renderSlot(_ctx.$slots, "default", {}, void 0, true)
-  ]);
-}
-const DefaultControlContainer = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render], ["__scopeId", "data-v-1d26ef2f"]]);
-const _hoisted_1 = {
+const ColumnControl = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-88c80679"]]);
+const _hoisted_1 = { class: "pro-table-header" };
+const _hoisted_2 = {
   key: 0,
   style: { "flex": "1" }
 };
+const _hoisted_3 = {
+  key: 1,
+  style: { "margin-left": "12px" }
+};
+const _hoisted_4 = {
+  key: 2,
+  style: { "margin-left": "12px" }
+};
+const _hoisted_5 = {
+  key: 3,
+  style: { "margin-left": "12px" }
+};
 const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "ProTable",
-    inheritAttrs: false
-  },
-  __name: "Table",
+  ...{ name: "ProTable", inheritAttrs: false },
+  __name: "BaseTable",
   props: {
     table: { default: void 0 },
-    addIndexColumn: { type: Boolean, default: true },
-    showControl: { type: Boolean, default: true },
-    searchContainer: { default: DefaultSearchContainer },
-    controlContainer: { default: DefaultControlContainer },
-    tableContainer: { default: DefaultTableContainer },
-    paramCache: { default: void 0 },
-    immediateSearch: { type: Boolean, default: false },
-    searchFormConfig: { default: void 0 }
+    search: { type: Function, default: void 0 },
+    addIndexColumn: { type: Boolean, default: void 0 },
+    immediateSearch: { type: Boolean, default: void 0 },
+    control: { type: [Boolean, Object], default: void 0 },
+    searchFormConfig: { default: void 0 },
+    tableContainer: { default: DefaultTableContainer }
   },
-  emits: ["search"],
-  setup(__props, { emit: __emit }) {
-    var _a, _b, _c, _d, _e, _f;
+  setup(__props) {
     const props = __props;
-    const injectProps = useInjectProps(INJECT_KEYS["pro-table"]);
-    const injectAttrs = omit(injectProps, Object.keys(props));
-    const cache = props.paramCache === null ? null : props.paramCache ?? (injectProps == null ? void 0 : injectProps.paramCache);
-    const size = ref(unref(props.size ?? injectProps.size));
-    const showControl = props.showControl ?? injectProps.showControl;
-    const searchFormConfig = {
-      ...injectProps.searchFormConfig,
-      ...props.searchFormConfig
-    };
-    const attrs = useAttrs();
-    const { table = {} } = props;
-    const {
-      columns,
-      dataSource,
-      pagination,
-      setPagination,
-      showColumnKeys,
-      searchParam,
-      setSearchParam
-    } = table;
-    const emit = __emit;
-    const search = () => {
-      var _a2, _b2;
-      const { current, pageSize } = ((_a2 = props.table) == null ? void 0 : _a2.pagination.value) || {};
-      emit("search", {
-        ...(_b2 = props.table) == null ? void 0 : _b2.searchParam.value,
-        current,
-        pageSize
-      });
-      cache == null ? void 0 : cache.set(
-        (pre = {}) => cloneDeep({
-          ...pre,
-          pagination: unref(pagination),
-          searchParam: unref(searchParam)
-        })
-      );
+    const config = INJECT_CONFIG["pro-table"];
+    const injectProps = inject(config.injectionKey, config.default);
+    const injectAttrs = pick(
+      injectProps,
+      Object.keys(tableProps())
+    );
+    const computedSearchFormConfig = computed(() => {
+      return {
+        container: DefaultSearchFormContainer,
+        ...injectProps.searchFormConfig,
+        ...getObject(props.searchFormConfig)
+      };
+    });
+    const attrs = pick(useAttrs(), Object.keys(tableProps()));
+    const { columns, dataSource, searchForm, pageParam, setPageParam } = props.table || {};
+    const size = useModel(attrs, "size");
+    const loading = useModel(attrs, "loading");
+    const _search = async () => {
+      var _a;
+      const { current = 0, pageSize = 0 } = pageParam || {};
+      const param = { ...searchForm == null ? void 0 : searchForm.formData, current, pageSize };
+      try {
+        loading.value = true;
+        await ((_a = props.search) == null ? void 0 : _a.call(props, param));
+      } finally {
+        loading.value = false;
+      }
     };
     const reset = () => {
-      var _a2;
-      (_a2 = props.table) == null ? void 0 : _a2.resetQueryParams();
+      var _a;
+      (_a = props.table) == null ? void 0 : _a.resetQueryParams();
       nextTick(() => {
-        search();
+        _search();
       });
     };
     const slots = useSlots();
-    const tableSlots = omit(slots, ["search", "buttons", "table"]);
-    const form = {
-      formData: ((_a = props.table) == null ? void 0 : _a.searchParam) || {},
-      fields: ((_b = props.table) == null ? void 0 : _b.searchFields) || [],
-      setFormData: (_c = props.table) == null ? void 0 : _c.setSearchParam,
-      setField: (_d = props.table) == null ? void 0 : _d.setSearchField
-    };
-    if (cache) {
-      setPagination({
-        ...unref(pagination),
-        ...unref(((_e = cache.get()) == null ? void 0 : _e.pagination) ?? {})
-      });
-      setSearchParam({
-        ...unref(searchParam),
-        ...unref(((_f = cache.get()) == null ? void 0 : _f.searchParam) ?? {})
-      });
-    }
+    const {
+      "search-form": searchFormSlot,
+      "button-bar": buttonBarSlot,
+      toolbar: toolbarSlot,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      table: tableSlot,
+      ...tableSlots
+    } = slots;
     const searchPage1st = () => {
-      var _a2;
-      if (props.table) {
-        (_a2 = props.table) == null ? void 0 : _a2.setPagination({ ...props.table.pagination.value, current: 1 });
-        search();
-      }
+      setPageParam == null ? void 0 : setPageParam({ current: 1 });
+      _search();
     };
-    const mergeTableProps = computed(() => {
-      return {
-        ...injectAttrs,
-        ...attrs,
-        columns: (attrs.columns ?? (columns == null ? void 0 : columns.value) ?? []).map(
-          (item, index) => ({
-            ...item,
-            key: item.key ?? item.dataIndex.toString() ?? index
-          })
-        ),
-        dataSource: attrs.dataSource ?? (dataSource == null ? void 0 : dataSource.value),
-        pagination: attrs.pagination ?? {
-          showTotal: (total) => `共 ${total} 条`,
-          showSizeChanger: true,
-          pageSizeOptions: ["10", "20", "30", "40", "50", "100"],
-          showQuickJumper: true,
-          ...pagination == null ? void 0 : pagination.value
-        },
-        onChange: table ? (...args) => {
-          var _a2;
-          setPagination(args[0]);
-          (_a2 = attrs.onChange) == null ? void 0 : _a2.call(attrs, ...args);
-          search();
-        } : attrs.onChange
-      };
+    const computedTableProps = computed(() => {
+      return { ...injectAttrs, ...attrs, onChange: void 0 };
     });
     const indexColumn = {
       title: "序号",
-      dataIndex: "index",
+      dataIndex: "_index",
       width: 80,
       customRender: ({ index }) => index + 1
     };
-    const visibleColumns = computed(() => {
-      var _a2;
-      let list = [];
-      if (!props.table) {
-        list = (mergeTableProps == null ? void 0 : mergeTableProps.value.columns) || [];
-      } else {
-        list = ((_a2 = mergeTableProps.value.columns) == null ? void 0 : _a2.filter(
-          (item) => item.key && showColumnKeys.value.includes(item.key)
-        )) || [];
-      }
-      if (props.addIndexColumn ?? injectProps.addIndexColumn) {
-        list = [indexColumn, ...list];
-      }
-      return list;
+    const computedColumns = computed(() => [
+      ...props.addIndexColumn ?? injectProps.addIndexColumn ? [indexColumn] : [],
+      ...(attrs.columns ?? (columns == null ? void 0 : columns.value) ?? []).flatMap(
+        (item, index) => {
+          if (item.key) return [{ ...item, key: item.key }];
+          if (item.dataIndex) {
+            const dataIndexKey = Array.isArray(item.dataIndex) ? item.dataIndex.join(".") : item.dataIndex;
+            return [{ ...item, key: dataIndexKey }];
+          }
+          return [{ ...item, key: index }];
+        }
+      )
+    ]);
+    const visibleComputedColumns = computed(() => {
+      return computedColumns.value.filter((item) => !item.hidden);
+    });
+    const computedDataSource = computed(() => {
+      return attrs.dataSource ?? (dataSource == null ? void 0 : dataSource.value);
+    });
+    const computedPagination = computed(() => {
+      if (attrs.pagination === false) return false;
+      return { ...injectAttrs.pagination, ...pageParam, ...attrs.pagination };
+    });
+    const onTableChange = (...args) => {
+      var _a;
+      setPageParam == null ? void 0 : setPageParam(args[0]);
+      (_a = attrs.onChange) == null ? void 0 : _a.call(attrs, ...args);
+      _search();
+    };
+    const showSearch = computed(() => {
+      var _a, _b;
+      return !!(searchFormSlot || ((_a = computedSearchFormConfig.value) == null ? void 0 : _a.hidden) !== true && searchForm && ((_b = searchForm.fields.value.filter((item) => !item.hidden)) == null ? void 0 : _b.length) > 0);
+    });
+    const computedControl = computed(() => {
+      const control = props.control ?? injectProps.control;
+      const sizeControl = (control == null ? void 0 : control.sizeControl) ?? control;
+      const columnControl = (control == null ? void 0 : control.columnControl) ?? control;
+      return { sizeControl, columnControl };
     });
-    const showSearch = computed(() => toValue(form.fields).length > 0);
     onMounted(() => {
       if (props.immediateSearch ?? injectProps.immediateSearch) {
-        search();
+        _search();
       }
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: "pro-table",
+        class: normalizeClass(["pro-table", _ctx.$attrs.class]),
         style: normalizeStyle(_ctx.$attrs.style)
       }, [
-        showSearch.value ? (openBlock(), createBlock(unref(_sfc_main$7), {
+        showSearch.value ? (openBlock(), createBlock(unref(_sfc_main$a), {
           key: 0,
-          component: _ctx.searchContainer
+          component: computedSearchFormConfig.value.container
         }, {
           default: withCtx(() => [
-            renderSlot(_ctx.$slots, "search", {}, () => [
-              createVNode(unref(SearchForm), mergeProps({
-                form,
-                cache: unref(cache)
-              }, searchFormConfig, {
+            renderSlot(_ctx.$slots, "search-form", {}, () => [
+              unref(searchForm) ? (openBlock(), createBlock(SearchForm, mergeProps({
+                key: 0,
+                form: unref(searchForm)
+              }, computedSearchFormConfig.value, {
                 onSearch: searchPage1st,
                 onReset: reset
-              }), null, 16, ["form", "cache"])
+              }), null, 16, ["form"])) : createCommentVNode("", true)
             ], true)
           ]),
           _: 3
         }, 8, ["component"])) : createCommentVNode("", true),
-        unref(showControl) || Object.hasOwn(_ctx.$slots, "buttons") ? (openBlock(), createBlock(unref(_sfc_main$7), {
-          key: 1,
-          component: _ctx.controlContainer
-        }, {
-          default: withCtx(() => [
-            Object.hasOwn(_ctx.$slots, "buttons") ? (openBlock(), createElementBlock("div", _hoisted_1, [
-              renderSlot(_ctx.$slots, "buttons", {}, void 0, true)
-            ])) : createCommentVNode("", true),
-            unref(showControl) ? (openBlock(), createBlock(unref(Control), {
-              key: 1,
-              size: size.value,
-              "onUpdate:size": _cache[0] || (_cache[0] = ($event) => size.value = $event),
-              columns: mergeTableProps.value.columns,
-              table: unref(table)
-            }, null, 8, ["size", "columns", "table"])) : createCommentVNode("", true)
-          ]),
-          _: 3
-        }, 8, ["component"])) : createCommentVNode("", true),
-        createVNode(unref(_sfc_main$7), { component: _ctx.tableContainer }, {
+        createVNode(unref(_sfc_main$a), { component: _ctx.tableContainer }, {
           default: withCtx(() => [
+            createElementVNode("div", _hoisted_1, [
+              unref(buttonBarSlot) ? (openBlock(), createElementBlock("div", _hoisted_2, [
+                renderSlot(_ctx.$slots, "button-bar", {}, void 0, true)
+              ])) : createCommentVNode("", true),
+              unref(toolbarSlot) ? (openBlock(), createElementBlock("div", _hoisted_3, [
+                renderSlot(_ctx.$slots, "toolbar", {}, void 0, true)
+              ])) : createCommentVNode("", true),
+              computedControl.value.sizeControl ? (openBlock(), createElementBlock("div", _hoisted_4, [
+                createVNode(unref(SizeControl), {
+                  size: unref(size),
+                  "onUpdate:size": _cache[0] || (_cache[0] = ($event) => isRef(size) ? size.value = $event : null)
+                }, null, 8, ["size"])
+              ])) : createCommentVNode("", true),
+              computedControl.value.columnControl ? (openBlock(), createElementBlock("div", _hoisted_5, [
+                createVNode(unref(ColumnControl), {
+                  columns: computedColumns.value,
+                  table: props.table
+                }, null, 8, ["columns", "table"])
+              ])) : createCommentVNode("", true)
+            ]),
             renderSlot(_ctx.$slots, "table", {}, () => [
-              createVNode(unref(Table), mergeProps(mergeTableProps.value, {
-                columns: visibleColumns.value,
-                class: "base-table",
-                size: size.value
+              createVNode(unref(Table), mergeProps({ class: "pro-table-content" }, computedTableProps.value, {
+                size: unref(size),
+                loading: unref(loading),
+                columns: visibleComputedColumns.value,
+                "data-source": computedDataSource.value,
+                pagination: computedPagination.value,
+                onChange: onTableChange
               }), createSlots({ _: 2 }, [
-                renderList(unref(tableSlots), (slot, name) => {
+                renderList(tableSlots, (_, name) => {
                   return {
                     name,
                     fn: withCtx((scoped) => [
@@ -624,82 +608,138 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     ])
                   };
                 })
-              ]), 1040, ["columns", "size"])
+              ]), 1040, ["size", "loading", "columns", "data-source", "pagination"])
             ], true)
           ]),
           _: 3
         }, 8, ["component"])
-      ], 4);
+      ], 6);
     };
   }
 });
-const Table_vue_vue_type_style_index_0_scoped_7ca35914_lang = "";
-const BaseTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-7ca35914"]]);
-const getDefaultPagination = () => ({ current: 1, pageSize: 10, total: 0 });
-const useTable = ({
-  columns: initColumns = [],
-  dataSource: initDataSource = [],
-  showColumnKeys: initShowColumnKeys = void 0,
-  pagination: initPagination = getDefaultPagination(),
-  searchParam: initSearchParam = {},
-  searchFields: initSearchFields = []
-}) => {
-  const _initSearchParam = cloneDeep(unref(initSearchParam));
-  const columns = ref(initColumns);
+const BaseTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-6701f35a"]]);
+const getDefaultPageParam = () => ({ current: 1, pageSize: 10, total: 0 });
+const pageParamProperty = ["current", "pageSize", "total"];
+const useTable = (params) => {
+  const {
+    columns: initColumns = [],
+    dataSource: initDataSource = [],
+    pageParam: initPageParam = getDefaultPageParam(),
+    searchParam: initSearchParam = {},
+    searchFields: initSearchFields = []
+  } = params;
+  const _initSearchParam = cloneDeep(toValue(initSearchParam));
+  const columns = ref([]);
+  columns.value = initColumns;
   const dataSource = ref(initDataSource);
-  const showColumnKeys = ref(
-    initShowColumnKeys ?? columns.value.map(
-      (item, index) => {
-        var _a;
-        return item.key ?? ((_a = item.dataIndex) == null ? void 0 : _a.toString()) ?? index;
+  const pageParam = reactive(initPageParam);
+  const setPageParam = (pa) => {
+    let newPageParam = pa;
+    if (typeof pa === "function") {
+      newPageParam = pa(pageParam);
+    }
+    Object.assign(pageParam, pick(newPageParam, pageParamProperty));
+  };
+  const searchForm = useForm(initSearchParam, initSearchFields, true);
+  const resetQueryParams = () => {
+    Object.assign(pageParam, getDefaultPageParam());
+    searchForm.setFormData(cloneDeep(_initSearchParam));
+  };
+  const updaterMatch = (key, updater, options = {}) => {
+    if (!key) return;
+    const { all = typeof key === "function" } = options;
+    for (let i = 0; i < columns.value.length; i++) {
+      const columnItem = columns.value[i];
+      let matched = false;
+      if (typeof key === "function") {
+        matched = key(columnItem);
+      } else if (columnItem.key) {
+        matched = columnItem.key === key;
+      } else if (columnItem.dataIndex) {
+        const dataIndexKey = Array.isArray(columnItem.dataIndex) ? columnItem.dataIndex.join(".") : columnItem.dataIndex;
+        matched = dataIndexKey === key;
+      } else {
+        matched = key === i;
       }
-    )
-  );
-  watch(columns, (val) => {
-    showColumnKeys.value = val.map(
-      (item, index) => {
-        var _a;
-        return item.key ?? ((_a = item.dataIndex) == null ? void 0 : _a.toString()) ?? index;
+      if (matched) {
+        updater({
+          column: columnItem,
+          columnIndex: i,
+          group: columns.value
+        });
+        if (!all) return;
       }
-    );
-  });
-  const setShowColumnKeys = (val) => {
-    showColumnKeys.value = val;
-  };
-  const pagination = ref(initPagination);
-  const setPagination = (val) => {
-    pagination.value = val;
+    }
   };
-  const { formData, fields, setFormData, setField, getField } = useForm(
-    initSearchParam,
-    initSearchFields
-  );
-  const searchParam = formData;
-  const searchFields = fields;
-  const setSearchParam = setFormData;
-  const setSearchField = setField;
-  const getSearchField = getField;
-  const resetQueryParams = () => {
-    setPagination(getDefaultPagination());
-    setSearchParam(cloneDeep(_initSearchParam));
+  const setColumn = (key, column, options) => {
+    if (!key || !column) return;
+    const { updateType = "merge", ...rest } = options || {};
+    updaterMatch(
+      key,
+      ({ column: preColumn, columnIndex, group }) => {
+        let value = column;
+        if (typeof column === "function") {
+          value = column(preColumn);
+        }
+        if (!value) return;
+        if (updateType === "rewrite") {
+          group[columnIndex] = value;
+        } else {
+          Object.assign(preColumn, value);
+        }
+      },
+      rest
+    );
   };
+  function deleteColumn(path, options) {
+    if (!path) return;
+    updaterMatch(
+      path,
+      ({ columnIndex, group }) => {
+        group.splice(columnIndex, 1);
+      },
+      options
+    );
+  }
+  function addColumns(path, newColumns, options, placement) {
+    if (newColumns.length === 0) return;
+    if (path) {
+      updaterMatch(
+        path,
+        ({ columnIndex, group }) => {
+          const index = placement === "after" ? columnIndex + 1 : columnIndex;
+          group.splice(index, 0, ...newColumns);
+        },
+        options
+      );
+    } else if (placement === "after") {
+      columns.value.push(...newColumns);
+    } else {
+      columns.value.unshift(...newColumns);
+    }
+  }
+  function appendColumn(path, column, options) {
+    const newColumns = Array.isArray(column) ? column : [column];
+    addColumns(path, newColumns, options, "after");
+  }
+  function prependColumn(path, column, options) {
+    const newColumns = Array.isArray(column) ? column : [column];
+    addColumns(path, newColumns, options, "before");
+  }
   return {
     columns,
     dataSource,
-    pagination,
-    showColumnKeys,
-    searchParam,
-    setSearchParam,
-    searchFields,
-    setSearchField,
-    getSearchField,
-    setShowColumnKeys,
-    setPagination,
+    pageParam,
+    searchForm,
+    setColumn,
+    deleteColumn,
+    appendColumn,
+    prependColumn,
+    setPageParam,
     resetQueryParams
   };
 };
-const useTable$1 = useTable;
 export {
   BaseTable as default,
-  useTable$1 as useTable
+  useTable
 };