Ant Design表格插入图片

首先看效果，大体效果如下：

首先引入组件库：

//引入connect 用于连接UI组件与redux
import { connect } from 'react-redux'
import React, { Component } from 'react'
import './index.css'
import { Button, Input, DatePicker, Tabs, Table } from 'antd';
import { ShoppingFilled, SearchOutlined, LoginOutlined, SettingFilled, DeleteFilled, DownSquareFilled } from '@ant-design/icons';
//引入axios
import axios from 'axios'

Ant Design有一个表格组件（Table），Table中column属性代表表格的表头信息，dataSource代表需要渲染的数据：

<Table 
	scroll={{ y: 160 }} 
	rowSelection={rowSelection} 
	columns={columns} 
	dataSource={this.state.showList} />

column信息需要写在组件外：

const columns = [
  {
    title: '商品信息',
    dataIndex: 'tupian',
    width: 130,
    render: (record) => <img src={record} alt="" width="100px" />
  },
  {
    title: '',
    dataIndex: 'xinxi',
    width: 300,
  },
  {
    title: '价格',
    dataIndex: 'jiage',
  },
  {
    title: '库存',
    dataIndex: 'kucun',
  },
  {
    title: '销量',
    dataIndex: 'xiaoliang',
  },
  {
    title: '标签',
    dataIndex: 'biaoqian',
    width: 110,
  },
  {
    title: '折扣力度',
    dataIndex: 'zhekou',
    width: 110,
  },
  {
    title: '操作',
    dataIndex: 'caozuo',
    key: 'x',
    render: () => <a>删除</a>,
  },
];

下面是需要渲染的数据处理：

state = {
    selectedRowKeys: [4], // Check here to configure the default column
    goodsList: [],
    showList: [],
  };

  componentDidMount() {
    axios.get('http://localhost:8888/goods/list', {
      params: {
        current: 20
      }
    }).then(res => {
      this.setState({ goodsList: res.data })
      this.getShowList()
      console.log(this.state.goodsList);
    }, err => {
      console.log(err);
    })
  }

  getShowList() {
    let showList = this.state.goodsList.list
    showList = showList.reduce((total, item, index, arr) => {
      total.push({
        key: item.goods_id,
        tupian: item.img_big_logo,
        xinxi: item.title,
        jiage: item.current_price,
        kucun: item.goods_number,
        xiaoliang: item.goods_number,
        biaoqian: item.category,
        zhekou: item.sale_type,
      })
      return total
    }, [])
    this.setState({ showList: showList })
  }