vue+element循环输出对象下数组，且数组作为表格的列项

Question

vue+element循环输出对象下数组，且数组作为表格的列项

尝试使用for循环，但是不能在el-table-column外层拿到对象下数组信息

相关代码

数组结构如下：（props中的数据是要显示到表格中的数据）

 let obj = [{
            id:'1',
            name:'xxx',
            props:[
                {name:'名称',value:'192.168.0.0_1'},
                { name: 'ip', value: '192.168.0.0' },
                { name: '主机名称', value: 'host1' },
                { name: '状态', value: '上线' },
                { name: '资产编号', value: '101010' },
                { name: '描述', value: 'mmmms' },
            ]
        }, {
            id: '2',
            name: 'xxx2',
            props: [
                { name: '名称', value: '192.168.0.1_1' },
                { name: 'ip', value: '192.168.0.1' },
                { name: '主机名称', value: 'host2' },
                { name: '状态', value: '上线' },
                { name: '资产编号', value: '1010110' },
                { name: '描述', value: 'mmmms' },
            ]
        },
    ]

期望页面展示表格如下

名称 ip 主机名称 状态 资产编号
192.168.0.0_1 192.168.0.0 host1 上线 101010
192.168.0.1_1 192.168.0.1 host1 上线 101011

谢谢

Answer 1

这样写就行了

<el-table :data='obj'>
    <el-table-column v-for="(item, index) in obj[0].props" :label='item.name' :key='index'>
        <template slot-scope="scope">
            {{scope.row.props[index].value}}
        </template>
    </el-table-column>
</el-table>

Answer 2

可以自定义里面得内容
<el-table-column label="名称">
<template slot-scope="scope">{{ scope.row.props[0].name}}</template>
</el-table-column>

Answer 3

不懂111111111111111