初识react（12）——如何在 基于antd的表格中 渲染 接口获取的数据

方法一：

代码如下：

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

import http from "../../server"  //这里是我跨域所用到的

export default class School extends Component {

    state = {   
        data:[]
    };

    //发送get请求获取数据
    async getList(){
        const res = await http.get('/admin/school/xxx','');
        console.log(res);
        if(res.status == 200){
            console.log(res.data.data);
            const data = res.data.data;
            this.setState({
                data:data
            })
        }
    }

    componentDidMount() {
        this.getList();
    }

    render(){
        //定义表头，一般放在render()中
        const columns = [
            {
                title:'编号',         //列名称
                dataIndex:'id',      //数据源的字段名
                key:'id'
            },
            {
                title:'名称',
                dataIndex:'sName',
                key:'name'
            },
            {
                title: '操作',
                key: 'operation',
                render: (text, record) => (
                    <span>
                        <a>see</a>
                        <a style={{color: '#009688'}}>Edit</a>
                        <a style={{color: 'red'}}>Delete</a>
                    </span>
                ),
            }
        ];

        return(
            <div className='main'>
                <div className='all-content'>
                {/*这几个class是我为了搜索框等的布局设置的，不影响表格。大家根据自己情况设置*/}
                    <div className='content'>
                        <div className='table'>
                            <Table columns={columns} dataSource={this.state.data} />
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

效果图如下：

方法二：

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

import http from "../../server"  //这里是我跨域所用到的

const { Column} = Table;

export default class School extends Component {

    state = {
        data:[]
    };
    
    //发送get请求获取数据
    async getList(){
        const res = await http.get('/admin/school/xxx','');
        console.log(res);
        if(res.status == 200){
            console.log(res.data.data);
            const data = res.data.data;
            this.setState({
                data:data
            })
        }
    }

    componentDidMount() {
        this.getList();
    }

    render(){
     
        return(
            <div className='main'>

                <div className='all-content'>
                 {/*这几个class是我为了搜索框等的布局设置的，不影响表格。大家根据自己情况设置*/}                  
                    <div className='content'>
                        <div className='table'>                            
                            <Table dataSource={this.state.data}>
                                <Column title="编号" dataIndex="id" key="id" />
                                <Column title="name" dataIndex="sName" key="name" />
                                <Column
                                    title="Action"
                                    key="action"
                                    render={(text, record) => (
                                        <Space size="middle">
                                            <a>see</a>
                                            <a style={{color:'#009688'}}>Edit</a>
                                            <a style={{color:'red'}}>Delete</a>
                                        </Space>
                                    )}
                                />
                            </Table>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

效果图如下：

antd的表格有很多种，不同表格代码也就有不同 能渲染出接口获取的数据 的写法，根据自己喜好选择即可。

上述代码我用到了跨域和axios的封装，想了解的可以看我下面两个博客：

初识react（6）——多种方法实现跨域请求

初识react（9）——实现 axios 的封装使用