@smallwei/avue 3.9.1 → 3.9.3

package/es/packages/element-plus/crud/grid/index2.mjs

@@ -1,7 +1,7 @@
-/*! Avue.js v3.9.1 | (c) 2017-2026 Smallwei | Released under the MIT License. */
-import create from '../../../../src/core/create.mjs';
-import locale from '../../../../src/core/locale.mjs';
-
+/*! Avue.js v3.9.3 | (c) 2017-2026 Smallwei | Released under the MIT License. */
+import create from '../../../../src/core/create.mjs';
+import locale from '../../../../src/core/locale.mjs';
+
 var script = create({
   name: "crud__grid",
   inject: ["crud"],
@@ -175,6 +175,6 @@ var script = create({
       return list;
     },
   },
-});
-
-export { script as default };
+});
+
+export { script as default };

package/es/packages/element-plus/crud/grid/index3.mjs

@@ -1,127 +1,127 @@
-/*! Avue.js v3.9.1 | (c) 2017-2026 Smallwei | Released under the MIT License. */
-import { resolveComponent, openBlock, createElementBlock, normalizeStyle, normalizeClass, createElementVNode, renderSlot, createBlock, withCtx, createVNode, Fragment, renderList, withModifiers, createTextVNode, resolveDynamicComponent } from 'vue';
-
-const _hoisted_1 = ["onClick", "onDblclick"];
-const _hoisted_2 = { key: 0 };
-
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_el_checkbox = resolveComponent("el-checkbox");
-  const _component_el_col = resolveComponent("el-col");
-  const _component_el_row = resolveComponent("el-row");
-  const _component_el_checkbox_group = resolveComponent("el-checkbox-group");
-  const _component_el_empty = resolveComponent("el-empty");
-
-  return (openBlock(), createElementBlock("div", {
-    class: normalizeClass(_ctx.b()),
-    style: normalizeStyle(_ctx.styleName)
-  }, [
-    createElementVNode("div", {
-      class: normalizeClass(_ctx.b('hide'))
-    }, [
-      renderSlot(_ctx.$slots, "default")
-    ], 2 /* CLASS */),
-    (_ctx.data.length !== 0)
-      ? (openBlock(), createBlock(_component_el_checkbox_group, {
-          key: 0,
-          modelValue: _ctx.checkList,
-          "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => ((_ctx.checkList) = $event)),
-          onChange: _ctx.checkListChange
-        }, {
-          default: withCtx(() => [
-            createVNode(_component_el_row, null, {
-              default: withCtx(() => [
-                (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.data, (row, index) => {
-                  return (openBlock(), createBlock(_component_el_col, {
-                    onClick: withModifiers($event => (_ctx.handleRowClick(row, index)), ["stop"]),
-                    onDblclick: withModifiers($event => (_ctx.handleRowDblClick(row, index)), ["stop"]),
-                    span: _ctx.crud.tableOption.gridSpan || _ctx.span,
-                    md: _ctx.crud.tableOption.gridSpan || _ctx.span,
-                    sm: _ctx.crud.tableOption.gridSpan || _ctx.span,
-                    xs: _ctx.crud.tableOption.gridXsSpan || _ctx.xsSpan,
-                    class: normalizeClass(_ctx.getRowClass(row, index)),
-                    key: index
-                  }, {
-                    default: withCtx(() => [
-                      createElementVNode("div", {
-                        class: normalizeClass(_ctx.b('content')),
-                        style: normalizeStyle([_ctx.getGradientColor(row, index), _ctx.getRowStyle(row, index)])
-                      }, [
-                        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.column, (item, columnIndex) => {
-                          return (openBlock(), createElementBlock("div", {
+/*! Avue.js v3.9.3 | (c) 2017-2026 Smallwei | Released under the MIT License. */
+import { resolveComponent, openBlock, createElementBlock, normalizeStyle, normalizeClass, createElementVNode, renderSlot, createBlock, withCtx, createVNode, Fragment, renderList, withModifiers, createTextVNode, resolveDynamicComponent } from 'vue';
+
+const _hoisted_1 = ["onClick", "onDblclick"];
+const _hoisted_2 = { key: 0 };
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_el_checkbox = resolveComponent("el-checkbox");
+  const _component_el_col = resolveComponent("el-col");
+  const _component_el_row = resolveComponent("el-row");
+  const _component_el_checkbox_group = resolveComponent("el-checkbox-group");
+  const _component_el_empty = resolveComponent("el-empty");
+
+  return (openBlock(), createElementBlock("div", {
+    class: normalizeClass(_ctx.b()),
+    style: normalizeStyle(_ctx.styleName)
+  }, [
+    createElementVNode("div", {
+      class: normalizeClass(_ctx.b('hide'))
+    }, [
+      renderSlot(_ctx.$slots, "default")
+    ], 2 /* CLASS */),
+    (_ctx.data.length !== 0)
+      ? (openBlock(), createBlock(_component_el_checkbox_group, {
+          key: 0,
+          modelValue: _ctx.checkList,
+          "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => ((_ctx.checkList) = $event)),
+          onChange: _ctx.checkListChange
+        }, {
+          default: withCtx(() => [
+            createVNode(_component_el_row, null, {
+              default: withCtx(() => [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.data, (row, index) => {
+                  return (openBlock(), createBlock(_component_el_col, {
+                    onClick: withModifiers($event => (_ctx.handleRowClick(row, index)), ["stop"]),
+                    onDblclick: withModifiers($event => (_ctx.handleRowDblClick(row, index)), ["stop"]),
+                    span: _ctx.crud.tableOption.gridSpan || _ctx.span,
+                    md: _ctx.crud.tableOption.gridSpan || _ctx.span,
+                    sm: _ctx.crud.tableOption.gridSpan || _ctx.span,
+                    xs: _ctx.crud.tableOption.gridXsSpan || _ctx.xsSpan,
+                    class: normalizeClass(_ctx.getRowClass(row, index)),
+                    key: index
+                  }, {
+                    default: withCtx(() => [
+                      createElementVNode("div", {
+                        class: normalizeClass(_ctx.b('content')),
+                        style: normalizeStyle([_ctx.getGradientColor(row, index), _ctx.getRowStyle(row, index)])
+                      }, [
+                        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.column, (item, columnIndex) => {
+                          return (openBlock(), createElementBlock("div", {
                             class: normalizeClass([
                 _ctx.b('item'),
                 item.type || item.prop,
                 _ctx.getClass(row, index, item),
-              ]),
-                            style: normalizeStyle(_ctx.getCellStyle(row, index, item, columnIndex)),
-                            onClick: withModifiers($event => (_ctx.handleCellClick(row, item)), ["stop"]),
-                            onDblclick: withModifiers($event => (_ctx.handleCellDblClick(row, item)), ["stop"]),
-                            key: columnIndex
-                          }, [
-                            (item.type == 'selection')
-                              ? (openBlock(), createElementBlock("span", _hoisted_2, [
-                                  createVNode(_component_el_checkbox, {
-                                    value: index,
-                                    label: index,
-                                    disabled: _ctx.isDisabled(row, index),
-                                    onClick: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"]))
-                                  }, {
-                                    default: withCtx(() => [...(_cache[2] || (_cache[2] = [
-                                      createTextVNode(" ")
-                                    ]))]),
-                                    _: 2 /* DYNAMIC */
-                                  }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["value", "label", "disabled"])
-                                ]))
-                              : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+              ]),
+                            style: normalizeStyle(_ctx.getCellStyle(row, index, item, columnIndex)),
+                            onClick: withModifiers($event => (_ctx.handleCellClick(row, item)), ["stop"]),
+                            onDblclick: withModifiers($event => (_ctx.handleCellDblClick(row, item)), ["stop"]),
+                            key: columnIndex
+                          }, [
+                            (item.type == 'selection')
+                              ? (openBlock(), createElementBlock("span", _hoisted_2, [
+                                  createVNode(_component_el_checkbox, {
+                                    value: index,
+                                    label: index,
+                                    disabled: _ctx.isDisabled(row, index),
+                                    onClick: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"]))
+                                  }, {
+                                    default: withCtx(() => [...(_cache[2] || (_cache[2] = [
+                                      createTextVNode(" ")
+                                    ]))]),
+                                    _: 2 /* DYNAMIC */
+                                  }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["value", "label", "disabled"])
+                                ]))
+                              : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
                                   (openBlock(true), createElementBlock(Fragment, null, renderList(item.header &&
-                  item.header({ row: row, $index: index, column: item }), (comp, compIndex) => {
-                                    return (openBlock(), createBlock(resolveDynamicComponent(comp), {
-                                      key: compIndex,
-                                      class: normalizeClass([_ctx.b('label'), item.labelClassName])
-                                    }, null, 8 /* PROPS */, ["class"]))
-                                  }), 128 /* KEYED_FRAGMENT */)),
+                  item.header({ row: row, $index: index, column: item }), (comp, compIndex) => {
+                                    return (openBlock(), createBlock(resolveDynamicComponent(comp), {
+                                      key: compIndex,
+                                      class: normalizeClass([_ctx.b('label'), item.labelClassName])
+                                    }, null, 8 /* PROPS */, ["class"]))
+                                  }), 128 /* KEYED_FRAGMENT */)),
                                   (openBlock(true), createElementBlock(Fragment, null, renderList(item.default &&
-                  item.default({ row: row, $index: index, column: item }), (comp, compIndex) => {
+                  item.default({ row: row, $index: index, column: item }), (comp, compIndex) => {
                                     return (openBlock(), createBlock(resolveDynamicComponent(
                       item.overHidden || item.showOverflowTooltip
                         ? 'elTooltip'
                         : 'div'
-                    ), {
-                                      key: compIndex,
-                                      placement: "top",
-                                      class: normalizeClass([_ctx.b('value'), item.className]),
-                                      content: row[item.prop]
-                                    }, {
-                                      default: withCtx(() => [
-                                        (openBlock(), createBlock(resolveDynamicComponent(comp)))
-                                      ]),
-                                      _: 2 /* DYNAMIC */
-                                    }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["class", "content"]))
-                                  }), 128 /* KEYED_FRAGMENT */))
-                                ], 64 /* STABLE_FRAGMENT */))
-                          ], 46 /* CLASS, STYLE, PROPS, NEED_HYDRATION */, _hoisted_1))
-                        }), 128 /* KEYED_FRAGMENT */))
-                      ], 6 /* CLASS, STYLE */)
-                    ]),
-                    _: 2 /* DYNAMIC */
-                  }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["onClick", "onDblclick", "span", "md", "sm", "xs", "class"]))
-                }), 128 /* KEYED_FRAGMENT */))
-              ]),
-              _: 1 /* STABLE */
-            })
-          ]),
-          _: 1 /* STABLE */
-        }, 8 /* PROPS */, ["modelValue", "onChange"]))
-      : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-          (_ctx.$slots.empty)
-            ? renderSlot(_ctx.$slots, "empty", { key: 0 })
-            : (openBlock(), createBlock(_component_el_empty, {
-                key: 1,
-                "image-size": 100,
-                description: _ctx.crud.tableOption.emptyText || _ctx.t('crud.emptyText')
-              }, null, 8 /* PROPS */, ["description"]))
-        ], 64 /* STABLE_FRAGMENT */))
-  ], 6 /* CLASS, STYLE */))
-}
-
-export { render };
+                    ), {
+                                      key: compIndex,
+                                      placement: "top",
+                                      class: normalizeClass([_ctx.b('value'), item.className]),
+                                      content: row[item.prop]
+                                    }, {
+                                      default: withCtx(() => [
+                                        (openBlock(), createBlock(resolveDynamicComponent(comp)))
+                                      ]),
+                                      _: 2 /* DYNAMIC */
+                                    }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["class", "content"]))
+                                  }), 128 /* KEYED_FRAGMENT */))
+                                ], 64 /* STABLE_FRAGMENT */))
+                          ], 46 /* CLASS, STYLE, PROPS, NEED_HYDRATION */, _hoisted_1))
+                        }), 128 /* KEYED_FRAGMENT */))
+                      ], 6 /* CLASS, STYLE */)
+                    ]),
+                    _: 2 /* DYNAMIC */
+                  }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["onClick", "onDblclick", "span", "md", "sm", "xs", "class"]))
+                }), 128 /* KEYED_FRAGMENT */))
+              ]),
+              _: 1 /* STABLE */
+            })
+          ]),
+          _: 1 /* STABLE */
+        }, 8 /* PROPS */, ["modelValue", "onChange"]))
+      : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+          (_ctx.$slots.empty)
+            ? renderSlot(_ctx.$slots, "empty", { key: 0 })
+            : (openBlock(), createBlock(_component_el_empty, {
+                key: 1,
+                "image-size": 100,
+                description: _ctx.crud.tableOption.emptyText || _ctx.t('crud.emptyText')
+              }, null, 8 /* PROPS */, ["description"]))
+        ], 64 /* STABLE_FRAGMENT */))
+  ], 6 /* CLASS, STYLE */))
+}
+
+export { render };

package/es/packages/element-plus/crud/grid/item.mjs

@@ -1,8 +1,8 @@
-/*! Avue.js v3.9.1 | (c) 2017-2026 Smallwei | Released under the MIT License. */
-import script from './item2.mjs';
-import { render } from './item3.mjs';
-
-script.render = render;
-script.__file = "packages/element-plus/crud/grid/item.vue";
-
-export { script as default };
+/*! Avue.js v3.9.3 | (c) 2017-2026 Smallwei | Released under the MIT License. */
+import script from './item2.mjs';
+import { render } from './item3.mjs';
+
+script.render = render;
+script.__file = "packages/element-plus/crud/grid/item.vue";
+
+export { script as default };

package/es/packages/element-plus/crud/grid/item2.mjs

@@ -1,4 +1,4 @@
-/*! Avue.js v3.9.1 | (c) 2017-2026 Smallwei | Released under the MIT License. */
+/*! Avue.js v3.9.3 | (c) 2017-2026 Smallwei | Released under the MIT License. */
 var script = {
   props: {
     className: String,
@@ -31,6 +31,6 @@ var script = {
       default: this.$slots.default,
     });
   },
-};
-
-export { script as default };
+};
+
+export { script as default };

package/es/packages/element-plus/crud/grid/item3.mjs

@@ -1,6 +1,6 @@
-/*! Avue.js v3.9.1 | (c) 2017-2026 Smallwei | Released under the MIT License. */
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return null
-}
-
-export { render };
+/*! Avue.js v3.9.3 | (c) 2017-2026 Smallwei | Released under the MIT License. */
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return null
+}
+
+export { render };

package/es/packages/element-plus/crud/index.mjs

@@ -1,8 +1,8 @@
-/*! Avue.js v3.9.1 | (c) 2017-2026 Smallwei | Released under the MIT License. */
-import script from './index2.mjs';
-import { render } from './index3.mjs';
-
-script.render = render;
-script.__file = "packages/element-plus/crud/index.vue";
-
-export { script as default };
+/*! Avue.js v3.9.3 | (c) 2017-2026 Smallwei | Released under the MIT License. */
+import script from './index2.mjs';
+import { render } from './index3.mjs';
+
+script.render = render;
+script.__file = "packages/element-plus/crud/index.vue";
+
+export { script as default };

package/es/packages/element-plus/crud/index2.mjs

@@ -1,39 +1,40 @@
-/*! Avue.js v3.9.1 | (c) 2017-2026 Smallwei | Released under the MIT License. */
-import create from '../../../src/core/create.mjs';
-import packages from '../../../src/core/packages.mjs';
-import locale from '../../../src/core/locale.mjs';
-import permission from '../../core/directive/permission.mjs';
-import init from '../../core/common/init.mjs';
-import './grid/index.mjs';
-import './grid/item.mjs';
-import './menu/table-page.mjs';
-import './menu/header-search.mjs';
-import './menu/header-menu.mjs';
-import './dialog/dialog-column.mjs';
-import './dialog/dialog-filter.mjs';
-import './dialog/dialog-form.mjs';
-import './dialog/dialog-excel.mjs';
-import './column/column.mjs';
-import './column/column-menu.mjs';
-import './column/column-default.mjs';
-import config from './config.mjs';
-import { formInitVal, calcCascader } from '../../../src/core/dataformat.mjs';
-import { DIC_PROPS } from '../../../src/global/variable.mjs';
-import 'element-plus';
-import { getColumn } from '../../../src/utils/util.mjs';
-import script$1 from './dialog/dialog-excel2.mjs';
-import script$2 from './dialog/dialog-form2.mjs';
-import script$3 from './dialog/dialog-filter2.mjs';
-import script$4 from './dialog/dialog-column2.mjs';
-import script$5 from './menu/header-menu2.mjs';
-import script$6 from './menu/header-search2.mjs';
-import script$7 from './menu/table-page2.mjs';
-import script$8 from './column/column-menu2.mjs';
-import script$9 from './column/column-default2.mjs';
-import script$a from './column/column2.mjs';
-import script$b from './grid/item2.mjs';
-import script$c from './grid/index2.mjs';
-
+/*! Avue.js v3.9.3 | (c) 2017-2026 Smallwei | Released under the MIT License. */
+import create from '../../../src/core/create.mjs';
+import packages from '../../../src/core/packages.mjs';
+import locale from '../../../src/core/locale.mjs';
+import permission from '../../core/directive/permission.mjs';
+import init from '../../core/common/init.mjs';
+import './grid/index.mjs';
+import './grid/item.mjs';
+import './menu/table-page.mjs';
+import './menu/header-search.mjs';
+import './menu/header-menu.mjs';
+import './dialog/dialog-column.mjs';
+import './dialog/dialog-filter.mjs';
+import './dialog/dialog-form.mjs';
+import './dialog/dialog-excel.mjs';
+import './column/column.mjs';
+import './column/column-menu.mjs';
+import './column/column-default.mjs';
+import config from './config.mjs';
+import { removeColumnState, createColumnState, saveColumnState, loadColumnState, applyColumnState } from '../../../src/core/column-state.mjs';
+import { formInitVal, calcCascader } from '../../../src/core/dataformat.mjs';
+import { DIC_PROPS } from '../../../src/global/variable.mjs';
+import 'element-plus';
+import { getColumn } from '../../../src/utils/util.mjs';
+import script$1 from './dialog/dialog-excel2.mjs';
+import script$2 from './dialog/dialog-form2.mjs';
+import script$3 from './dialog/dialog-filter2.mjs';
+import script$4 from './dialog/dialog-column2.mjs';
+import script$5 from './menu/header-menu2.mjs';
+import script$6 from './menu/header-search2.mjs';
+import script$7 from './menu/table-page2.mjs';
+import script$8 from './column/column-menu2.mjs';
+import script$9 from './column/column-default2.mjs';
+import script$a from './column/column2.mjs';
+import script$b from './grid/item2.mjs';
+import script$c from './grid/index2.mjs';
+
 var script = create({
   name: "crud",
   mixins: [init("crud"), locale],
@@ -80,6 +81,8 @@ var script = create({
     "row-update",
     "change",
     "scroll",
+    "column-state-change",
+    "column-state-reset",
   ],
   directives: {
     permission,
@@ -123,14 +126,15 @@ var script = create({
       btnDisabledList: {},
       btnDisabled: false,
       default: {},
+      searchShow: true,
       gridShow: false,
+      columnStateSource: null,
     };
   },
   mounted() {
     this.dataInit();
     this.getTableHeight();
     this.initFun();
-    this.initVirtualizeFun();
   },
   computed: {
     columnVirtualizeOption() {
@@ -188,7 +192,7 @@ var script = create({
       return this.getSlotList(
         ["-error", "-label", "-type", "-form", "-header", "-desc"],
         this.$slots,
-        this.propOption
+        this.propOption,
       );
     },
     searchSlot() {
@@ -203,7 +207,7 @@ var script = create({
       return this.getSlotList(
         ["-header", "-form"],
         this.$slots,
-        this.propOption
+        this.propOption,
       ).concat(result);
     },
     calcHeight() {
@@ -258,6 +262,22 @@ var script = create({
     columnOption() {
       return getColumn(this.tableOption.column);
     },
+    columnStateKey() {
+      return (
+        this.tableOption.columnStateKey ||
+        this.tableOption.columnPersistKey ||
+        this.tableOption.tableId
+      );
+    },
+    columnStateStorage() {
+      return this.tableOption.columnStateStorage || "localStorage";
+    },
+    columnStateEnabled() {
+      return (
+        this.validData(this.tableOption.columnState, true) !== false &&
+        !this.validatenull(this.columnStateKey)
+      );
+    },
     sumColumnList() {
       return this.tableOption.sumColumnList || [];
     },
@@ -361,15 +381,6 @@ var script = create({
     },
   },
   methods: {
-    initVirtualizeFun() {
-      if (!this.virtualize) return;
-      this.initTableMethods([
-        "scrollTo",
-        "scrollToTop",
-        "scrollToLeft",
-        "scrollRow",
-      ]);
-    },
     initFun() {
       this.initTableMethods([
         "scrollTo",
@@ -378,6 +389,7 @@ var script = create({
         "columns",
         "doLayout",
         "updateKeyChildren",
+        "getHalfSelectionRows",
         "toggleAllSelection",
         "toggleRowSelection",
         "toggleRowExpansion",
@@ -396,6 +408,50 @@ var script = create({
         };
       });
     },
+    restoreColumnState() {
+      if (!this.columnStateEnabled) return;
+      this.columnStateSource = this.deepClone(this.tableOption.column);
+      const columns = this.deepClone(this.columnStateSource);
+      const loader = this.tableOption.columnStateLoad;
+      const state =
+        typeof loader === "function"
+          ? loader(this.columnStateKey, this.tableOption)
+          : loadColumnState(this.columnStateKey, this.columnStateStorage);
+      this.tableOption.column = state
+        ? applyColumnState(columns, state)
+        : columns;
+    },
+    saveColumnState(reason = "change") {
+      if (!this.columnStateEnabled) return;
+      if (this.validData(this.tableOption.columnStateAutoSave, true) === false) {
+        return;
+      }
+      const state = createColumnState(this.columnOption);
+      const saver = this.tableOption.columnStateSave;
+      if (typeof saver === "function") {
+        saver(state, this.columnStateKey, reason, this.tableOption);
+      } else {
+        saveColumnState(this.columnStateKey, state, this.columnStateStorage);
+      }
+      this.$emit("column-state-change", state, reason);
+    },
+    resetColumnState(callback) {
+      if (!this.columnStateEnabled) return;
+      const remover = this.tableOption.columnStateRemove;
+      if (typeof remover === "function") {
+        remover(this.columnStateKey, this.tableOption);
+      } else {
+        removeColumnState(this.columnStateKey, this.columnStateStorage);
+      }
+      if (this.columnStateSource) {
+        this.tableOption.column = this.deepClone(this.columnStateSource);
+      }
+      this.refreshTable(() => {
+        this.doLayout();
+        callback && callback();
+        this.$emit("column-state-reset", this.columnStateKey);
+      });
+    },
     handleGridShow() {
       this.gridShow = !this.gridShow;
       this.$emit("grid-status-change", this.gridShow);
@@ -456,7 +512,7 @@ var script = create({
     menuIcon(value) {
       return this.validData(
         this.tableOption[value + "Text"],
-        this.t("crud." + value)
+        this.t("crud." + value),
       );
     },
     getBtnIcon(value) {
@@ -486,11 +542,16 @@ var script = create({
     },
     //拖动表头事件
     headerDragend(newWidth, oldWidth, column, event) {
+      const prop = column.property || column.prop;
+      if (prop && this.objectOption[prop]) {
+        this.objectOption[prop].width = newWidth;
+        this.saveColumnState("width");
+      }
       this.$emit("header-dragend", newWidth, oldWidth, column, event);
     },
     headerSort(oldIndex, newIndex) {
       const visibleColumns = this.columnOption.filter(
-        (col) => col.hide !== true
+        (col) => col.hide !== true,
       );
       const oldProp = visibleColumns[oldIndex].prop;
       const newProp = visibleColumns[newIndex].prop;
@@ -500,6 +561,12 @@ var script = create({
       const targetRow = allColumns.splice(realOldIndex, 1)[0];
       allColumns.splice(realNewIndex, 0, targetRow);
       this.doLayout();
+      this.saveColumnState("sort");
+      this.$emit("column-sortable-change", {
+        oldIndex,
+        newIndex,
+        column: targetRow,
+      });
     },
     scroll(params) {
       this.$emit("scroll", params);
@@ -594,8 +661,8 @@ var script = create({
             $index: len,
           },
           formDefault,
-          row
-        )
+          row,
+        ),
       );
       this.list.push(row);
     },
@@ -748,7 +815,7 @@ var script = create({
       } else {
         columns.forEach((column, index) => {
           let currItem = this.sumColumnList.find(
-            (item) => item.name === column.property
+            (item) => item.name === column.property,
           );
           if (currItem) {
             let decimals = currItem.decimals !== void 0 ? currItem.decimals : 2;
@@ -759,7 +826,7 @@ var script = create({
                 break;
               case "avg":
                 let avgValues = data.map((item) =>
-                  Number(item[column.property])
+                  Number(item[column.property]),
                 );
                 let nowindex = 1;
                 sums[index] = avgValues.reduce((perv, curr) => {
@@ -836,6 +903,6 @@ var script = create({
       return result;
     },
   },
-});
-
-export { script as default };
+});
+
+export { script as default };