【vue】Element UI实现表格表头纵向显示

element实现表格表头纵向显示 我们正常使用Element UI写表格的时候， 标签里面都是纵向的。那么我们的需求有时候会要求行列转换，那么来看看咋整吧....（想起了当年的python作业...虽说整出来后觉得简单，但做的时候还是浪费了很多时间，好在开源yyds，找到了解决办法。）

下面参考来自：http://www.manongjc.com/detail/18-mjmvpumszjdxfut.html

展示效果

估计到这，你们也就知道怎么弄了....

---

下面是结合我自身的项目的总结

项目中的数据是通过接口来的，那么其实和上面的页差不多，就是替换下数据。但是后端传给我的借口里面还有列的名字，因此需要做一点小改动。

接口处理如下：

    getTotal() {
      this.$axios
        .get(`${CUSTOMER_URL}/api/statistics/question/inventory`)
        .then(res => {
          if (res.data.code == 0) {
            this.tableData = res.data.data.questionInventoryVOList.map(item => {
              return item;   //这里返回所有数据
            });
            let arr = res.data.data.questionInventoryVOList.map(item => {
                 return item.questionCategory;   //这里返回列的名字
            }); 
            this.transTitle = [
              '',
              ...arr
            ]
            this.afterGetData() //此处调用方法
          } else {
            this.$message.error(res.error);
          }
        })
        .catch(error => {
          if (error.res.data) {
            this.$message.error(error.res.data.error);
          }
        });
    }

    //加入数据
    if(matrixData.length>0){
      this.transData = matrixData[0].map((col, i) => {
        return [
            this.originTitle[i],
          ...matrixData.map(row => {
            return row[i+1];  //因为数据多出一行，需要从索引1开始
          })
        ];
      });
      this.transData.pop() //删掉多余行
    }