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

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);
}
});
});

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>