|
|
@@ -5,10 +5,17 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
newColumns: [],
|
|
|
- tabMixinsInit: true //进入页面是否默认请求列配置
|
|
|
+ tabMixinsInit: true, //进入页面是否默认请求列配置
|
|
|
+ // 列宽映射(prop/columnKey -> 宽度),用于 computed columns 应用拖拽/缓存后的宽度
|
|
|
+ columnWidthMap: {},
|
|
|
+ // 每页条数(页面可在自身 data 覆盖默认值)
|
|
|
+ pageSize: 10
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
+ // 同步读取本地保存的每页条数,保证 ele-pro-table 首次加载即用正确值
|
|
|
+ this.initPageSize();
|
|
|
+
|
|
|
//从服务器获取缓存列表配置
|
|
|
if (this.tabMixinsInit) {
|
|
|
this.getTabColumns();
|
|
|
@@ -69,6 +76,11 @@ export default {
|
|
|
// 获取table-column配置
|
|
|
async getTabColumns() {
|
|
|
const res = await this.getByTableId(this.cacheKeyUrl);
|
|
|
+ // 从服务端配置恢复每页条数(优先服务端,同步本地缓存)
|
|
|
+ if (res?.pageSize) {
|
|
|
+ this.pageSize = res.pageSize;
|
|
|
+ this.setStorage(this.cacheKeyUrl + 'PageSize', res.pageSize);
|
|
|
+ }
|
|
|
if (res?.columnConfig?.length > 0) {
|
|
|
//对比接口返回和本地columns
|
|
|
let { nlist, type } = this.columnsContrast(res.columnConfig);
|
|
|
@@ -80,17 +92,9 @@ export default {
|
|
|
this.saveColumns(uniqueLabelList);
|
|
|
}
|
|
|
this.setStorage(this.cacheKeyUrl + 'Cols', nlist);
|
|
|
- // 从缓存恢复列宽到本地列(下次进入生效)
|
|
|
+ // 从缓存恢复列宽到 columnWidthMap,并应用到列
|
|
|
this.applyColumnWidthFromCache();
|
|
|
- // 更新列
|
|
|
- if (this._computedWatchers && this._computedWatchers.columns) {
|
|
|
- // console.log('columns 是计算属性');
|
|
|
- this.columnsVersion++;
|
|
|
- } else {
|
|
|
- // console.log('columns 是 data 属性');
|
|
|
- this.columns = [...this.columns];
|
|
|
- this.newColumns = [...this.newColumns];
|
|
|
- }
|
|
|
+ this.applyColumnWidths();
|
|
|
}
|
|
|
},
|
|
|
getColumns() {
|
|
|
@@ -100,6 +104,31 @@ export default {
|
|
|
return this.columns;
|
|
|
}
|
|
|
},
|
|
|
+ // 同步读取本地保存的每页条数(localStorage),用于首次加载
|
|
|
+ initPageSize() {
|
|
|
+ const local = this.getStorage(this.cacheKeyUrl + 'PageSize');
|
|
|
+ if (local) {
|
|
|
+ this.pageSize = local;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 每页条数变化处理:在 datasource({ limit }) 中调用,变化时保存
|
|
|
+ handlePageSize(limit) {
|
|
|
+ if (limit && limit !== this.pageSize) {
|
|
|
+ this.pageSize = limit;
|
|
|
+ this.savePageSize(limit);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 保存每页条数到 localStorage + 服务端 table-config(同时带上当前列配置)
|
|
|
+ savePageSize(size) {
|
|
|
+ this.setStorage(this.cacheKeyUrl + 'PageSize', size);
|
|
|
+ // 服务端持久化:tableId + pageSize + columnConfig 三参数齐全
|
|
|
+ const columnConfig = this.getStorage(this.cacheKeyUrl + 'Cols') || [];
|
|
|
+ this.saveTableConfig({
|
|
|
+ tableId: this.cacheKeyUrl,
|
|
|
+ pageSize: size,
|
|
|
+ columnConfig
|
|
|
+ });
|
|
|
+ },
|
|
|
// 根据 prop / columnKey / label 查找本地列(支持 children 递归)
|
|
|
findColumnByKey(key, label) {
|
|
|
let result = null;
|
|
|
@@ -119,23 +148,43 @@ export default {
|
|
|
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];
|
|
|
- }
|
|
|
- }
|
|
|
+ if (!key) return;
|
|
|
+ // 仅持久化新宽度,不触发 columns 重算。
|
|
|
+ // el-table 在拖拽过程中已实时更新列宽,此处重算会导致整表重渲染抖动;
|
|
|
+ // 刷新后由 applyColumnWidthFromCache 从缓存恢复,无需拖拽时同步映射。
|
|
|
this.persistColumnWidth(key, newWidth);
|
|
|
},
|
|
|
+ // 应用列宽并触发表格更新(自动区分 columns 是 computed 还是 data)
|
|
|
+ applyColumnWidths() {
|
|
|
+ const isComputed = !!(this._computedWatchers && this._computedWatchers.columns);
|
|
|
+ if (isComputed) {
|
|
|
+ // computed 场景:columns 内部已调用 applyColumnWidth,这里只需触发重算
|
|
|
+ this.columnsVersion++;
|
|
|
+ } else {
|
|
|
+ // data 场景:直接应用宽度到 data 数组并触发更新
|
|
|
+ this.applyColumnWidth(this.columns);
|
|
|
+ this.columns = [...this.columns];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 应用列宽映射到列数组(供 computed columns 生成列后调用,或 data columns 直接应用)
|
|
|
+ applyColumnWidth(columns) {
|
|
|
+ const map = this.columnWidthMap || {};
|
|
|
+ const keys = Object.keys(map);
|
|
|
+ if (!keys.length || !columns) return columns;
|
|
|
+ const loop = (cols) => {
|
|
|
+ (cols || []).forEach((col) => {
|
|
|
+ const k = col.prop || col.columnKey;
|
|
|
+ if (k && map[k] != null) this.$set(col, 'minWidth', map[k]);
|
|
|
+ if (col.children && col.children.length) loop(col.children);
|
|
|
+ });
|
|
|
+ };
|
|
|
+ loop(columns);
|
|
|
+ return columns;
|
|
|
+ },
|
|
|
// 持久化列宽到列设置(localStorage 与 ele-pro-table 共用 cacheKey+'Cols',并同步服务端)
|
|
|
persistColumnWidth(key, width) {
|
|
|
if (!key) return;
|
|
|
@@ -143,7 +192,7 @@ export default {
|
|
|
const cached = this.getStorage(storageKey) || [];
|
|
|
const setting = cached.find((c) => (c.columnKey || c.prop || c.id) === key);
|
|
|
if (setting) {
|
|
|
- setting.width = width;
|
|
|
+ setting.minWidth = width;
|
|
|
} else {
|
|
|
cached.push({
|
|
|
id: key,
|
|
|
@@ -151,7 +200,7 @@ export default {
|
|
|
columnKey: key,
|
|
|
label: key,
|
|
|
checked: true,
|
|
|
- width
|
|
|
+ minWidth: width
|
|
|
});
|
|
|
}
|
|
|
this.setStorage(storageKey, cached);
|
|
|
@@ -159,23 +208,15 @@ export default {
|
|
|
this.debouncedSaveColumns(cached);
|
|
|
}
|
|
|
},
|
|
|
- // 从缓存恢复列宽到本地列(下次进入页面时调用)
|
|
|
+ // 从缓存恢复列宽到 columnWidthMap(供 computed columns 应用)
|
|
|
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 (k && c.minWidth != null) {
|
|
|
+ this.$set(this.columnWidthMap, k, c.minWidth);
|
|
|
+ }
|
|
|
});
|
|
|
- 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) {
|
|
|
@@ -241,10 +282,11 @@ export default {
|
|
|
return { nlist: [...updated, ...added], type: updateType };
|
|
|
},
|
|
|
|
|
|
- // 提交columns配置
|
|
|
+ // 提交columns配置(tableId + pageSize + columnConfig 三参数齐全)
|
|
|
async saveColumns(e) {
|
|
|
const data = {
|
|
|
tableId: this.cacheKeyUrl,
|
|
|
+ pageSize: this.pageSize,
|
|
|
columnConfig: e
|
|
|
};
|
|
|
const msg = await this.saveTableConfig(data);
|
|
|
@@ -328,6 +370,7 @@ export default {
|
|
|
} catch (error) {
|
|
|
console.error('保存列配置失败:', error);
|
|
|
}
|
|
|
- }
|
|
|
+ },
|
|
|
+
|
|
|
}
|
|
|
};
|