vue iview 表格数据渲染

• Z时代
• 2024-03-03
• 分类：IT

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',
                    },
                ]
            },
        ],
    }
]

求解答！期望效果

回答：

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

回答：

提供一个扁平化的方法

data.flatMap(({voList,name})=>{
return voList.flatMap(({children,type})=>{
    return children.map(item=>{
        return {name,type,...item};
      })
    })
})

以上是 vue iview 表格数据渲染 的全部内容， 来源链接： utcz.com/p/936529.html