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