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

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

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

前言

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

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

在这里插入图片描述

    
    
      
        
          
            
              "index===0">{{ scope.row[index] }}
            
            
              
              "!show">{{ scope.row[index] }}
            
          
        
      
    


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()
    },
  }
}