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 }} />
下一篇:
景联文科技:x光安检机数据集