基于antd的表格使用react

/*
 * @Author: Qingshan_Chen
 * @Date: 2022-01-19 16:29:51
 * @Description: 遍历模拟数据，使用函数组件
 * @LastEditors: Qingshan_Chen
 * @LastEditTime: 2022-01-21 10:39:54
 * @FilePath: \app\src\pages\home\index.js
 */
import React, { useEffect, useState } from 'react';
import axios from "axios"; //引入axios请求数据方式
import Mock from 'mockjs' //es6语法

// ant组件
import {Table} from 'antd'
import 'antd/dist/antd.css' //这个是直接引入样式
function Index() {
  const [tableList,setList]=useState([])
  Mock.mock("http://localhost:3000/#/table/basic/dataSource2",function() {
      return Mock.mock({
          "code":200,
          "msg":"",
          "result":{
              "list|15":[{
                  "id|+1":1,
                  "userName":"@cname",
                  "sex|0-1":"1",
                  "status|1":[1,2,3,4,5],
                  "interest|1":[1,2,3,4,5],
                  "birthday":"2020-5-20",
                  "address":"@province",
                  "time":"09:00"
              }],
              "page":1,
              "page_size":1,
              "total":100
          }
      })
  })
     useEffect(function(){
      axios.get("http://localhost:3000/#/table/basic/dataSource2")//接口地址与拦截地址要一致
      .then((res)=>{
        console.log('res',res.data.result); //可以通过res.data.result获取数据
        setList(res.data.result.list) //数组遍历
        })
     },[])//必须加空数组，否则无限循环数据请求
     
    //  这里直接写表头属性字段名 ，表名+属性名
    const columns = [
      {
        title: '姓名',
        dataIndex: 'userName',
        key:'userName',
      },
      {
        title: '生日',
        dataIndex: 'birthday',
        key:'birthday',
      },
      {
        title: '地址',
        dataIndex: 'address',
        key:'address',
      }
    ];
  return (
    <div>
    <Table dataSource={tableList} key={tableList.id} columns={columns} />
    </div>
  );
}
export default Index