elementUI multi-level header table needs to obtain the json data transmitted from the background. The first-level data is easy to obtain, but the second-level and third-level data can not be obtained accurately. What method can be used to obtain the values of the second-and third-level arrays?
the format of the data sent from the background is as follows
[
{
"sid": "4847b2667e31d9e2c3d9rwetfwgeryhrtu",
"sname": "CCCCC",
"note": "CCCCC",
"status": null,
"serverInter": [
{
"iid": "4174jyti2667e31d9e2c3d9r27275275272",
"inter": "ytiytiiyt",
"port": "yiytiy",
"introduction": "11112",
"dockproducts": "11112",
"sid": null,
"serverAddress": [
{
"aid": "56457654d9e2c3d9r27275275272346436",
"ip": "fdsaf",
"ipport": "sssss",
"iid": "4174jyti2667e31d9e2c3d9r27275275272"
},
{
"aid": "ewtwt1d9e2c3d9r27275275272etwtwt",
"ip": "uuuu",
"ipport": "uuuuu",
"iid": "4174jyti2667e31d9e2c3d9r27275275272"
}
]
},
{
"iid": "fwetewtwete31d9e2c3d9rwetfwgeryhr56474",
"inter": "ttttttt",
"port": "tttttt",
"introduction": "6666",
"dockproducts": "4444",
"sid": null,
"serverAddress": [
{
"aid": "6876587658d9e2c3d9rwetfwg7457454",
"ip": "ipip",
"ipport": "ipport",
"iid": "fwetewtwete31d9e2c3d9rwetfwgeryhr56474"
}
]
}
]
},
]the page code is as follows
<el-table border style="width: 100%; background: -sharp900" :data="tableData">
<el-table-column label="" type="index" fixed>
</el-table-column>
<el-table-column label="ID" prop="sid" fixed></el-table-column>
<el-table-column label="" prop="sname" align="center" width="120" fixed></el-table-column>
<el-table-column label="" align="center">
<el-table-column label="" prop="serverInter.inter" align="center" width="180">
<template slot-scope="scope">
<span v-for="(inter, interIndx) in scope.row" :key="interIndx">{{ inter }}</span>
<el-button size="small" class="el-icon-plus" @click="handleAddTop_address"></el-button>
<el-tree ref="expandMenuList" class="expand-tree"
v-if="isLoadingTree"
:data="addressTreeData"
node-key="id"
highlight-current
:props="defaultProps"
:expand-on-click-node="false"
:render-content="renderContent"
:default-expanded-keys="defaultExpandKeys"
@node-click="handleNodeClick"></el-tree>
</template>
</el-table-column>
<el-table-column label="" prop="port" align="center" width="180">
<template slot-scope="scope">
<el-button size="small" class="el-icon-plus" @click="handleAddTop_port"></el-button>
<el-tree ref="expandMenuList" class="expand-tree"
v-if="isLoadingTree"
:data="portTreeData"
node-key="id"
highlight-current
:props="defaultProps"
:expand-on-click-node="false"
:render-content="renderContent"
:default-expanded-keys="defaultExpandKeys"
@node-click="handleNodeClick"></el-tree>
</template>
</el-table-column>
<el-table-column label="" align="center">
<el-table-column label="" prop="localhost" align="center" width="200">
<template slot-scope="scope">
<!-- {{ scope.row }} -->
<el-button size="small" class="el-icon-plus" @click="handleAddTop_localhost"></el-button>
<el-tree ref="expandMenuList" class="expand-tree"
v-if="isLoadingTree"
:data="localhostTreeData"
node-key="id"
highlight-current
:props="defaultProps"
:expand-on-click-node="false"
:render-content="renderContent"
:default-expanded-keys="defaultExpandKeys"
@node-click="handleNodeClick"></el-tree>
</template>
</el-table-column>
<el-table-column label="" prop="introduction" align="center" width="180">
<template slot-scope="scope">
<!-- {{ scope.row }} -->
<el-button size="small" class="el-icon-plus" @click="handleAddTop_intro"></el-button>
<el-tree ref="expandMenuList" class="expand-tree"
v-if="isLoadingTree"
:data="introTreeData"
node-key="id"
highlight-current
:props="defaultProps"
:expand-on-click-node="false"
:render-content="renderContent"
:default-expanded-keys="defaultExpandKeys"
@node-click="handleNodeClick"></el-tree>
</template>
</el-table-column>
</el-table-column>
<el-table-column label="" prop="dockproducts" align="center" width="200">
<template slot-scope="scope">
<el-button size="small" class="el-icon-plus" @click="handleAddTop_products"></el-button>
<el-tree ref="expandMenuList" class="expand-tree"
v-if="isLoadingTree"
:data="productsTreeData"
node-key="id"
highlight-current
:props="defaultProps"
:expand-on-click-node="false"
:render-content="renderContent"
:default-expanded-keys="defaultExpandKeys"
@node-click="handleNodeClick"></el-tree>
</template>
</el-table-column>
</el-table-column>
<el-table-column label="" prop="note" align="center" fixed="right"></el-table-column>
</el-table>currently uses the data obtained by the scope.row rendering background, but this gets all the json and cannot get the specific attribute values in the json. The effect is as follows
