el-table实现转置表格

vue版本：vue2.6.10
elementui版本：2.15.14
实现效果：el-table实现行列互换

代码：

<template>
  <div class="app-container">
    <span>原始数据span>
    <el-table
      :data="datas"
      border
    >
      <template v-for="(item, index) in columns">
        <el-table-column
          :key="index"
          :prop="item.prop"
          align="center"
          :label="item.label"
        />
      template>
    el-table>

    <span>行转列的数据span>
    <el-table
      :data="tableData"
      border
    >
      <el-table-column v-for="item in columnsData" :key="item.prop" :label="item.label" :prop="item.prop">
        <template slot-scope="scope">
          {{scope.row[item.prop]}}
        template>
      el-table-column>
    el-table>
  div>
template>

<script>
export default {
  name: 'TestTable',
  data() {
    return {
      datas: [
        {
          "user_name": "小红",
          "user_sex": "女",
          "user_age": 18,
          "grade": 100
        },
        {
          "user_name": "小明",
          "user_sex": "男",
          "user_age": 20,
          "grade": 97
        },
        {
          "user_name": "小紫",
          "user_sex": "女",
          "user_age": 21,
          "grade": 99
        },
        {
          "user_name": "小李",
          "user_sex": "男",
          "user_age": 19,
          "grade": 98
        }
      ],
      columns: [
        { "label": "名称", "prop": "user_name" },
        { "label": "性别", "prop": "user_sex" },
        { "label": "年龄", "prop": "user_age" },
        { "label": "成绩", "prop": "grade" },
      ],
      tableData: [],
      columnsData: []
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      console.log('test')
      const _this = this
      const columnObj = {} //创建标题数组中第一个对象
      columnObj.label = '名称' //第一个标题名称
      columnObj.prop = 'title' //第一个标题名称对应的字段
      _this.columnsData.push(columnObj) //第一个标题 放入标题数组中
      _this.tableData.push({ 'title': '性别' }) //表格数据中第一个对象数据 属性名叫 title 与上面的第一个prop设置一样
      _this.tableData.push({ 'title': '年龄' }) //表格数据中第二个对象数据 属性名叫 title 与上面的第一个prop设置一样
      _this.tableData.push({ 'title': '成绩' }) //表格数据中第三个对象数据 属性名叫 title 与上面的第一个prop设置一样
      var props = 'prop' //自定义字段名称
      _this.datas.forEach(function(item, index) {
        const columnObj = {}
        columnObj.label = item.user_name // 每一列的标题的名称
        columnObj.prop = props + index //自定义每一列标题字段名称
        _this.columnsData.push(columnObj)
        _this.$set(_this.tableData[0], columnObj.prop, item.user_sex) //表格数据中第一个数组对象 往里面添加自定义的属性
        _this.$set(_this.tableData[1], columnObj.prop, item['user_age']) //表格数据中第二个数组对象 往里面添加自定义的属性
        _this.$set(_this.tableData[2], columnObj.prop, item.grade) //表格数据中第三个数组对象 往里面添加自定义的属性
      })
      console.log(_this.columnsData)
      console.log(_this.tableData)
    }
  }
}
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

界面展示效果：