【ProTable的基本使用】

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;
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值