表格里怎么渲染后端传来URL的图标

后台操作系统里面经常会出现表格,为了丰富页面表格里面有小图标需要渲染也是很常见的一种操作。
但是图标毕竟和文字不同,怎么渲染是个问题。
我遇到的情况是后端直接返回一个URL地址,我需要在前端设置一下让这个获取到的URL变为图标展示出来。
表格和列表的渲染方法还有小小的不同,我们先来说说表格:

render(){
    // 解构数据
    let { currencyList } = this.state;
    console.log("我是解构的数据",currencyList)
    //页面表格表头
    const columns = [{
      title: 'Code',
      dataIndex: 'uniqueCode',
      key: 'uniqueCode',
      width: 60,
      align: 'center',
      // 是否显示排序
      sorter: true,
    },{
      title: 'icon',
      dataIndex: 'icon',
      key: 'icon',
      width: 60,
      align: 'center',
      // 用以渲染图标
      render: (text) => (
        
// 设置图标的大小样式
) }];

在表头里面这样设置之后,渲染数据源的时候,直接渲染就可以获取到网址设置的图标。
大致代码如下:

return(
   
)

列表中的图标设置和表格中的略有不同,我这个是因为数据长度未知,所以用map循环写的,代码如下:

   // 循环获取数据
    const { accountsList } = this.state;
    //设置初始值为空
    let list = [];
    //使用map循环渲染页面列表
    accountsList.map((account) => {
     // 将所有数据push到数组list中
      list.push(
        // 栅格化布局
        
          
// 设置图标大小和样式
// 分割线 ) })

你可能感兴趣的:(表格里怎么渲染后端传来URL的图标)