如何在 ProTable 中实现列的默认隐藏与动态显示

1. 需求背景

在某些业务场景中，表格可能包含大量字段，但用户在初次访问时可能只需要查看部分字段。因此，需要在表格加载时默认隐藏部分列，用户可以通过设置手动选择需要显示的列。

2. 实现方法

通过 ProTable 的 columnsState 属性实现列的默认隐藏和动态显示。以下是实现步骤和代码示例：

---

实现步骤

方法 1：定义列配置

在 columns 中定义每一列的属性。可以通过 hideInTable 属性直接隐藏某列，或者通过 columnsState 动态控制列的显示状态。

tsx复制

const columns = [
  {
    title: '序号',
    dataIndex: 'index',
    key: 'index',
    valueType: 'index',
  },
  {
    title: '用户名',
    dataIndex: 'userName',
    key: 'userName',
  },
  {
    title: '地区',
    dataIndex: 'region',
    key: 'region',
    hideInTable: true, // 默认隐藏该列
    valueType: 'select',
    filters: true,
    valueEnum: {
      london: { text: '伦敦' },
      'New York': { text: '纽约' },
    },
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '地址',
    dataIndex: 'address',
    key: 'address',
  },
];

方法 2：配置 columnsState

通过 columnsState 属性配置列的显示状态。可以设置默认值（defaultValue），并监听列状态的变化（onChange）。如果需要持久化列的显示状态，可以配置 persistenceKey 和 persistenceType。

tsx复制

<ProTable
  columns={columns}
  request={(params) => getList(params)}
  options={{ reload: false, density: false }} // 不显示重新加载和密度按钮
  search={{ collapsed: false, collapseRender: () => null }} // 不显示搜索框的展开/折叠按钮
  columnsState={{
    defaultValue: {
      age: { show: false }, // 默认隐藏年龄列
      address: { show: false }, // 默认隐藏地址列
    },
    onChange: (mapObj) => {
      console.log(mapObj); // 打印列状态
    },
    persistenceKey: 'infoTableSetting', // 持久化键名
    persistenceType: 'localStorage', // 持久化类型：localStorage 或 sessionStorage
  }}
  pagination={{
    showSizeChanger: true,
    showQuickJumper: true,
    defaultPageSize: 5,
    current: 1,
    showTotal: (total) => `共${total}条`,
  }}
  toolBarRender={() => [
    <Button key="button" icon={<PlusOutlined />} onClick={handleAdd} type="primary">
      新建
    </Button>,
  ]}
/>

注意事项

• 如果配置了持久化（persistenceKey 和 persistenceType），组件会自动处理缓存和列状态。此时，不要在 onChange 中手动修改 columnsState，否则可能会导致死循环。
• 如果未配置持久化，可以使用 useState 管理 columnsState 的值。

---

示例效果

1. 默认隐藏部分列：在表格加载时，仅显示部分列（如用户名、序号），其余列（如年龄、地址）默认隐藏。
2. 动态显示/隐藏列：用户可以通过设置菜单手动勾选或取消勾选列，动态调整表格的显示内容。
3. 持久化功能：通过 localStorage 或 sessionStorage 持久化列的显示状态，即使刷新页面或关闭浏览器，列的显示状态依然保持。

---

总结

通过 ProTable 的 columnsState 属性，可以方便地实现列的默认隐藏和动态显示功能。结合持久化功能，可以提升用户体验，满足复杂的业务需求。