Element table tables render problems based on specific data

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!


is that what you want? codepen test address

clipboard.png

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e9e444-19c6.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e9e444-19c6.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?