ProTable 字段默认隐藏与列设置配置方案

背景

在使用 ProTable 时，当表格字段较多且屏幕宽度有限时，容易出现内容溢出的问题。为解决这一问题，我们希望将部分字段设置为默认隐藏，同时允许用户通过右上角的列设置功能自主勾选显示这些隐藏字段。

错误做法

直接在列配置中使用 hideInTable: true 属性：

const columns = [
  {
    title: '标题',
    dataIndex: 'title',
    valueType: 'text',
    width: 200,
    ellipsis: true,
  },
  {
    title: '封面',
    dataIndex: 'coverImage',
    valueType: 'text',
    width: 100,
    search: false,
    hideInTable: true, // 官方文档描述：在 Table 中不展示此列
  },
  // ...其他列配置
]

问题现象：设置 hideInTable: true 后，"封面" 列虽然在表格中隐藏了，但在右上角的列设置面板中也无法找到该字段，导致用户无法自主选择显示。

正确做法

通过 ProTable 的 columnsState 属性进行配置，既能默认隐藏指定字段，又能在列设置中保留该选项：

<ProTable
  columns={columns}
  request={(params) => getList(params)}
  options={{ reload: false, density: false }} // 隐藏表格右上角的"重新加载"和"密度"按钮
  search={{ collapsed: false, collapseRender: () => null }} // 隐藏搜索框的展开/折叠按钮
  columnsState={{
    defaultValue: {
      // 配置初始显示状态（仅在无缓存时首次生效）
      coverImage: {
        show: false, // "封面"列默认隐藏
      },
      address: {
        show: false, // "地址"列默认隐藏
      },
    },
    persistenceKey: 'infoTableSetting', // 持久化标识，用于区分不同表格的配置缓存
    persistenceType: 'localStorage', // 持久化方式：localStorage（关闭浏览器后仍保留）/ sessionStorage（关闭浏览器后失效）
  }}
/>

优势：通过 columnsState 配置的隐藏字段，会保留在列设置面板中，用户可根据需要随时勾选显示，兼顾了默认简洁性和交互灵活性。

happy coding!