让前端飞程序员

antd的Table组件的column处理后台返回的数组

2019-01-24  本文已影响61人  废柴码农

用antd的table组件接受后台的数据,在处理后台返回的数据中,column参数如下:

const column=[
{
        title: "城市管理员",
        dataIndex: "city_admins",  //后台将参数信息放在了数组里面,如果不做处理会报错
        key: "city_admins"
      },
{
        title: "城市开通时间",
        dataIndex: "open_time",
        key: "open_time"
      },
   //.....
]

其中对于城市管理员后台给我返回的参数是个数组,不是个字符串,直接这样写会报错,后台返回数据如下:


对象包数组.png

而column只能解析字符串,所以修改后的代码如下:

const column=[
      {
        title: "城市管理员",
        dataIndex: "city_admins",
        key: "city_admins",  
        //由于是数组不能直接渲染
        render(arr){
           return arr.map(item=>{  
               return item.user_name;   //使其返回数组中的一项
           }).join(",");   //因为数据中user_name可能是两个人所以用逗号分隔开
        }
      },
      {
        title: "城市开通时间",
        dataIndex: "open_time",
        key: "open_time"
      },
    // ........
]
上一篇下一篇

猜你喜欢

热点阅读