对于一个订单多个不同商品，table数据显示及如何导出excel？关联Vue 关联element-ui

背景：商城类型后台，后台展示订单，之约定为一个订单如果包含多个商品，则商品为数组形式传，前端对商品数组进行遍历显示

前端用的是

vue+Element-ui

返回数据：

显示效果：

代码部分：

<el-table-column label="订单所对应的商品" width="500" align="center">
  <template slot-scope="scope">
    <div v-for="(item, index ) in scope.row.orderProVos" :key="index">
      <div class="orderprovos-box">
        <div style="width:30%;">
          <img style="width:98%" :src="item.fileUrl" alt="">
        </div>
        <div style="width:68%;">
          <p>商品名称：{{ item.productName }}</p>
          <p>单价:￥{{ item.productOriginal }}&nbsp;数量：{{ item.count }}</p>
          <p>规格：{{ item.specValues }}</p>
        </div>
      </div>
    </div>
  </template>
</el-table-column>

这种情况导致 订单列表导出Excel时订单里面的商品相关信息不好获取，请问这边应该如何处理才能对于table数据导出Excel方便些～