antd Protable高级表格 缓存列设置

 Protable是写后台需求最好的黄金搭档。二话不说先上图，以下文章实现前端缓存列展示功能：自定义表格列展示顺序、是否展示、是否固定。高级表格的Protable.columnsState可以很好的帮助我们。

 

persistenceType持久化列的类类型设置为localStorage；persistenceKey具备唯一性是必要的这里用的名称为“taskRelationshipNewSetting”，用于判断是否是同一个 table，会存到本地浏览器localStorage缓存中。

const [columnsStateMap, setColumnsStateMap] = useState(() => {
    //从缓存里面获取ColumnsState
    const taskRelationshipNewSetting: any = localStorage.getItem('taskRelationshipNewSetting')
    return JSON.parse(taskRelationshipNewSetting) || {};
  });

  const handleOnChangeColumn = (map: any) => {
    setColumnsStateMap(map);
  }

<ProTable<taskTableItem, taskTableParams>
        // 开启checkbox 进行批量操作
        rowSelection={{
          // 自定义选择项参考: https://ant.design/components/table-cn/#components-table-demo-row-selection-custom
          selectedRowKeys,
          onChange: onSelectChange,
          preserveSelectedRowKeys: true,
          // 注释该行则默认不显示下拉选项
          selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
          // defaultSelectedRowKeys: [1],
        }}
        // 表格头部alert
        tableAlertRender={false}
        // 行键 这里设置什么 rowSelection获取的就是对应的值 比如：rowKey="id", 输出的[1, 2, 3, 4]
        rowKey="id"
        cardProps={false}
        actionRef={actionRef}
        formRef={formRef}
        columnEmptyText="--"
        pagination={{
          ...pagination,
        }}
        request={(params) => getList(Object.assign(params, getListParams))}
        bordered
        columnsState={{ //列设置-操作
          value: columnsStateMap, //列状态的值，支持受控模式
          onChange: handleOnChangeColumn, //列状态的值发生改变之后触发
          persistenceKey: 'taskRelationshipNewSetting', //持久化列的 key，用于判断是否是同一个 table,会存在缓存里去
          persistenceType: 'localStorage' //持久化列的类类型， localStorage 设置在关闭浏览器后也是存在的，sessionStorage 关闭浏览器后会丢失
        }}
        toolbar={{
          actions: [<div >
            <Popover overlayStyle={{ width: '200px' }} overlayClassName={styles.columnSetting} placement="bottomRight" trigger='click' visible={popFlag} content={returnContent}>
              <Button className={styles.SettingBtn} size='small' title="" onClick={() => columnSetting()}>排序操作{<SwapOutlined />}</Button>
            </Popover>
          </div>],
          // settings: [],
          menu: {
            items: [
              {
                key: 1,
                label: (
                  <div className={styles['count-container']} >
                    <span>
                      总任务数：<span>{totalCount.sum || 0}</span>
                    </span>
                    <span>
                      已维护调度任务：<span>{totalCount.yesSum || 0}</span>
                    </span>
                    <span>
                      待维护调度任务：<span className={styles.warning}>{totalCount.noSum || 0}</span>
                    </span>
                  </div>
                ),
              },
            ],
          },
        }}
        onSubmit={(params) => { handOnSubmit(params) }}
        tableExtraRender={() => (
          <>
            <PermissionBtn type="add" className="toolbar-btn" onClick={() => skipTopage("add")} icon={<Icon type="icon-button-xinzeng-moren" />} /> {/* 新增*/}
            <PermissionBtn type="download" className="toolbar-btn" onClick={() => showModal()} icon={<DownloadOutlined />} /> {/* excel导出*/}
            <PermissionBtn type='batch' className="toolbar-btn" onClick={() => showBatchModal()} icon={<FormOutlined />} />{/* 批量修改*/}
            <PermissionBtn type="split" className="toolbar-btn" onClick={() => openSplitModal()} icon={<SplitCellsOutlined />} />{/**拆DAG */}
          </>
        )
        }
        search={{
          searchText: '查询',
          resetText: '清空',
          span: {
            xs: 24,
            sm: 24,
            md: 12,
            lg: 5,
            xl: 5,
            xxl: 5,
          },
          labelWidth: 0,
          collapsed,
          onCollapse: setCollapsed,
          defaultCollapsed: false,
        }}
        dataSource={list}
        columns={columns}
        loading={tableDataLoading}
        scroll={{ scrollToFirstRowOnChange: true, y: tableScrollY, x: "1500px" }}
      />