I want to render the table, of element based on the data given by the backend, but the data needs to be processed to achieve the desired effect.
< H2 > data are as follows: < / H2 >testList: [
{
attr: [{
name: "xu1",
id: 2
}, {
name: "xu2",
id: 3
}],
price: 100,
number: 20
}, {
attr: [{
name: "xu4",
id: 4
}, {
name: "xu5",
id: 5
}],
price: 200,
number: 10
}
]
< H2 > element table is as follows < / H2 >
<el-table :key="tableKey" :data="testList" border fit
highlight-current-row
style="width: 100%">
<el-table-column width="405">
<template slot-scope="scope">
<span> </span>
</template>
</el-table-column>
<el-table-column width="auto" align="center" label="">
<template slot-scope="scope">
<span>{{scope.row.price}}</span>
</template>
</el-table-column>
<el-table-column width="auto" align="center" label="">
<template slot-scope="scope">
<span>{{scope.row.number}}</span>
</template>
</el-table-column>
</el-table>
< H2 > desired effect < / H2 >
name in attr in data testList can be rendered at the same level as price,number. But the data in attr is not fixed and wants to be generated dynamically. Hope that each piece of data in attr can own a < el-table-column > < / el-table-column >, ask for advice!