快速学习Ant Design-表格

import React from 'react'

import {
	Table,
	Divider,
	Tag,
	Pagination
} from 'antd';
const {
	Column
} = Table;

const data = [{
	key: '1',
	name: '张三',
	age: 32,
	address: '上海市',
	tags: ['程序员', '帅气'],
}, {
	key: '2',
	name: '李四',
	age: 42,
	address: '北京市',
	tags: ['屌丝'],
}, {
	key: '3',
	name: '王五',
	age: 32,
	address: '杭州市',
	tags: ['高富帅', '富二代'],
}];
class UserList extends React.Component {
		render() {
				return ( <
					div >
					<
					Table dataSource = {
						data
					}
					pagination = {
						{
							position: "bottom",
							total: 500,
							pageSize: 10,
							defaultCurrent: 3
						}
					} >
					<
					Column title = " 姓 名 "
					dataIndex = "name"
					key = "name" /
					>

					<
					Columntitle = " 年 龄 "
					dataIndex = "age"
					key = "age" /
					>
					<
					Column title = " 地 址 "
					dataIndex = "address"
					key = "address"












					{
						tag
					} > {
						tag
					} < /Tag>)}

					/
					>
					<
					Column title = " 标 签 "
					dataIndex = "tags"
					key = "tags"
					render = {
						tags => ( <
							span > {
								tags.map(tag => < Tag color = "blue"
									key =

									<
									/span>

								)
							}
							/> <
							Column title = "操作"
							key = "action"
							render = {
								(text, record) => ( <
									span >
									<
									a href = "javascript:;" > 编辑 < /a> <
									Divider type = "vertical" / >
									<
									a href = "javascript:;" > 删除 < /a> <
									/span>
								)
							}
							/> <
							/Table> <
							/div>
						);
					}


				}

				export default UserList;

import request from "../util/request";

export default {
	namespace: 'userList',
	state: {
		list: []
	},
	effects: {
		* initData(params, sagaEffects) {
			const {
				call,
				put
			} = sagaEffects;
			const url = "/ds/user/list";
			let data = yield call(request, url);
			yield put({
				type: "queryList",
				data: data
			});
		}
	},
	reducers: {
		queryList(state, result) {
			let data = [...result.data];
			return { //更新状态值
				list: data
			}
		}
	}


}

import React from 'react';
import {
	connect
} from 'dva';


import {
	Table,
	Divider,
	Tag,
	Pagination
} from 'antd';
const {
	Column
} = Table;
const namespace = 'userList';

@connect((state) => {
	return {
		data: state[namespace].list
	}
}, (dispatch) => {
	return {
		initData: () => {
			dispatch({
				type: namespace + "/initData"
			});
		}
	}
})
class UserList extends React.Component {

		componentDidMount() {
			this.props.initData();
		}

		render() {
				return ( <
					div >
					<
					Table dataSource = {
						this.props.data
					}
					pagination = {
						{
							position: "bottom",
							total: 500,
							pageSize: 10,
							defaultCurrent: 3
						}
					} >
					<
					Column title = " 姓 名 "
					dataIndex = "name"
					key = "name" /
					>

					<
					Columntitle = " 年 龄 "
					dataIndex = "age"
					key = "age" /
					>
					<
					Column title = " 地 址 "
					dataIndex = "address"
					key = "address"












					{
						tag
					} > {
						tag
					} < /Tag>)}

					/
					>
					<
					Column title = " 标 签 "
					dataIndex = "tags"
					key = "tags"
					render = {
						tags => ( <
							span > {
								tags.map(tag => < Tag color = "blue"
									key =

									<
									/span>

								)
							}
							/> <
							Column title = "操作"
							key = "action"
							render = {
								(text, record) => ( <
									span >
									<
									a href = "javascript:;" > 编辑 < /a> <
									Divider type = "vertical" / >
									<
									a href = "javascript:;" > 删除 < /a> <
									/span>
								)
							}
							/> <
							/Table> <
							/div>
						);
					}


				}

				export default UserList;

export default {
	'get /ds/list': function(req, res) {
		res.json({
			data: [1, 2, 3, 4],
			maxNum: 4
		});
	},
	'get /ds/user/list': function(req, res) {
		res.json([{
			key: '1',
			name: '张三1',
			age: 32,
			address: '上海市',
			tags: ['程序员', '帅气'],
		}, {
			key: '2',
			name: '李四',
			age: 42,
			address: '北京市',
			tags: ['屌丝'],
		}, {
			key: '3',
			name: '王五',
			age: 32,
			address: '杭州市',
			tags: ['高富帅', '富二代'],
		}]);
	}
}