AntDesign(React)学习-12 使用Table

AntDesign(Vue)版的Table中使用图片
https://www.cnblogs.com/zhaogaojian/p/11119762.html

之前在使用VUE版Table时，使用大图片时，某些列使用右fix会出现错乱问题（可能我使用的方法有误），试用React版看会有问题不

public 增加 images目录，放置两个图片1.jpg,2.jpg

pages下增加user\components目录，创建一个UserList.jsx

代码如下

import { Menu, Icon } from 'antd';
import React from 'react';
import router from 'umi/router';
import { Table, Divider, Tag } from 'antd';
const { Column, ColumnGroup } = Table;
class UserList extends React.Component { 
    constructor(props) {
        super(props);
      };
    data = [
        {
          key: '1',
          userName: 'John',
          age: 32,
          address: 'New York No. 1 Lake Park',
          tags: ['nice', 'developer'],
          avatar:'http://localhost:8000/images/1.jpg'
        },
        {
          key: '2',
          userName: 'Jim',
          age: 42,
          address: 'London No. 1 Lake Park',
          tags: ['loser'],
          avatar:'http://localhost:8000/images/2.jpg'
        }
      ];
render(){
    return (
    this.data} scroll={{ x: 1500, y: 300 }}>
        "姓名" dataIndex="userName" key="firstName" fixed="left"/>
        "年龄" dataIndex="age" key="age" width="200px" />
        "地址" dataIndex="address" key="address" width="300px" />
        <Column
        title="Tags"
        dataIndex="tags"
        key="tags"
        width="300px"
        render={tags => (
            
            {tags.map(tag => (
                "blue" key={tag}>
                {tag}
                
            ))}
            
        )}
        />
        <Column
        title="Action"
        key="action"
        width="600px"
        render={(text, record) => (
            
            Invite {record.lastName}
            "vertical" />
            Delete
            
        )}
        />
        <Column 
        title="头像" 
        dataIndex="avatar" 
        key="avatar" 
        width="300px"
        fixed="right"
        render={t => (
          
          {"100px",height:"100px"}}>}
          
      )}
        />
     
    );
        }
}
export default UserList;

在user.jsx下render里添加