const columns: ProColumns[] = [
{
title: '', //表头显示的名称
dataIndex: 'name', // 后端字段,列数据在数据项中对应的路径,支持通过数组查询嵌套路径
width: '20%',
filters: [ // 表头的筛选菜单项
{ text: '男', value: '男' },
{ text: '女', value: '女' },
],
hideInSearch : 'false', // 设置搜索栏是否显示 true为隐藏 false为显示
hideInTable : 'false', // 设置表格中是否显示 true为隐藏 false为显示
valueEnum: { //搜索栏当前列值的枚举
false: { text: '禁用', status: 'Error' }, //false是后台传的值,text是页面显示的,status是antd提供的状态,具体看api
true: { text: '启用', status: 'Success' },
},
];
return (
<PageHeaderWrapper> //布局标签
<ProTable //表格Pro组件
headerTitle="查询表格" //表头
actionRef={actionRef} //用于触发刷新操作等
rowKey="id" //表格行 key 的取值,可以是字符串或一个函数
toolBarRender={() => [ //位于表格上方的操作,如“导入/导出/新增”
<Button type="primary" onClick={()=>{}}>
新建
</Button>,
<Button>
批量操作
<DownOutlined />
</Button>
</Dropdown>
),
]}
request={(params) => selectPage(params)}//请求数据的地方(可将函数封装)
columns={columns} //上面定义的
/>
</PageHeaderWrapper>
);
};
export default TableList;