<template>
  <div class="app-container">
    <span>原始數(shù)據(jù)</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>行轉(zhuǎn)列的數(shù)據(jù)</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 = {} //創(chuàng)建標(biāo)題數(shù)組中第一個對象
      columnObj.label = '名稱' //第一個標(biāo)題名稱
      columnObj.prop = 'title' //第一個標(biāo)題名稱對應(yīng)的字段
      _this.columnsData.push(columnObj) //第一個標(biāo)題 放入標(biāo)題數(shù)組中
      _this.tableData.push({ 'title': '性別' }) //表格數(shù)據(jù)中第一個對象數(shù)據(jù) 屬性名叫 title 與上面的第一個prop設(shè)置一樣
      _this.tableData.push({ 'title': '年齡' }) //表格數(shù)據(jù)中第二個對象數(shù)據(jù) 屬性名叫 title 與上面的第一個prop設(shè)置一樣
      _this.tableData.push({ 'title': '成績' }) //表格數(shù)據(jù)中第三個對象數(shù)據(jù) 屬性名叫 title 與上面的第一個prop設(shè)置一樣
      var props = 'prop' //自定義字段名稱
      _this.datas.forEach(function(item, index) {
        const columnObj = {}
        columnObj.label = item.user_name // 每一列的標(biāo)題的名稱
        columnObj.prop = props + index //自定義每一列標(biāo)題字段名稱
        _this.columnsData.push(columnObj)
        _this.$set(_this.tableData[0], columnObj.prop, item.user_sex) //表格數(shù)據(jù)中第一個數(shù)組對象 往里面添加自定義的屬性
        _this.$set(_this.tableData[1], columnObj.prop, item['user_age']) //表格數(shù)據(jù)中第二個數(shù)組對象 往里面添加自定義的屬性
        _this.$set(_this.tableData[2], columnObj.prop, item.grade) //表格數(shù)據(jù)中第三個數(shù)組對象 往里面添加自定義的屬性
      })
      console.log(_this.columnsData)
      console.log(_this.tableData)
    }
  }
}
</script>

<template>
<div class="m50">
  <el-table border style="margin-top: 50px;" :data="originData">
    <el-table-column label="題型" property="type" align="center">
    </el-table-column>
    <el-table-column label="數(shù)量" property="num" align="center">
    </el-table-column>
    <el-table-column label="均分" property="average" align="center">
    </el-table-column>
  </el-table>
  <!-- 轉(zhuǎn)化后 -->
  <el-table border style="margin-top: 50px;" :data="transData">
    <el-table-column v-for="(item, index) in transTitle" :label="item" :key="index" align="center">
      <template slot-scope="scope">
        {{scope.row[index]}}
      </template>
    </el-table-column>
  </el-table>
</div>
</template>
<script>
export default {
  data() {
    return {
      // originData 為后端原始正常的數(shù)據(jù), 此數(shù)據(jù)按正常表格展示 一行一行的數(shù)據(jù)
      // 保證數(shù)組里每一個對象中的字段順序, 從上到下 一次對應(yīng)顯示表格中的從左到右
      originData: [{
          type: '選擇題',
          num: '5題',
          average: '3分/題',
        },
        {
          type: '填空題',
          num: '5題',
          average: '3分/題',
        },
        {
          type: '選擇題',
          num: '2題',
          average: '10分/題',
        }
      ],
      originTitle: ['題型', '數(shù)量', '均分'], // originTitle 該標(biāo)題為 正常顯示的標(biāo)題, 數(shù)組中的順序就是上面數(shù)據(jù)源對象中的字段標(biāo)題對應(yīng)的順序
      transTitle: ['', '學(xué)生1', '學(xué)生2', '學(xué)生3'], // transTitle 該標(biāo)題為轉(zhuǎn)化后的標(biāo)題, 注意多一列,  因為原來的標(biāo)題變成了豎著顯示了, 所以多一列標(biāo)題, 第一個為空即可
      transData: [],
    }
  },
  created() {
    // 數(shù)組按矩陣思路, 變成轉(zhuǎn)置矩陣
    let matrixData = this.originData.map((row, i) => {
      let arr = []
      for (let key in row) {
        arr.push(row[key])
      }
      return arr
    })
    // 加入標(biāo)題拼接最終的數(shù)據(jù)
    this.transData = matrixData[0].map((col, i) => {
      return [this.originTitle[i], ...matrixData.map((row) => {
        return row[i]
      })]
    })
  }
}
</script>
<style lang="scss" scoped>
.m50 {
    margin: 50px;
}
</style>