react antd table设置列宽并默认记住上一次设置

在React中，使用Ant Design库创建表格时，如果你想要设置列宽并且希望它们能记住上次的用户自定义设置，你可以利用`getDerivedStateFromProps`生命周期方法和本地存储技术来实现这个功能。

首先，在组件的state中添加一个对象来保存列宽信息：

constructor(props) {
  super(props);
  this.state = { columnWidths: {} };
}

componentDidMount() {
  // 如果存在本地存储的宽度信息，加载到columnWidths中
  const storedWidths = localStorage.getItem('tableColumnWidths');
  if (storedWidths) {
    this.setState({ columnWidths: JSON.parse(storedWidths) });
  }
}

然后，在`getDerivedStateFromProps`方法中检查props是否有变化，并更新列宽，如果props发生变化则将当前列宽存储到本地：

static getDerivedStateFromProps(nextProps, prevState) {
  if (!Object.is(prevProps.columns, nextProps.columns)) {
    // 计算新列宽并更新state
    const newColumnWidths = {};
    nextProps.columns.forEach((col) => {
      if (prevState.columnWidths[col.key]) {
        newColumnWidths[col.key] = prevState.columnWidths[col.key];
      } else {
        // 初始化默认宽度或其他计算宽度的方式
        newColumnWidths[col.key] = col.width || someDefaultWidth;
      }
    });

    return { columnWidths: newColumnWidths };
  }

  return null; // 没有状态更改
}

render() {
  const { columns, columnWidths } = this.state;

  // 渲染表格，使用columnWidths对象设置列宽
  <Table columns={columns} columnWidths={columnWidths} />
}

componentDidUpdate(prevProps, prevState) {
  // 更新列宽到本地存储
  localStorage.setItem('tableColumnWidths', JSON.stringify(this.state.columnWidths));
}

每次页面刷新时，都会从本地存储读取列宽并应用到表格上，如果用户手动调整了列宽，那么下次访问时还会显示他们之前设定的宽度。