Ant Design Pro使用表格显示接口数据
Ant Design Pro使用,一般都会先做一个列表页面,这时候就会用到表格,今天来说使用表格!
首先放上效果图:
开始码代码
src/pages/Test/Test.js页面代码:
import React, { PureComponent, Fragment } from 'react'; import { connect } from 'dva'; import { Card,//卡片 Button,//按钮 Divider,//分割线 } from 'antd'; //import styles from './User.less'; 暂时用不到 //表格 import StandardTable from '@/components/StandardTable';//tables //面包屑 import PageHeaderWrapper from '@/components/PageHeaderWrapper';//面包屑 @connect( test => ({ test, loading }) => ({ list : test.data,//请求结果赋值给list loading: loading.models.list, })) class Test extends PureComponent { state = { selectedRows: [],//这个是选中 和反选的 必须有,除非你不用复选框 }; //定义列 columns = [ { title: 'ID', dataIndex: 'id', key:"firstName" }, { title: '姓名', dataIndex: 'name', }, { title: '年龄', dataIndex: 'age', }, { title: '状态', dataIndex: 'status', }, { title: '操作', render: (text, record) => ( <Fragment> <Button type="primary">编辑</Button> //分割线 <Divider type="vertical" /> <Button type="danger">删除</Button> </Fragment> ), }, ]; //componentDidMount在第一次渲染后调用,只在客户端 //加载第一页数据, 你们可以把第一页的和以后的整合的一起,用一个方法,我这测试就不整理了 componentDidMount() { const { dispatch } = this.props; //参数 const params = { aa:1, }; dispatch({ type: 'test/fetch', payload: params, }); } //什么时候调用可以看着里:http://www.runoob.com/react/react-component-life-cycle.html //全选 取消 handleSelectRows = rows => { this.setState({ selectedRows: rows, }); }; //翻页 handleStandardTableChange = (pagination) => { const { dispatch } = this.props; const params = { page : pagination.current, rows : pagination.pageSize, }; dispatch({ type: 'test/fetch', payload: params, }); }; render() { const{ list, loading, } = this.props; const { selectedRows } = this.state; return ( <PageHeaderWrapper> <Card bordered={false}> <div> <StandardTable rowKey = { list => list.id}//这块是默认为key 如果没有key字段必须定义一个字段不然会有错误提示 selectedRows={selectedRows} loading={loading} data={list}//数据 columns={this.columns}//列 onSelectRow={this.handleSelectRows}//选中 取消 onChange={this.handleStandardTableChange}//翻页 /> </div> </Card> </PageHeaderWrapper> ) } } export default Test;
下边是models src/pages/Test/models/test.js代码:
import { queryTest } from '@/services/api'; export default { //命名空间,如果这里面什么不懂 ,可以看上一篇文章 namespace: 'test', state: { //数据结果 data : [], }, effects: { *fetch({ payload }, { call, put }) { const response = yield call(queryTest, payload); yield put({ type: 'save', payload: response, }); }, }, reducers: { save(state, action) { return { ...state, data: action.payload, }; }, }, };
接着是api.js src/pages/services/api.js
再最后加一行:
export async function queryTest(params) { return request(`/server/api/test?${stringify(params)}`); }
我的接口数据
{"list":[{"id":11,"name":"淬端挡末兰孔跺律","age":33,"status":5},{"id":12,"name":"量内恋","age":56,"status":0},{"id":13,"name":"厢输疯椿酶","age":48,"status":3},{"id":14,"name":"季继链肖谷筷氏遍淖","age":45,"status":0},{"id":15,"name":"蚊吭圈轿佛抹快羔灭","age":71,"status":1},{"id":16,"name":"箔抽恕","age":40,"status":5},{"id":17,"name":"司醛饯秘尸箍","age":30,"status":2},{"id":18,"name":"时鞋楷侵","age":30,"status":4},{"id":19,"name":"鸥图般概穆史纠棱乐","age":93,"status":4},{"id":20,"name":"啥桓倪侠似芍氰瓜","age":85,"status":3}],"pagination":{"total":100,"pageSize":10,"current":2}}
ok ! 保存就可以看到效果了! 你学会了吗?如果不会可以留言我! 如果也想将自己的经验分享出来,可以联系我!
Ant Design Pro使用表格显示接口数据
喜欢(9)