新增skill

zhangback

2026-03-10 fc2f4490e0949ee9ddedda3fa1cf256f7903ae45

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
import { ref, onMounted, onBeforeUnmount } from 'vue';
 
export function useAvueTableShowHide(defaultOption: any) {
 
    // 获取页面 ID
    const pageId = defaultOption.pageKey;
 
    // 保存列宽
    const saveColumnHides = () => {
        const columnHides: { [key: string]: boolean } = {};
        Object.keys(defaultOption.column).forEach(key => {
            let columnElement = defaultOption.column[key];
            columnHides[key] = columnElement.hide || false;
        })
        // 使用按页面 ID 分片存储列宽
        localStorage.setItem(`columnHides_${pageId}`, JSON.stringify(columnHides));
    };
 
    // 加载列宽
    const loadColumnWidths = () => {
        const columnShowHide = localStorage.getItem(`columnHides_${pageId}`);
        if (columnShowHide) {
            const columnWidths = JSON.parse(columnShowHide);
            applyColumnShowHide(columnWidths);
        }
    };
 
    // 应用列宽到表格
    const applyColumnShowHide = (columnShowHide: { [key: string]: boolean }) => {
        Object.keys(columnShowHide).forEach((key: string) => {
            let columnElement = defaultOption.column[key];
            if (columnElement) {
                defaultOption.column[key].hide = columnShowHide[key];
            }
        })
    };
 
    // 在组件挂载时加载列宽
    onMounted(() => {
        loadColumnWidths();
        window.addEventListener('beforeunload', saveColumnHides); // 监听页面离开
    });
 
    // 在组件销毁时保存列宽
    onBeforeUnmount(() => {
        window.removeEventListener('beforeunload', saveColumnHides);
    });
}