【Vue】如何将两个非Array类型的复杂数据进行重组并渲染到element ui的table组件上（分多表展示及单表展示）

描述：

已知两组键相同，值不同的数据；要求table中渲染时，两组数据中的各个Array数组下标相同的数据要一一对应显示。

data中的定义如下：

 data() {
    return {
      // 需要重组的两组数据
      normalData1: {
        value1: [1, 2, 3, 4, 5],
        value2: [0.1, 0.2, 0.3, 0.4, 0.5],
        value3: [11, 12, 13, 14, 15]
      },
      normalData2: {
        value1: [100, 200, 300, 400, 500],
        value2: [1.1, 1.2, 1.3, 1.4, 1.5],
        value3: [110, 120, 130, 140, 150]
      },
      // 接收重组后的数据
      // 双表形式
      tableData1: [],
      tableData2: [],
      // 单表形式
      allTableData: [],
      allTableData1: []
   }
}
复制代码

数组重组的方法如下：

methods: {
    // 两表方式
    formatTableData_twoTable(tableData, versionName) {
      let add_row = true
      const formatTableData = []
      for (const name in tableData) {
        console.log(name)
        for (let element = 0; element < tableData[name].length; element++) {
          if (add_row) {
            formatTableData.push({})
          }
          if (versionName === '本版的') {
            const datename = '本版的' + name
            formatTableData[element][datename] = tableData[name][element]
          }
          if (versionName === '上版的') {
            const olddatename = '上版的' + name
            formatTableData[element][olddatename] = tableData[name][element]
          }
        }
        add_row = false
      }
      console.log(formatTableData)
      return formatTableData
    },
    // 单表方式1（交替显示）
    formatTableData_oneTable1(tableData1, tableData2) {
      const alldata = []
      let add_row = true
      for (const name in tableData1) {
        for (let element = 0; element < tableData1[name].length; element++) {
          if (add_row) {
            alldata.push({})
          }
          const datename = '本版的' + name
          const olddatename = '上版的' + name
          alldata[element][datename] = tableData1[name][element]
          alldata[element][olddatename] = tableData2[name][element]
        }
        add_row = false
      }
      console.log(alldata)
      return alldata
    },
    // 单表方式2（顺次显示）
    formatTableData_oneTable2(tableData1, tableData2) {
      const alldata = []
      let add_row = true
      for (const name in tableData1) {
        for (let element = 0; element < tableData1[name].length; element++) {
          if (add_row) {
            alldata.push({})
          }
          const datename = '本版的' + name
          alldata[element][datename] = tableData1[name][element]
        }
        add_row = false
      }
      console.log(alldata)
      for (const name in tableData1) {
        for (let element = 0; element < tableData1[name].length; element++) {
          const olddatename = '上版的' + name
          alldata[element][olddatename] = tableData2[name][element]
        }
      }
      console.log(alldata)
      return alldata
    },
}
复制代码

方法调用如下：

// 页面渲染成功后获取数据
  created() {
    // 双表形式
    this.tableData1 = this.formatTableData_twoTable(this.normalData1, '本版的')
    this.tableData2 = this.formatTableData_twoTable(this.normalData2, '上版的')
    // 单表1
    this.allTableData = this.formatTableData_oneTable1(this.normalData1, this.normalData2)
    // 单表2
    this.allTableData1 = this.formatTableData_oneTable2(this.normalData1, this.normalData2)
  },
复制代码

页面渲染如下：

<div class="table_menu">
      <el-table :data="tableData1" border>
        <el-table-column align="center" label="第一版结果">
          <el-table-column
            v-for="(item,index) in tableData1[0]"
            :key="index"
            align="center"
            :label="index"
          >
            <template slot-scope="scope">
              {{ scope.row[index] }}
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>

    <div class="table_menu">
      <el-table :data="tableData2" border>
        <el-table-column align="center" label="第二版结果">
          <el-table-column
            v-for="(item,index) in tableData2[0]"
            :key="index"
            align="center"
            :label="index"
          >
            <template slot-scope="scope">
              {{ scope.row[index] }}
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>

    <div style="margin-top:20px">
      <el-table
        :data="allTableData"
        style="width: 100%;"
        border
      >
        <el-table-column
          align="center"
          label="结果展示1"
        >
          <el-table-column
            v-for="(item,index) in allTableData[0]"
            :key="index"
            align="center"
            :label="index"
          >
            <template slot-scope="scope">
              {{ scope.row[index] }}
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>

    <div style="margin-top:20px">
      <el-table
        :data="allTableData1"
        height="600"
        style="width: 100%;"
        border
      >
        <el-table-column
          align="center"
          label="结果展示2"
        >
          <el-table-column
            v-for="(item,index) in allTableData1[0]"
            :key="index"
            align="center"
            :label="index"
          >
            <template slot-scope="scope">
              {{ scope.row[index] }}
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
复制代码

样式如下：

<style scoped>
.table_menu{
  width: 50%;
  float: left;
  margin: 20px 0;
}
</style>
复制代码

最终页面显示如图：