锦州商务职业学院,宋祖玉,毒蛇土狗大战 最终结果出人意料
如果用 react 开发前端, 建议基于 来开发, antd pro 是 antd 的增强版, antd 是组件库, antd pro 则是前端框架, 基于 antd pro, 创建工程时不用再考虑:
总之, 对于管理类型的应用, 基于 antd pro, 可以更多的关注自己的业务, 而不用在工程的管理上花费多余的时间. 在 antd pro 的官网上, 有它的使用方式, 这里主要介绍 antd pro 中的一个组件 antd pro table 的使用
antd pro 中的大部分组件来自于 antd , 而 antd pro table 则是基于 antd 的 table 组件再封装了一层, 熟练使用 antd pro table, 能够覆盖大部分增删改查业务的需要, 关键是只需要极少的配置, 就能得到一个完善的表格.
如下图:
protable 组件有个 request 的 props, 这个 prop 就是用来配置表格数据的来源, 一般会关联后端一个 api
1 <protable 2 headertitle="查询表格" 3 columns={columns} 4 request={(params) => querytabledata(params)} 5 />
其中 querytabledata 一般会访问后端的 api, 然后返回 json 格式数据, 返回的数据和表格对应是根据表格的 columns 配置
1 const columns = [ 2 { 3 title: '规则名称', 4 dataindex: 'name', 5 }, 6 { 7 title: '描述', 8 dataindex: 'desc', 9 }, 10 { 11 title: '服务调用次数', 12 dataindex: 'callno', 13 sorter: true, 14 rendertext: (val) => `${val} 万`, 15 }, 16 { 17 title: '状态', 18 dataindex: 'status', 19 valueenum: { 20 0: { 21 text: '关闭', 22 status: 'default', 23 }, 24 1: { 25 text: '运行中', 26 status: 'processing', 27 }, 28 2: { 29 text: '已上线', 30 status: 'success', 31 }, 32 3: { 33 text: '异常', 34 status: 'error', 35 }, 36 }, 37 }, 38 { 39 title: '上次调度时间', 40 dataindex: 'updatedat', 41 sorter: true, 42 valuetype: 'datetime', 43 }, 44 { 45 title: '操作', 46 dataindex: 'option', 47 valuetype: 'option', 48 render: (_, record) => ( 49 <> 50 <a 51 onclick={() => { 52 handleupdatemodalvisible(true); 53 setstepformvalues(record); 54 }} 55 > 56 配置 57 </a> 58 <divider type="vertical" /> 59 <a href="">订阅警报</a> 60 </> 61 ), 62 }, 63 ];
column 的 dataindex 对应返回 json 数据中的 key
1 <protable 2 headertitle="查询表格" 3 search={false} 4 />
配置成 false 就不会显示 检索部分, 对于某些数据量不大的表格, 可以直接不显示这部分
protable 组件有个 request 的 props, 这个 prop 就是用来配置表格数据的来源, 一般会关联后端一个 api
1 <protable 2 headertitle="查询表格" 3 columns={columns} 4 request={(params) => querytabledata(params)} 5 />
1 <protable 2 headertitle="查询表格" 3 toolbarrender={(action, { selectedrows }) => [ 4 <button icon={<plusoutlined />} type="primary" onclick={() => handlemodalvisible(true)}> 5 新建 6 </button>, 7 selectedrows && selectedrows.length > 0 && ( 8 <dropdown 9 overlay={ 10 <menu 11 onclick={async (e) => { 12 if (e.key === 'remove') { 13 await handleremove(selectedrows); 14 action.reload(); 15 } 16 }} 17 selectedkeys={[]} 18 > 19 <menu.item key="remove">批量删除</menu.item> 20 <menu.item key="approval">批量审批</menu.item> 21 </menu> 22 } 23 > 24 <button> 25 批量操作 <downoutlined /> 26 </button> 27 </dropdown> 28 ), 29 ]} 30 request={(params) => { 31 return queryrule(params); 32 }} 33 columns={columns} 34 rowselection={{}} 35 />
当表格中的数据可以多选时, 才会有这部分的信息显示
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
怎么理解wx.navigateTo的events参数使用详情
微信jssdk踩坑之签名错误invalid signature
网友评论