Terryzjh 2021-09-23 18:45 采纳率: 100%
浏览 203
已结题

react如何将后端给的数据渲染至表格中(后端的接口字段我放在评论区了)


import { Table } from "antd";
import React from "react";

export class Tables extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    const columns = [
      {
        title: '姓名',
        dataIndex: 'name',
        align: 'center',
      },
      {
        title: '电话',
        dataIndex: 'tel',
        align: 'center',
      },
      {
        title: '地址',
        dataIndex: 'address',
        align: 'center',
      },
      {
        title: '邮箱',
        dataIndex: 'email',
        align: 'center',
        render: (text,r) => <a href={"www.baidu.com"+r.key} target="_blank">{text}</a>,
      },
    ];

    const data = [
      {
        key: '1',
        name: 'John Brown',
        tel: '10086',
        address: '成都',
        email: '103685334@qq.com',
      },
      {
        key: '2',
        name: 'Jim Green',
        tel: '1008611',
        address: '上海',
        email: '',
      },
      {
        key: '3',
        name: 'Joe Black',
        tel: '10001',
        address: '深圳',
        email: '',
      },
    ];
    return (
      <Table
        columns={columns}
        dataSource={data}
        bordered
      />
    )
  }
}
  • 写回答

2条回答 默认 最新

查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 10月4日
  • 已采纳回答 9月26日
  • 创建了问题 9月23日

悬赏问题

  • ¥15 apk可以在模拟器上正常安装使用,但是手机上无法正常安装
  • ¥15 office打开卡退(新电脑重装office系统后)
  • ¥300 FLUENT 火箭发动机燃烧EDC仿真
  • ¥15 【Hadoop 问题】Hadoop编译所遇问题hadoop-common: make failed with error code 2
  • ¥15 vb6.0+webbrowser无法加载某个网页求解
  • ¥15 RPA财务机器人采购付款流程
  • ¥15 计算机图形多边形及三次样条曲线绘制
  • ¥15 根据protues画的图用keil写程序
  • ¥200 如何使用postGis实现最短领规划?
  • ¥15 pyinstaller打包错误