vue element表格数据 Table 表格 行数据转列显示 列数据转行显示

效果

 附代码

<template>
  <div class="dashboard-editor-container">
    <span style="color: red ">行数据</span>
    <el-table
      :data="data"
      style="width: 50%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
    </el-table>
    <span style="color: red ">行转列显示</span>
    <el-table
      :data="tableData"
      border
      style="width: 50%">
      <el-table-column
        v-for="item in columnData"
        :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 {
    data() {
      return {
        data: [{
          date: '1',
          name: '哈哈哈'
        }, {
          date: '2',
          name: '啦啦啦'
        }, {
          date: '3',
          name: '嘻嘻嘻'
        }, {
          date: '4',
          name: '略略略'
        }],
        tableData: [], //表格数据
        columnData: [ //表格标题数组
        ]
      }
    }, created() {
      this.init()
    },

    methods: {

      init() {
        const _this = this
        const columnObj = {} //创建标题数组中第一个对象
        columnObj.label = '日期'//第一个标题名称
        columnObj.prop = 'title'//第一个标题名称对应的字段
        _this.columnData.push(columnObj) //第一个标题 放入标题数组中
        _this.tableData.push({ 'title': '姓名' }) //表格数据中第一个对象数据 属性名叫 title 与上面的第一个prop设置一样
        var props = 'prop' //自定义字段名称
        _this.data.forEach(function(item, index) {
          const columnObj = {}
          columnObj.label = item.date // 每一列的标题的名称
          columnObj.prop = props + index //自定义每一列标题字段名称
          _this.columnData.push(columnObj)
          _this.$set(_this.tableData[0], columnObj.prop, item.name)//表格数据中第一个数组对象 往里面添加自定义的属性
        })

      }

    }
  }
</script>