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

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

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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102

总结

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