表头纵向排列

一、基于elementUI实现的表头纵向排列

效果：

代码：

<template>
   <div>
       <el-table
         :show-header="false"
         :data="tableData"
         border
         style="margin: 20px;width:381px "
       >
         <el-table-column width="180" prop="title"></el-table-column>
         <el-table-column width="200" prop="value"></el-table-column>
       </el-table>
   </div>
</template>
<script>
export default {
  name: "mallMember-detail",
  data() {
    return {
    //请求回来的数据
      tableData:  [
        {
          id: 1,
          title: "用户ID",
          value: 1,
        },
        {
          id: 2,
          title: "微信昵称",
          value:2,
        },
        {
          id: 3,
          title: "会员名称",
          value:3,
        }
      ],
    };
  },
  methods: {

  }
};
</script>

二、原生实现表头纵向排列

由于以上这种不满足需求，最后还是考虑采用原生的table来写，将原来横着的变成竖着，竖着的变成横着的，也就是表头纵向排列。只需要将需要的字段提取出来重新组成一个数组，然后在td中循环这个数组即可。

效果如下：

数据结构如下：

代码：

 <table class="table table-bordered" cellspacing="0">
          <thead>
            <tr>
              <td>部门</td>
              <td v-for="(item,index) in nameContract" :key="index">{{item}}</td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>合同签约个数</td>
              <td v-for="(item,index) in contractCounutNum" :key="index">{{item}}</td>
            </tr>
            <tr>
              <td>合同签约额</td>
              <td v-for="(item,index) in contractSumNum" :key="index">{{item}}</td>
            </tr>
          </tbody>
        </table>
		


 data() {
    return {
      nameContract: [], //合同的名字
      contractCounutNum: [], //合同的值Counut
      contractSumNum: [], //合同的值sum
      tableContractData: [], //合同的表格的值
      contractSum: 0, //合同签约额合计
      contractCounut: 0, //合同签约个数合计
    };
  },

 //获得合同数据
    getContractData() {
      let self = this;
      this.tableContractData = [];
      this.nameContract = [];
      this.contractCounutNum = [];
      this.contractSumNum = [];
      this.contractSum=0;
      this.contractCounut=0;
      countContract(this.queryParams).then(res => {
        console.log(res)
        this.tableContractData = res.data;
        this.tableContractData.forEach(val => {
          self.contractSum += val.sumNum;
          self.contractCounut += val.counutNum;
          this.nameContract.push(val.name);
          this.contractCounutNum.push(val.counutNum);
          this.contractSumNum.push(val.sumNum);
        });
        this.contractSumNum[0] = self.contractSum;
        this.contractCounutNum[0] = self.contractCounut;
      });
    },