Angular实现可调整列宽表格并持久化列宽至本地存储

1. 在调整指令中添加存储逻辑 #

找到你使用的可调整列指令，在列宽调整完成的逻辑（比如mouseup事件处理函数）里，把当前列的唯一标识（比如绑定的字段名）和最终宽度存入localStorage：

// 从指令元素获取列的唯一标识（需提前给th标签绑定）
const columnKey = this.el.nativeElement.getAttribute('data-column-key');
const newWidth = this.el.nativeElement.offsetWidth;

// 用统一key管理所有列宽，避免localStorage键混乱
const savedWidths = JSON.parse(localStorage.getItem('tableColumnWidths') || '{}');
savedWidths[columnKey] = newWidth;
localStorage.setItem('tableColumnWidths', JSON.stringify(savedWidths));

给表头<th>标签添加唯一标识，示例：

<th data-column-key="username" appResizable>用户名</th>
<th data-column-key="email" appResizable>邮箱</th>

2. 组件初始化时加载保存的列宽 #

在表格所在组件的ngAfterViewInit钩子中，读取localStorage中的列宽数据，逐个应用到对应列：

ngAfterViewInit(): void {
  const savedWidths = JSON.parse(localStorage.getItem('tableColumnWidths') || '{}');
  
  const columnElements = document.querySelectorAll('th[appResizable]');
  columnElements.forEach(el => {
    const columnKey = el.getAttribute('data-column-key');
    if (savedWidths[columnKey]) {
      el.style.width = `${savedWidths[columnKey]}px`;
    }
  });
}

3. 适配动态列场景 #

如果支持用户添加/移除列，在列更新完成后，重新执行加载列宽的逻辑，确保新列能复用之前保存的宽度：

// 假设这是你更新列列表的方法
updateColumnList(): void {
  // ...你的列添加/移除逻辑
  // 列更新后重新加载宽度
  this.applySavedColumnWidths();
}

private applySavedColumnWidths(): void {
  const savedWidths = JSON.parse(localStorage.getItem('tableColumnWidths') || '{}');
  const columnElements = document.querySelectorAll('th[appResizable]');
  columnElements.forEach(el => {
    const columnKey = el.getAttribute('data-column-key');
    if (savedWidths[columnKey]) {
      el.style.width = `${savedWidths[columnKey]}px`;
    }
  });
}

内容的提问来源于stack exchange，提问作者Tush