如何在 ant 的table中实现图片的渲染

如何在 ant 的table中实现图片的渲染

在使用react 的蚂蚁金服的ui库的时候，，平时用到的比较比较多的就是table组件，但是在ant官网上面，并没有在后台调取接口获取数据后，，如何将后台的http://lkjlkjlkj.jpg图片渲染到每一行的例子。。只有一个render的方法。。。查阅了一些资料，作为一个不是很资深的前端来说，忙活了一上午，。实现了这个功能。。。记录一下。。。

这里是table的使用

<Table
       selectHandle={false}
       onCtrlClick={ this.tableAction }
       header={this.tableHeader()}
       pagination={ true }
       scroll = {{y:450}}
       pageSize={10}
       getpage={this.getpage}
       currentPage={this.state.currentPage}
       data={this.state.dataSource}
       checkChang={this.checkChang} />

table中theader的渲染

tableHeader = () => {
      return [{
          dataIndex: '',
          title: 'Logo',
          width: 150,
          key : 'image',
          render:(record) => {
                  return <img src={record.image} alt="" style={{width:'5    0px',height:'50px',borderRadius:'50%'}}/>
          }
      },{
          dataIndex: 'name',
          title: '名称',
          width: 150,
          key : 'name'
      },{
          dataIndex: 'label',
          title: '标签',
          width: 150,
          key : 'label'
      },{
          dataIndex: 'collectCount',
          title: '关注数',
          width: 150,
          key : 'collectCount'
      }, {
          dataIndex: 'topicCount',
          title: '帖子数',
          width: 150,
          key : 'topicCount'
      },{
          dataIndex: 'inTime',
          title: '创建时间',
          width: 150,
          key : 'inTime'
      }]
  }

利用table 中 render的属性，，，将LOGO在tableHeader中render return一个img 标签，并将src={ record.image }
图片就正确的渲染到你的table中了。。拿走 不谢～～～