element表格处理问题！！！！！！！！！！！！！！！！！！！

Question

let thisData = [{
          "id": "10002",
          "name": "物品名称",
          "orderNum": 1,
          "code": "BG0001",
          "state": 1,
          "specification": "品牌规格",
          "unit": "计量单位",
          "classId": "10001",
          "className": "类别名称",
          "summaries": [
            {
              "depName": "技术部",
              "depId": "1002",
              "amount": 100,
              "price": 54.5,
              "sumTotal": 54500
            },
            {
              "depName": "产品部",
              "depId": "1002",
              "amount": 100,
              "price": 54.5,
              "sumTotal": 54500
            },
            {
              "depName": "研发部",
              "depId": "1002",
              "amount": 100,
              "price": 54.5,
              "sumTotal": 54500
            },
            {
              "depName": "企划部",
              "depId": "1002",
              "amount": 100,
              "price": 54.5,
              "sumTotal": 54500
            },
            {
              "depName": "发展部",
              "depId": "1002",
              "amount": 100,
              "price": 54.5,
              "sumTotal": 54500
            },
            {
              "depName": "创新部",
              "depId": "1002",
              "amount": 100,
              "price": 54.5,
              "sumTotal": 54500
            },
            {
              "depName": "办公室",
              "depId": "1002",
              "amount": 100,
              "price": 54.5,
              "sumTotal": 54500
            }
          ]
        },{
          "id": "10003",
          "name": "物品名称1",
          "orderNum": 1,
          "code": "BG0001",
          "state": 1,
          "specification": "品牌规格1",
          "unit": "计量单位1",
          "classId": "10001",
          "className": "类别名称1",
          "summaries": [
            {
              "depName": "技术部",
              "depId": "1002",
              "amount": 100,
              "price": 54.5,
              "sumTotal": 54500
            },
            {
              "depName": "产品部",
              "depId": "1002",
              "amount": 100,
              "price": 54.5,
              "sumTotal": 54500
            },
            {
              "depName": "研发部",
              "depId": "1002",
              "amount": 100,
              "price": 54.5,
              "sumTotal": 54500
            },
            {
              "depName": "企划部",
              "depId": "1002",
              "amount": 100,
              "price": 54.5,
              "sumTotal": 54500
            },
            {
              "depName": "发展部",
              "depId": "1002",
              "amount": 100,
              "price": 54.5,
              "sumTotal": 54500
            },
            {
              "depName": "创新部",
              "depId": "1002",
              "amount": 100,
              "price": 54.5,
              "sumTotal": 54500
            },
            {
              "depName": "办公室",
              "depId": "1002",
              "amount": 100,
              "price": 54.5,
              "sumTotal": 54500
            }
          ]
        }];

这是后台的数据

我要实现的效果如下图：

尝试了很多方法也没有实现，求大佬指点一下，谢谢！

Answer 1

<el-table :data="thisData" stripe border>
  <el-table-column prop="className" label="物品类别"></el-table-column>
  <el-table-column prop="name" label="物品名称"></el-table-column>
  <el-table-column prop="specification" label="品牌规格"></el-table-column>
  <el-table-column prop="unit" label="单位"></el-table-column>
  <el-table-column v-if="thisData[0]" v-for="(item,index) in (thisData[0] ? thisData[0].summaries : {})" :label="item.depName" :key="index">
      <el-table-column :prop="`summaries[${index}].amount`" label="数量"></el-table-column>
      <el-table-column :prop="`summaries[${index}].price`" label="单价"></el-table-column>
      <el-table-column :prop="`summaries[${index}].sumTotal`" label="金额"></el-table-column>
  </el-table-column>
</el-table>