iview table如何接受嵌套的数组对象问题

最新推荐文章于 2022-07-21 11:25:37 发布

citrono

最新推荐文章于 2022-07-21 11:25:37 发布

阅读量2.1k

点赞数 3

分类专栏： vue/iview 文章标签： iview

本文链接：https://blog.csdn.net/unu_citrono/article/details/93871527

版权

本文探讨了在iview table中处理从后台获取的嵌套数组对象的问题，特别是当需要显示如gender这样的额外列时。常规方法无法解决这个问题，通过使用render函数，可以成功实现无需key值的解决方案。

摘要由CSDN通过智能技术生成

如图为iview table的一般使用方法及列对象的api

columns1: [
    {
        title: 'Name',
        key: 'name'
    },
    {
        title: 'Age',
        key: 'age'
    },
    {
        title: 'Address',
        key: 'address'
    }
],
data1: [
    {
        name: 'John Brown',
        age: 18,
        address: 'New York No. 1 Lake Park',
        date: '2016-10-03'
    },
    {
        name: 'Jim Green',
        age: 24,
        address: 'London No. 1 Lake Park',
        date: '2016-10-01'
    }
]

但是，如果从后台获取到的数据是这样的

[
    {
       name: "John Brown",
       age: 18,
       address: "New York No. 1 Lake Park",
       details: {
         gender: "男"
       }
     },
     {
       name: "Jim Green",
       age: 24,
       address: "London No. 1 Lake Pa