vue如何在原有的table表格上进行列转行的操作

Question

vue如何在原有的table表格上进行列转行的操作

如

<template>
  <div class="dashboard-editor-container">
    <span style="color: red ">行数据</span>
    <el-table
      :data="data1"
      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-column
        prop="age"
        label="时间"
        width="180">
      </el-table-column>
      <el-table-column
        prop="a"
        label="数量"
        width="180">
      </el-table-column>
    </el-table>
    <span style="color: red ">行转列显示</span>
    <el-table
      :data="data2"
      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-column
        prop="age"
        label="郊区"
        width="180">
      </el-table-column>
      <el-table-column
        prop="a"
        label="中心"
        width="180">
      </el-table-column>
    </el-table>
  </div>


</template>



<script>

import moment from "moment"

export default {
  data() {
    return {

      data1: [{
        date: '1',
        name: '北京',
        age:'郊区',
        a:'123',
      }, {
        date: '1',
        name: '北京',
        age:'中心',
        a:'456',
      }, {
        date: '1',
        name: '上海',
        age:'教区',
        a:'789',
      }, {
        date: '1',
        name: '上海',
        age:'中心',
        a:'101',
      }],
      data2: [{
        date: '1',
        name: '北京',
        age:'123',
        a:'456',
      }, {
        date: '1',
        name: '上海',
        age:'789',
        a:'101',
      }],
    }

  },

  methods: {

  }
}


</script>
<style scoped>


</style>

Answer 1

在您提供的代码中，您有两个el-table组件，一个用于显示原始的行数据，另一个用于显示行转列后的数据。您的代码中没有明显的错误，但是为了使数据在行转列后正确显示，您需要对data2数组进行预处理。
目前，您的data2数组与data1数组相同，这意味着您需要创建一个新的数组来存储行转列后的数据。以下是一个示例，展示了如何将data1数组中的数据转换为行转列的格式，并更新data2：

export default {
  data() {
    return {
      data1: [
        { date: '1', name: '北京', age: '郊区', a: '123' },
        { date: '1', name: '北京', age: '中心', a: '456' },
        { date: '1', name: '上海', age: '教区', a: '789' },
        { date: '1', name: '上海', age: '中心', a: '101' }
      ],
      data2: [] // 初始化data2为空数组
    };
  },
  methods: {
    convertToColumns() {
      // 初始化一个空数组来存储行转列后的数据
      this.data2 = [];
      // 遍历原始数据
      this.data1.forEach(item => {
        // 创建一个新的对象来存储这一行的数据
        const row = {};
        // 遍历列定义
        ['date', 'name', 'age', 'a'].forEach(key => {
          // 添加这一列的值到新对象
          row[key] = item[key];
        });
        // 将新对象添加到行转列后的数据数组
        this.data2.push(row);
      });
    }
  },
  mounted() {
    // 在组件挂载后执行数据转换
    this.convertToColumns();
  }
};

在上述代码中，我们定义了一个convertToColumns方法，它遍历data1数组，并为每个数据项创建一个新的对象，其中包含所有列的值。然后，我们将这些新对象添加到data2数组中。在组件挂载后，我们调用convertToColumns方法来执行数据转换。
请确保在您的组件中包含上述代码，并确保convertToColumns方法在适当的时候被调用。这将确保您的数据以正确的格式显示在el-table组件中。