element ui 纵向表头呈现数据

项目背景：为了方便，有关部门对业务数据，更直观的分析。需要对表格数据进行纵向显示。

效果图：

思路：

•    如何进行格式转换，分析横向表头的格式，(label、prop),纵向需要的数据格式，构建数据。（可参考，网上其他文章）
• 如何将地址，转换为图片，需要进行逐一转换。

实现过程

• 实体类

        

@Data
@ToString
@EqualsAndHashCode
@NoArgsConstructor
@Accessors(chain = true)
@TableName("bs_goods_plan_dtl")
public class BsGoodsPlanDtl implements Serializable {

    private static final long serialVersionUID=1L;


    /** UUID */
    @TableId(value = "uuid", type = IdType.ASSIGN_UUID)
    private String uuid;

    /** 商品图片url */
    @Excel(name = "商品图片")
    private String url;

    /** 商品条码 */
    @Excel(name = "商品条码")
    private String code2;

    /** 商品名称 */
    @Excel(name = "商品名称")
    private String name;

    /** 子类代码 */
    @Excel(name = "子类代码")
    private String dscode;

    /** 子类名称 */
    @Excel(name = "子类名称")
    private String dsname;


    /** 零售价 */
    @Excel(name = "零售价")
    private String rtlprc;

    /** 上市天数 */
    @Excel(name = "上市天数")
    private String storefin;

    /** 库存店数量 */
    @Excel(name = "库存店数量")
    private String keepstore;

    /** 总仓可用 */
    @Excel(name = "总仓可用")
    private String thewrh;

    /** 月单店日均销 */
    @Excel(name = "月单店日均销")
    private BigDecimal msalavg;

    /** 近1个月销售量 */
    @Excel(name = "近1个月销售量")
    private String saleMonthSum;

    /** 近1个月销售额 */
    @Excel(name = "近1个月销售额")
    private String saleMonthMoney;

    /** 近3个月销售量 */
    @Excel(name = "近3个月销售量")
    private String threeMonthSaleSum;

    /** 近3个月销售额 */
    @Excel(name = "近3个月销售额")
    private String threeMonthSaleMoney;

    /** 近6个月销售量 */
    @Excel(name = "近6个月销售量")
    private String sixMonthSaleSum;

    /** 近6个月销售额 */
    @Excel(name = "近6个月销售额")
    private String sixMonthSaleMoney;

    /** 近12个月销售量 */
    @Excel(name = "近12个月销售量")
    private String yearMonthSaleSum;

    /** 近12个月销售额 */
    @Excel(name = "近12个月销售额")
    private String yearMonthSaleMoney;

    /** 单SKU月销MAX值（销量） */
    @Excel(name = "单SKU月销MAX值")
    private BigDecimal qtymax;

    /** 单SKU月销MAX值（销额） */
    @Excel(name = "单SKU月销MAX值")
    private BigDecimal amtmax;

    /** 商品状态名称 */
    @Excel(name = "商品状态名称")
    private String goodsbusgate;

    /** 花都总仓可用(昨日) */
    @Excel(name = "花都总仓可用(昨日)")
    private BigDecimal yesterwrh;

    /** 花都总仓在途 */
    @Excel(name = "花都总仓在途")
    private String onway;

    /** 新旧包装 */
    @Excel(name = "新旧包装")
    private String packtype;

    /** 销售标签 */
    @Excel(name = "销售标签")
    private String phbqno;

    /** 更新时间 */
    @Excel(name = "更新时间" , width = 30, dateFormat = "yyyy-MM-dd")
    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
    private Date updateTime;

    /** 更新人 */
    private String updateBy;

    @TableField(exist = false)
    private List<String> img;



}

• Java后端接口（Controller层）

/** 数据查询
     * @Author YQ
     * @Description //TODO Administrator
     * @Date 17:23 2023/10/17
     * @Param [obj]
     * @return 
     **/ 
@GetMapping("/goodsPlanList")
    public TableDataInfo goodsPlanList(BsGoodsPlanDtl obj)
    {
        startPage();
        List<BsGoodsPlanDtl>  list = queryGoodsPlanList(obj);
        TableDataInfo dataTable = getDataTable(list);
        return dataTable;
    }

    private  List<BsGoodsPlanDtl> queryGoodsPlanList(BsGoodsPlanDtl obj){
        LambdaQueryWrapper<BsGoodsPlanDtl> lqw = new LambdaQueryWrapper<>();
       
        if (StringUtils.isNotBlank(obj.getCode2())){
            lqw.eq(BsGoodsPlanDtl::getCode2 ,obj.getCode2());
        }
        if (StringUtils.isNotBlank(obj.getDscode())){
            lqw.eq(BsGoodsPlanDtl::getDscode ,obj.getDscode());
        }
        if (StringUtils.isNotBlank(obj.getName())){
            lqw.like(BsGoodsPlanDtl::getName ,obj.getName());
        }
        if (StringUtils.isNotBlank(obj.getDsname())){
            lqw.like(BsGoodsPlanDtl::getDsname ,obj.getDsname());
        }
        if (StringUtils.isNotBlank(obj.getStorefin())){
            lqw.eq(BsGoodsPlanDtl::getStorefin ,obj.getStorefin());
        }
        if (StringUtils.isNotBlank(obj.getKeepstore())){
            lqw.eq(BsGoodsPlanDtl::getKeepstore ,obj.getKeepstore());
        }
        if (StringUtils.isNotBlank(obj.getThewrh())){
            lqw.eq(BsGoodsPlanDtl::getThewrh ,obj.getThewrh());
        }
        if (StringUtils.isNotBlank(obj.getGoodsbusgate())){
            lqw.eq(BsGoodsPlanDtl::getGoodsbusgate ,obj.getGoodsbusgate());
        }
        if (StringUtils.isNotBlank(obj.getPhbqno())){
            lqw.eq(BsGoodsPlanDtl::getPhbqno ,obj.getPhbqno());
        }

        lqw.orderByAsc(BsGoodsPlanDtl::getUrl);
        List<BsGoodsPlanDtl> list = iBsGoodsPlanDtlservice.list(lqw);
        list.forEach(x ->{
            if(StringUtils.isNotEmpty(x.getUrl())){
                List<String> imageList = new ArrayList<>();
                imageList.add(x.getUrl());
                x.setImg(imageList);
            }
        });
        return  list;
    }

查出数据呈现如下

• 后台接口提供数据，返回前端对数据，格式进行转换处理。

        定义头部数组

data() {

    return {
          headers:[
        {
          prop:'url',
          label:'商品图片',
        },
        {
          prop:'code2',
          label:'商品条码',
        },
        {
          prop:'name',
          label:'商品名称',
        },
        {
          prop:'dscode',
          label:'子类代码',
        },
        .......
    ],
  }
}

      2. 转换需要的格式

核心代码
//处理数据
dealData(goods){
      goods.forEach((item,index) =>{
        var goodsItem = {url:item.url,
          code2:item.code2,
          name:item.name,
          dscode:item.dscode,
          dsname:item.dsname,
          rtlprc:item.rtlprc,
         ......
        }
          this.tableData.push(goodsItem);
      })
      this.tableHeaderDeal = this.getHeaders();
      this.tableDataDel =this.getValues();
    },

 //处理表头
 getHeaders() {   
    return this.tableData.reduce((pre, cur, index) => pre.concat(`value${index}`),             ['title'])
    },
//遍历表头，赋上对应的值
getValues() {
      return this.headers.map(item => {
      return this.tableData.reduce((pre, cur, index) => Object.assign(pre, {['value' + index]: cur[item.prop]}), {'title': item.label,});
      });
 },

  3. 处理后的数据

        header数据 --->最终数据（一行呈现，对应的数据）

  

      4.列表展示

<!-- 由于需要对第一行图片进行，单独处理，所以就把所有列都提出来进行处理-->
<!-- 列表 -->
<el-table-column
          v-for="(item, index) in tableHeaderDeal"
          :key="index"
          :prop="item"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.title == '商品图片'">
              <span v-if="index == 0">
                {{scope.row.title}}
              </span>

                   <span v-else-if="index == 1">
                     <span v-if="scope.row.value0 != null && scope.row.value0.length > 0">
                           <el-image
                             style="width: 100px; height: 100px;box-shadow: 5px 5px 5px #020000;"
                             :src="scope.row.value0"
                             :preview-src-list="dealPicList(scope.row.value0)"
                           >
                           </el-image>
                     </span>
                     <span v-else>
                        <el-tag size="medium" type="danger">未上传</el-tag>
                     </span>
                </span>
                <span v-else-if="index == 2">
                   <span v-if="scope.row.value1 != null && scope.row.value1.length > 0">
                           <el-image
                             style="width: 100px; height: 100px;box-shadow: 5px 5px 5px #020000;"
                             :src="scope.row.value1"
                             :preview-src-list="dealPicList(scope.row.value1)"
                           >
                           </el-image>
                     </span>
                     <span v-else>
                        <el-tag size="medium" type="danger">未上传</el-tag>
                     </span>
                </span>
                ......

                </span>
         <span v-else>
              <span v-if="index == 0">
                {{scope.row.title}}
              </span>
              <span v-else-if="index == 1">
                 {{scope.row.value0}}
              </span>
              <span v-else-if="index == 2">
                 {{scope.row.value1}}
              </span>
              <span v-else-if="index == 3">
                 {{scope.row.value2}}
              </span>
              <span v-else-if="index == 4">
                 {{scope.row.value3}}
              </span>
              <span v-else-if="index == 5">
                 {{scope.row.value4}}
              </span>
              <span v-else-if="index == 6">
                 {{scope.row.value5}}
              </span>
              <span v-else-if="index == 7">
                 {{scope.row.value6}}
              </span>
              <span v-else-if="index == 8">
                 {{scope.row.value7}}
              </span>
              <span v-else-if="index == 9">
                 {{scope.row.value8}}
              </span>
              <span v-else-if="index == 10">
                 {{scope.row.value9}}
              </span>
              <span v-else-if="index == 11">
                 {{scope.row.value10}}
              </span>
              <span v-else-if="index == 12">
                 {{scope.row.value11}}
              </span>
              <span v-else-if="index == 13">
                 {{scope.row.value12}}
              </span>
              <span v-else-if="index == 14">
                 {{scope.row.value13}}
              </span>
              <span v-else-if="index == 15">
                 {{scope.row.value14}}
              </span>
              <span v-else-if="index == 16">
                 {{scope.row.value15}}
              </span>
              <span v-else-if="index == 17">
                 {{scope.row.value16}}
              </span>
              <span v-else-if="index == 18">
                 {{scope.row.value17}}
              </span>
              <span v-else-if="index == 19">
                 {{scope.row.value18}}
              </span>
              <span v-else-if="index == 20">
                 {{scope.row.value19}}
              </span>
            </span>
          </template>
        </el-table-column>

 5.如果不需要对图片进行处理的代码

 <el-table
      style="width: 100%"
      :data="getValues"
      :show-header="false"
    >
      <el-table-column
        v-for="(item, index) in getHeaders"
        :key="index"
        :prop="item"
      >
      </el-table-column>
</el-table>