【Vue】element表格处理问题！！！！！！！！！！！！！！！！！！！

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

这是后台的数据

我要实现的效果如下图：

【Vue】element表格处理问题！！！！！！！！！！！！！！！！！！！
尝试了很多方法也没有实现，求大佬指点一下，谢谢！

回答

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

以上是 【Vue】element表格处理问题！！！！！！！！！！！！！！！！！！！ 的全部内容， 来源链接： utcz.com/a/77432.html

回到顶部