element table表格根據(jù)特定數(shù)據(jù)渲染問題

我想根據(jù)后端給的數(shù)據(jù)來渲染element的table,但是數(shù)據(jù)需要做點(diǎn)處理才能達(dá)到我要的效果。

數(shù)據(jù)如下：

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
    }
  ]

element table如下

  <el-table :key='tableKey' :data="testList" border fit
        highlight-current-row
        style="width: 100%">
    <el-table-column  width="405">
      <template slot-scope="scope">
        <span> 這邊想動態(tài)生成</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="數(shù)量">
      <template slot-scope="scope">
        <span>{{scope.row.number}}</span>
      </template>
    </el-table-column>
  </el-table>
  

想要的效果

數(shù)據(jù)testList里面的attr里的name能夠和price,number同級渲染。但是attr里面的數(shù)據(jù)是不固定的，想動態(tài)生成。希望attr里每一條數(shù)據(jù)都可以獨(dú)自擁有一個<el-table-column></el-table-column>,求教！