蚂蚁金服antd-Table-基本用法

 
  
/**
 * Created by mapbar_front on 2018/1/27.
 */

import React,{ Component } from 'react';
import { Table,Icon,Divider } from 'antd';

const data = [{
    key: 1,
    name: '天下',
    age: 18,
    hobby: '看书',
    address: '甘肃省',
},{
    key: 2,
    name: '晓晓',
    age: 22,
    hobby: '旅游',
    address: '华池县',
},{
    key: 3,
    name: '远远',
    age: 18,
    hobby: '远方',
    address: '武汉市',
},{
    key: 4,
    name: '青菜',
    age: 23,
    hobby: '跳舞',
    address: '黄冈市',
}]

const columns = [{
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
    render: text =>  { text } 
},{
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
},{
    title: '爱好',
    dataIndex: 'hobby',
    key: 'hobby',
},{
    title: '地址',
    dataIndex: 'address',
    key: 'address',

    // render: (text,record) =>{
    //     console.log('text',text); //text为地址的每一项,甘肃省、华池县、武汉市、黄冈市
    //     console.log('record',record);//record 为多个个对象,例如第一个对象为:{ name: '天下',age: 18,hobby: '看书',address: '甘肃省' }
    // }

    render: (text,record)=>(
        
            address-- { record.address }
            
            delete
            
            
                More actions 
            
        
    )
}]

class BasicUse extends Component {
    constructor(props) {
        super(props);
        this.state = {

        }
    }

    render() {
        return (
            

基本用法

) } } export default BasicUse;

你可能感兴趣的:(蚂蚁金服-antd-Table)