【ProTable的基本使用】

最新推荐文章于 2024-04-25 14:00:01 发布

年年7

最新推荐文章于 2024-04-25 14:00:01 发布

阅读量3k

点赞数 1

分类专栏：学习文章标签：前端

本文链接：https://blog.csdn.net/qq_53120043/article/details/125936891

版权

学习专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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;