美文网首页让前端飞程序员
antd的Table组件的column处理后台返回的数组

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

作者: 废柴码农 | 来源:发表于2019-01-24 00:31 被阅读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"
          },
        // ........
    ]
    

    相关文章

      网友评论

        本文标题:antd的Table组件的column处理后台返回的数组

        本文链接:https://www.haomeiwen.com/subject/jwuejqtx.html