el-tabel 行转列 横向显示

el-table 行转列

    <el-table border :data="transData">
              <el-table-column
                v-for="(item, index) in transTitle"
                :label="item"
                :key="index"
                align="center"
                :fixed="index===0"
                min-width="200"
              >
                <template slot-scope="scope">
                  <div class="cg_box" v-if="scope.row[index] == '推送成功'">
                    {{ scope.row[index] }}
                  </div>
                  <div
                    class="sb_box"
                    v-else-if="scope.row[index] == '推送失败'"
                  >
                    {{ scope.row[index] }}
                  </div>
                  <div v-else>
                    {{ scope.row[index] }}
                  </div>
                </template>
              </el-table-column>
            </el-table>

 data() {
    return {
      originData: [
        {
          phone: "18999888899",
          status: "推送成功",
          time: "2023-11-28 18:00:00"
        },
        {
          phone: "18999888899",
          status: "推送成功",
          time: "2023-11-28 18:00:00"
        },
        {
          phone: "18999888899",
          status: "推送失败",
          time: "2023-11-28 18:00:00"
        },
        {
          phone: "18999888899",
          status: "推送成功",
          time: "2023-11-28 18:00:00"
        },
        {
          phone: "18999888899",
          status: "推送成功",
          time: "2023-11-28 18:00:00"
        }
      ],
      originTitle: ["推送电话", "推送状态", "推送时间"],
      transTitle: [
        "推送人",
        "张三",
        "李四",
        "王五",
        "赵六六",
        "A",
        "B",
      ],
      transData: []
    };
  },

  created() {
    let matrixData = this.originData.map(row => {
      let arr = [];
      for (let key in row) {
        arr.push(row[key]);
      }
      return arr;
    });
    // 加入标题拼接最终的数据
    this.transData = matrixData[0].map((col, i) => {
      return [
        this.originTitle[i],
        ...matrixData.map(row => {
          return row[i];
        })
      ];
    });
  }

<style lang="scss" scoped>
.dia_box {
  padding: 0 70px;
  .title_box {
    width: 1227px;
    height: 59px;
    background: url(/img/kanban/aqyh/hz_title.png) no-repeat;
    background-size: 100% 100%;
    font-size: 20px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    color: #ffe5da;
    text-align: center;
    line-height: 59px;
  }
  .content_box {
    padding: 0 39px;
    margin-top: 40px;
    .row_box {
      display: flex;
      align-items: center;
      margin-bottom: 27px;
      .label {
        font-size: 16px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        color: #e6f2ff;
      }
      .value {
        font-size: 16px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #74ffc2;
      }
      .hj_box {
        width: 54px;
        height: 26px;
        border-radius: 2px;
        border: 1px solid #f43300;
        text-align: center;
        line-height: 22px;
        color: #ff9a7f;
        font-size: 15px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        background-color: #4a2e41;
      }
    }
    .bt_box {
      margin-top: 30px;
      margin-bottom: 28px;
      .title_v {
        font-size: 22px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        color: #e6f2ff;
      }
    }
    .cg_box {
      width: 76px;
      height: 24px;
      border-radius: 2px;
      border: 1px solid #00ffb0;
      background-color: #0e6385;
      font-size: 12px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      color: #7fffc1;
      margin-left: 50%;
      transform: translate(-50%);


    }
    .sb_box {
      width: 76px;
      height: 24px;
      border-radius: 2px;
      border: 1px solid #f43300;
      background-color: #4a2e41;
      font-size: 12px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      color: #ff9a7f;
      margin-left: 50%;
      transform: translate(-50%);

    }
  }
}

::v-deep .theme-turing .el-table th {
  background-color: #34afff !important;
}

::v-deep .el-table th {
  background: #04406f !important;
}

::v-deep .el-table--border {
  border: unset !important;
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
}

::v-deep .el-table--border::after {
  width: 0 !important;
}

::v-deep .el-table--border td {
  border-color: #025781 !important;
}

::v-deep .el-table--border th {
  border: unset !important;
}

::v-deep tbody > tr > td {
  background: #052d57 !important;
}
::v-deep .el-table__empty-block {
  background-color: #081f40 !important;
}
</style>