|
@@ -7,10 +7,15 @@ export default {
|
|
|
newColumns: [],
|
|
newColumns: [],
|
|
|
tabMixinsInit: true, //进入页面是否默认请求列配置
|
|
tabMixinsInit: true, //进入页面是否默认请求列配置
|
|
|
// 列宽映射(prop/columnKey -> 宽度),用于 computed columns 应用拖拽/缓存后的宽度
|
|
// 列宽映射(prop/columnKey -> 宽度),用于 computed columns 应用拖拽/缓存后的宽度
|
|
|
- columnWidthMap: {}
|
|
|
|
|
|
|
+ columnWidthMap: {},
|
|
|
|
|
+ // 每页条数(页面可在自身 data 覆盖默认值)
|
|
|
|
|
+ pageSize: 10
|
|
|
};
|
|
};
|
|
|
},
|
|
},
|
|
|
created() {
|
|
created() {
|
|
|
|
|
+ // 同步读取本地保存的每页条数,保证 ele-pro-table 首次加载即用正确值
|
|
|
|
|
+ this.initPageSize();
|
|
|
|
|
+
|
|
|
//从服务器获取缓存列表配置
|
|
//从服务器获取缓存列表配置
|
|
|
if (this.tabMixinsInit) {
|
|
if (this.tabMixinsInit) {
|
|
|
this.getTabColumns();
|
|
this.getTabColumns();
|
|
@@ -71,6 +76,11 @@ export default {
|
|
|
// 获取table-column配置
|
|
// 获取table-column配置
|
|
|
async getTabColumns() {
|
|
async getTabColumns() {
|
|
|
const res = await this.getByTableId(this.cacheKeyUrl);
|
|
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) {
|
|
if (res?.columnConfig?.length > 0) {
|
|
|
//对比接口返回和本地columns
|
|
//对比接口返回和本地columns
|
|
|
let { nlist, type } = this.columnsContrast(res.columnConfig);
|
|
let { nlist, type } = this.columnsContrast(res.columnConfig);
|
|
@@ -94,6 +104,31 @@ export default {
|
|
|
return this.columns;
|
|
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 递归)
|
|
// 根据 prop / columnKey / label 查找本地列(支持 children 递归)
|
|
|
findColumnByKey(key, label) {
|
|
findColumnByKey(key, label) {
|
|
|
let result = null;
|
|
let result = null;
|
|
@@ -247,10 +282,11 @@ export default {
|
|
|
return { nlist: [...updated, ...added], type: updateType };
|
|
return { nlist: [...updated, ...added], type: updateType };
|
|
|
},
|
|
},
|
|
|
|
|
|
|
|
- // 提交columns配置
|
|
|
|
|
|
|
+ // 提交columns配置(tableId + pageSize + columnConfig 三参数齐全)
|
|
|
async saveColumns(e) {
|
|
async saveColumns(e) {
|
|
|
const data = {
|
|
const data = {
|
|
|
tableId: this.cacheKeyUrl,
|
|
tableId: this.cacheKeyUrl,
|
|
|
|
|
+ pageSize: this.pageSize,
|
|
|
columnConfig: e
|
|
columnConfig: e
|
|
|
};
|
|
};
|
|
|
const msg = await this.saveTableConfig(data);
|
|
const msg = await this.saveTableConfig(data);
|