antd design pro v5 ProTable 列表工具栏操作

场景:

用户点击从右侧列展示里把不想看到的数据勾掉隐藏,下次再进来的时候 保持上次操作,关键api是 columnsState

beforeSearchSubmit 是搜索之前的一些更改,你可以在这里重新格式化你的数据
const [columnsStateMap, setColumnsStateMap] = useState(() => {
    //从缓存里面获取ColumnsState
    return JSON.parse(localStorage.getItem(storeManagementSeeting)) || {};
  });

  const handleOnChangeColumn = (map,ColumnsState) => {
    setColumnsStateMap(map);
  }
      
 <ProTable
          headerTitle="查询表格"
          columns={columns}
          rowKey="key"
          params={
            params
          }
          scroll={
         
  { x: 2000,y:300 }}
          beforeSearchSubmit={beforeSearchSubmit}
          search={
         
  {
            labelWidth: 100,
            span: 12,
            optionRender: ({searchText, resetText}, {form}, dom) => [
              <Button type="primary" onClick={() => confirm(form)}>check</Button>,
              <Dropdown overlay={menu}>
                <Button type="primary" >
                  {selectedKeys === like ? Normal : selectedKeys === equal ? Accurate : selectedKeys} <DownOutlined />
                </Button>
              </Dropdown>,
              <Button
                key="searchText"
                type="primary"
                onClick={() => {
                  // console.log(params);
                  form?.submit();
                }}
              >
                {searchText}
              </Button>,
              <Button
                key="resetText"
                onClick={() => {
                  form?.resetFields();
                }}
              >
                {resetText}
              </Button>
            ]
          }}
          // columnsStateMap={columnsStateMap}
          columnsState={
         
  { //列设置-操作
            value:columnsStateMap, //列状态的值,支持受控模式
            onChange: handleOnChangeColumn, //列状态的值发生改变之后触发
            persistenceKey:storeManagementSeeting, //持久化列的 key,用于判断是否是同一个 table,会存在缓存里去
            persistenceType:localStorage //持久化列的类类型, localStorage 设置在关闭浏览器后也是存在的,sessionStorage 关闭浏览器后会丢失
          }}
          toolbar={
         
  {
            search: { //搜索栏
              onSearch: (value) => {
                alert(value);
              },
            },
            settings:[] //列设置(刷新,密度,列设置)
          }}
          pagination={false}
          request={(params) => {
            return getStorageAPI(params)
          }}
          postData={(data) =>{
            setDataSource([...data])
            return data
          }}         
       />
经验分享 程序员 微信小程序 职场和发展