antdesgin table斑马线_React中使用Ant Table组件

一、Ant Design of React

二、建立webpack工程

webpack+react demo下载

项目的启动，

三、简单配置

1.工程下载下来之后，在src目录下新建目录“table”，新建app.js，内容如下。

import React from 'react';

import ReactDOM from'react-dom';

import ExampleTable from'./ExampleTable';

import'antd/dist/antd.css';

ReactDOM.render

(,

document.body

);

注：记住引入antd.css， 否则Table组件无法正常显示。

2.新建ExampleTable.js， 内容如下。

import { Table } from 'antd';

import React from'react';

class ExampleTable extends React.Component {

constructor(props) {

super(props);this.showCurRowMessage = this.showCurRowMessage.bind(this);

}

componentDidMount() {

}//展示当前行信息

showCurRowMessage(record){

alert("key:"+record.key + " name:"+record.name + " age:" + record.age + " address:" + record.address + " description:" +record.description);

}

render() {

let self= this;

const columns=[

{ title:'姓名', dataIndex: 'name', key: 'name'},

{ title:'年龄', dataIndex: 'age', key: 'age', render: (text, record, index) => (Math.floor(record.age/10))*10+"多岁"},

{ title: '住址', dataIndex: 'address', key: 'address'},

{ title:'描述', dataIndex: 'description', key: 'description'},

{ title:'操作', dataIndex: '', key: 'operation', render: function(text, record, index) {

alert(tex