Description:

Given two groups of data with the same key and different values; When rendering in table, data with the same subscript of each Array in two sets of data should be displayed one by one.

The definition in data is as follows:

Data () {return {// Two groups of data to be reorganized 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]}, // Select tableData1: [], tableData2: [], // select tableData2: [], [], allTableData1: [] } }Copy the code

Array recombination can be done as follows:

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 === 'version of ') {const datename =' version of '+ name FormatTableData [Element][datename] = tableData[name][Element]} if (versionName === 'old ') {const oldDatename =' old '+  name formatTableData[element][olddatename] = tableData[name][element] } } add_row = false } Console. log(formatTableData) return formatTableData}, // Single table 1(alternate display) 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 = 'this' + name const olddatename =' previous' + name alldata[element][datename] = tableData1[name][element] alldata[element][olddatename] = tableData2[name][element] } Add_row = false} console.log(alldata) return alldata}, // 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 = 'this' + 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 = 'oldDatename' + name allData [element][oldDatename] = tableData2[element]}} console.log(alldata) return alldata }, }Copy the code

The method call looks like this:

Create () {this.tableData1 = this.formAttableDatA_twoTable (this.normalData1, This. TableData2 = this.formatTableData_twoTable(this.normalData2, This. allTableData = this.formatTableData_oneTable1(this.normalData1, This.alltabledata1 = this.formAttableData_onetable2 (this.normalData1, this.normalData2)},Copy the code

The page is rendered as follows:

<div class="table_menu"> <el-table :data="tableData1" border> <el-table-column align="center" label=" first edition result "> <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=" second edition result "> <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=" result display 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=" result display 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>Copy the code

The style is as follows:

<style scoped>
.table_menu{
  width: 50%;
  float: left;
  margin: 20px 0;
}
</style>
Copy the code

The final page is shown as follows: