reactjs antd代码示例：antd表格组件使用，以及在表格中展示图片示例（Avatar头像组件方式）

系统管理员 2024-02-17 13:36 78阅读 0赞

以下是一个使用Ant Design的React表格组件的示例，并在其中展示图片：

首先，确保你已经安装了Ant Design和React的相关依赖。然后，在你的项目中创建一个新文件，例如`TableWithImage.js`，并按照以下方式编写代码：

import React from 'react';
    import {
         Table, Avatar } from 'antd';
    
    const dataSource = [
      {
        
        key: '1',
        name: 'John Brown',
        avatar: '/path/to/image1.jpg', // 替换为实际的图片路径
      },
      {
        
        key: '2',
        name: 'Jim Green',
        avatar: '/path/to/image2.jpg', // 替换为实际的图片路径
      },
      {
        
        key: '3',
        name: 'Joe Black',
        avatar: '/path/to/image3.jpg', // 替换为实际的图片路径
      },
    ];
    
    const columns = [
      {
        
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
      },
      {
        
        title: 'Avatar',
        dataIndex: 'avatar',
        key: 'avatar',
        render: (avatar) => (
          <Avatar src={
        avatar} />
        ),
      },
    ];
    
    const TableWithImage = () => {
        
      return <Table dataSource={
        dataSource} columns={
        columns} />;
    };
    
    export default TableWithImage;

在上面的代码中，我们首先导入了所需的React、Ant Design的Table和Avatar组件。然后，我们定义了一个名为`dataSource`的数据源，其中包含了一些人员信息，包括名字和头像的路径。接下来，我们定义了一个名为`columns`的列配置，其中包含了两列：名称和头像。在头像列的`render`属性中，我们使用`Avatar`组件来展示图片。最后，我们创建了一个名为`TableWithImage`的函数组件，它返回了一个`Table`组件，并将之前定义的数据源和列配置传递给它。