vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > el-table转置表格

el-table实现转置表格的示例代码(行列互换)

作者:我与代码的故事

这篇文章主要介绍了el-table实现转置表格的示例代码(行列互换),本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

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>

界面展示效果:

Vue 纵向Table转横向Table (转置)

数组参照矩阵思想, 对数组进行转置。

缺点: 转置后的数组仅是单纯的存每一行数据的数组用于展示, 失去了原数组的数组结构. 建议该方法用于仅展示的需求.

<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="数量" property="num" align="center">
    </el-table-column>
    <el-table-column label="均分" property="average" align="center">
    </el-table-column>
  </el-table>
  <!-- 转化后 -->
  <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 为后端原始正常的数据, 此数据按正常表格展示 一行一行的数据
      // 保证数组里每一个对象中的字段顺序, 从上到下 一次对应显示表格中的从左到右
      originData: [{
          type: '选择题',
          num: '5题',
          average: '3分/题',
        },
        {
          type: '填空题',
          num: '5题',
          average: '3分/题',
        },
        {
          type: '选择题',
          num: '2题',
          average: '10分/题',
        }
      ],
      originTitle: ['题型', '数量', '均分'], // originTitle 该标题为 正常显示的标题, 数组中的顺序就是上面数据源对象中的字段标题对应的顺序
      transTitle: ['', '学生1', '学生2', '学生3'], // transTitle 该标题为转化后的标题, 注意多一列,  因为原来的标题变成了竖着显示了, 所以多一列标题, 第一个为空即可
      transData: [],
    }
  },
  created() {
    // 数组按矩阵思路, 变成转置矩阵
    let matrixData = this.originData.map((row, i) => {
      let arr = []
      for (let key in row) {
        arr.push(row[key])
      }
      return arr
    })
    // 加入标题拼接最终的数据
    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>

到此这篇关于el-table实现转置表格的示例代码的文章就介绍到这了,更多相关el-table转置表格内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文