feat: 表头拖拽保存列宽

src/mixins/tableColumnsMixin.js

@@ -19,6 +19,8 @@ export default {
       this.handleColumnChangeImpl,
       1000
     );
+    // 列宽变化持久化防抖（与服务端列设置共用 saveColumns）
+    this.debouncedSaveColumns = this.debounce(this.saveColumns, 1000);
   },
   methods: {
     // 实际的列变更处理逻辑
@@ -78,6 +80,8 @@ export default {
           this.saveColumns(uniqueLabelList);
         }
         this.setStorage(this.cacheKeyUrl + 'Cols', nlist);
+        // 从缓存恢复列宽到本地列（下次进入生效）
+        this.applyColumnWidthFromCache();
         // 更新列
         if (this._computedWatchers && this._computedWatchers.columns) {
           // console.log('columns 是计算属性');
@@ -96,6 +100,83 @@ export default {
         return this.columns;
       }
     },
+    // 根据 prop / columnKey / label 查找本地列（支持 children 递归）
+    findColumnByKey(key, label) {
+      let result = null;
+      const loop = (cols) => {
+        for (const col of cols) {
+          if (
+            (key && (col.prop === key || col.columnKey === key)) ||
+            (label && col.label === label)
+          ) {
+            result = col;
+            return;
+          }
+          if (col.children && col.children.length) loop(col.children);
+          if (result) return;
+        }
+      };
+      loop(this.getColumns() || []);
+      return result;
+    },
+    // 表头拖拽列宽变化回调：更新本地列并持久化
+    handleHeaderDragend(newWidth, oldWidth, column) {
+      if (!column || !newWidth) return;
+      const key = column.property || column.columnKey;
+      const label = column.label;
+      const target = this.findColumnByKey(key, label);
+      if (target) {
+        target.width = newWidth;
+        // 触发 ele-pro-table 重新渲染（render 时 props 会带上 width）
+        if (this._computedWatchers && this._computedWatchers.columns) {
+          this.columnsVersion++;
+        } else {
+          this.columns = [...this.columns];
+        }
+      }
+      this.persistColumnWidth(key, newWidth);
+    },
+    // 持久化列宽到列设置（localStorage 与 ele-pro-table 共用 cacheKey+'Cols'，并同步服务端）
+    persistColumnWidth(key, width) {
+      if (!key) return;
+      const storageKey = this.cacheKeyUrl + 'Cols';
+      const cached = this.getStorage(storageKey) || [];
+      const setting = cached.find((c) => (c.columnKey || c.prop || c.id) === key);
+      if (setting) {
+        setting.width = width;
+      } else {
+        cached.push({
+          id: key,
+          prop: key,
+          columnKey: key,
+          label: key,
+          checked: true,
+          width
+        });
+      }
+      this.setStorage(storageKey, cached);
+      if (this.debouncedSaveColumns) {
+        this.debouncedSaveColumns(cached);
+      }
+    },
+    // 从缓存恢复列宽到本地列（下次进入页面时调用）
+    applyColumnWidthFromCache() {
+      const cached = this.getStorage(this.cacheKeyUrl + 'Cols') || [];
+      const widthMap = {};
+      cached.forEach((c) => {
+        const k = c.columnKey || c.prop || c.id;
+        if (k && c.width != null) widthMap[k] = c.width;
+      });
+      if (!Object.keys(widthMap).length) return;
+      const loop = (cols) => {
+        (cols || []).forEach((col) => {
+          const k = col.columnKey || col.prop;
+          if (k && widthMap[k] != null) col.width = widthMap[k];
+          if (col.children && col.children.length) loop(col.children);
+        });
+      };
+      loop(this.getColumns());
+    },
     //服务器和本地配置columns对比
     columnsContrast(list) {
       const key = 'label';