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光安检机数据集
