element table表格根据特定数据渲染问题

Question

我想根据后端给的数据来渲染element的table,但是数据需要做点处理才能达到我要的效果。

数据如下：

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> 这边想动态生成</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>
  

想要的效果

数据testList里面的attr里的name能够和price,number同级渲染。但是attr里面的数据是不固定的，想动态生成。希望attr里每一条数据都可以独自拥有一个<el-table-column></el-table-column>,求教！

Answer 1

想这样？codepen测试地址