update 优化 支持表格列显隐状态记忆

This commit is contained in:
疯狂的狮子Li
2026-04-01 13:12:24 +08:00
parent cac35ecf4c
commit 57f18eece5
2 changed files with 29 additions and 3 deletions
+28 -2
View File
@@ -31,12 +31,15 @@
<script setup lang="ts">
import { propTypes } from '@/utils/propTypes';
import cache from '@/plugins/cache';
const props = defineProps({
showSearch: propTypes.bool.def(true),
columns: propTypes.fieldOption,
search: propTypes.bool.def(true),
gutter: propTypes.number.def(10)
gutter: propTypes.number.def(10),
/* 列显隐状态记忆的 localStorage key(传入则启用记忆,不传则不记忆) */
storageKey: propTypes.string.def('')
});
const columnRef = ref<ElTreeInstance>();
@@ -60,19 +63,42 @@ function refresh() {
emits('queryTable');
}
// 将当前列显隐状态持久化到 localStorage
function saveStorage() {
if (!props.storageKey) return;
try {
const state: Record<string, boolean> = {};
props.columns?.forEach((col, index) => {
state[index] = col.visible;
});
cache.local.setJSON(props.storageKey, state);
} catch (e) {}
}
// 更改数据列的显示和隐藏
function columnChange(...args: any[]) {
props.columns?.forEach((item) => {
item.visible = args[1].checkedKeys.includes(item.key);
});
saveStorage();
}
// 显隐列初始默认隐藏列
onMounted(() => {
// 如果传入了 storageKey,从 localStorage 恢复列显隐状态
if (props.storageKey) {
try {
const saved = cache.local.getJSON(props.storageKey);
if (saved && typeof saved === 'object') {
props.columns?.forEach((col, index) => {
if (saved[index] !== undefined) col.visible = saved[index];
});
}
} catch (e) {}
}
props.columns?.forEach((item) => {
if (item.visible) {
columnRef.value?.setChecked(item.key, true, false);
// value.value.push(item.key);
}
});
});
+1 -1
View File
@@ -107,7 +107,7 @@
</el-dropdown-menu>
</template>
</el-dropdown>
<right-toolbar v-model:show-search="showSearch" :columns="columns" :search="false" @query-table="getList"></right-toolbar>
<right-toolbar v-model:show-search="showSearch" :columns="columns" :search="false" storage-key="sys_user_column_visible" @query-table="getList"></right-toolbar>
</div>
</div>
</template>