undefinedfix
Sign in

The element table deals with the problem ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~!!!!!!!!!!!!!!!!!!!

alex edited in Sat, 24 Sep 2022
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
            }
          ]
        }];

This is the data in the background

The effect I want to achieve is as follows:

Tried a lot of methods, but also did not achieve, ask for advice, thank you!

1 Replies
omercix44
commented on Sat, 24 Sep 2022
<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>