DevExtreme REACTIVE表格列宽调整后如何实现刷新后仍保留

该组件没有内置的列宽持久化选项，列宽默认存储在组件内部状态中，页面刷新后状态丢失，需要手动将列宽同步到浏览器本地存储实现持久化，具体步骤如下：

实现步骤 #

• 定义本地存储的唯一标识，避免同域下其他表格的列宽数据互相覆盖，例如：

  const COLUMN_WIDTH_STORAGE_KEY = 'your_unique_grid_id_column_widths'
  

• 封装读取本地列宽的方法，页面加载时调用获取已保存的列宽：

  const getSavedColumnWidths = () => {
    const savedWidths = localStorage.getItem(COLUMN_WIDTH_STORAGE_KEY)
    return savedWidths ? JSON.parse(savedWidths) : undefined
  }
  

• 配置ColumnResizing插件：
  • 将读取到的历史列宽作为defaultColumnWidths的初始值传入
  • 绑定onColumnWidthChange回调，列宽发生调整时将最新的列宽数组存入本地存储
    示例配置：

  <ColumnResizing
    // 传入历史保存的列宽作为初始值
    defaultColumnWidths={getSavedColumnWidths()}
    // 监听列宽调整事件，同步到本地存储
    onColumnWidthChange={(newWidths) => {
      localStorage.setItem(COLUMN_WIDTH_STORAGE_KEY, JSON.stringify(newWidths))
    }}
  />
  

注意事项 #

• 如果需要区分不同用户、不同页面的列宽配置，可以将存储 key 和用户ID、页面路径拼接，避免数据互通
• 若你的表格列结构会动态调整（新增/删除列），可以在存储 key 中加入版本号，列结构变更时更换版本号，避免读取到无效的旧列宽
• 如果使用受控模式的ColumnResizing（即手动维护columnWidths状态），逻辑完全一致：初始化状态时读取本地存储值，状态变更时同步写入本地存储
• 如果需要跨设备、跨浏览器同步列宽配置，不要使用localStorage，需要将列宽数据和用户ID绑定存入后端数据库，加载表格时从后端接口拉取列宽配置即可

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