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

Menu