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

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

vue+Element UI实现表格纵向显示

前言

element框架的teble表格的数据展示由横向转向竖向，主要包括element框架的teble表格的数据展示由横向转向竖向使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

实现效果：其中左侧和上测是固定内容

<template>
    <!-- 表格 -->
    <div class="table_div">
      <el-table
        v-adaptive="{bottomOffset: 85}"
        height="100px":data="tableData"
        stripe
        style="width: 100%"
        border
        row-key="index"@cell-click="cellClick"
      >
        <el-table-column
          v-for="(item, index) in tableHeaders":key="index":label="item.title":prop="item.field"
          align="center":width="item.width"
        >
          <template slot-scope="scope">
            <template v-if="index===0">
              <span v-if="index===0">{{ scope.row[index] }}</span>
            </template>
            <template v-else>
              <el-input
                v-if="index !==0 &&item.type==='textarea'"
                v-show="show"
                v-model="scope.row[index]"
                class="id":autosize="true"
                type="textarea"@blur="loseFcous(scope.$index, scope.row)"
                @input="change"
              />
              <span v-show="!show">{{ scope.row[index] }}</span>
            </template>
          </template>
        </el-table-column>
      </el-table>
    </div>
</template>
<script>
export default{components:{},
  data(){return{originTitle: ['我们目前所处领域','我们希望达到的目标','与我们相关的主要机会','目前我们遇到的最大挑战','客户现在最优先事情有那些','如何帮助我们的客户'], // originTitle 该标题为 正常显示的标题, 数组中的顺序就是上面数据源对象中的字段标题对应的顺序
      /* 表头信息 */tableHeaders: [{title:'',field:'a1',width: 220,editRender: false },{title:'说明',field:'a2',type:'textarea'},{title:'备注',field:'a3',type:'textarea'}
      ],/* 表格数据 */tableData: [{a1:'A1',a2:'A2',a3:'A3',a4:'A4',a5:'A5'},{a1:'a1',a2:'a2',a3:'a3',a4:'a4',a5:'a5'}]
  },
  mounted(){
    this.transChange() // 转化表格
  },
  methods:{// 转换表格
    transChange(){// 数组按矩阵思路, 变成转置矩阵
      const matrixData = this.tableData.map((row) =>{const arr = []
        for (const key in row){
          arr.push(row[key])}
        return arr
      })
      console.log(matrixData)
      // 加入标题拼接最终的数据
      this.tableData = matrixData[0].map((col, i) =>{return [this.originTitle[i], ...matrixData.map((row) =>{
          return row[i]
        })]
      })},
    // 默认显示当前年度
    getdatatime(){
      this.value1 = new Date()},}}
</script>

总结

使用element-ui的el-table表格，头部在左侧需要进行转化，如果上侧的头部不需要可以设置隐藏。