vue iview 表格数据渲染

iview 数据结构为这样的数据怎样渲染到表格中

<Table :columns="columns" :data="data"></Table>

let data = [
    {
        name: "名称1",
        voList: [
            {
                type: '类型1',
                children: [
                    {
                        item: "1111",
                        value: "6.98",
                        standard: '8',
                        time: '11.11',
                    },
                    {
                        item: "2222",
                        value: "6.98",
                        standard: '8',
                        time: '11.12',
                    },
                    {
                        item: "3333",
                        value: "6.98",
                        standard: '8',
                        time: '11.13',
                    },
                ]
            },
            {
                type: '类型2',
                children: [
                    {
                        item: "1111",
                        value: "6.98",
                        standard: '8',
                        time: '11.11',
                    },
                    {
                        item: "2222",
                        value: "6.98",
                        standard: '8',
                        time: '11.12',
                    },
                    {
                        item: "3333",
                        value: "6.98",
                        standard: '8',
                        time: '11.13',
                    },
                ]
            },
            {
                type: '类型3',
                children: [
                    {
                        item: "1111",
                        value: "6.98",
                        standard: '8',
                        time: '11.11',
                    },
                    {
                        item: "2222",
                        value: "6.98",
                        standard: '8',
                        time: '11.12',
                    },
                    {
                        item: "3333",
                        value: "6.98",
                        standard: '8',
                        time: '11.13',
                    },
                ]
            },
        ],
    },
    {
        name: "名称2",
        voList: [
            {
                type: '类型1',
                children: [
                    {
                        item: "1111",
                        value: "6.98",
                        standard: '8',
                        time: '11.11',
                    },
                    {
                        item: "2222",
                        value: "6.98",
                        standard: '8',
                        time: '11.12',
                    },
                    {
                        item: "3333",
                        value: "6.98",
                        standard: '8',
                        time: '11.13',
                    },
                ]
            },
            {
                type: '类型2',
                children: [
                    {
                        item: "1111",
                        value: "6.98",
                        standard: '8',
                        time: '11.11',
                    },
                    {
                        item: "2222",
                        value: "6.98",
                        standard: '8',
                        time: '11.12',
                    },
                    {
                        item: "3333",
                        value: "6.98",
                        standard: '8',
                        time: '11.13',
                    },
                ]
            },
            {
                type: '类型3',
                children: [
                    {
                        item: "1111",
                        value: "6.98",
                        standard: '8',
                        time: '11.11',
                    },
                    {
                        item: "2222",
                        value: "6.98",
                        standard: '8',
                        time: '11.12',
                    },
                    {
                        item: "3333",
                        value: "6.98",
                        standard: '8',
                        time: '11.13',
                    },
                ]
            },
        ],
    }
]

求解答!期望效果

阅读 2.5k
2 个回答

官网示例
可以参考上面这个链接里面的,iview官网上有行/列合并的例子。

提供一个扁平化的方法

data.flatMap(({voList,name})=>{
return voList.flatMap(({children,type})=>{
    return children.map(item=>{
        return {name,type,...item};
      })
    })
})
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题