Element table 多个表格合并，新表格在右侧追加合并，下图是合并后的效果 (cv即食)
如果有表头相同，可以循环遍历把每个表头增加标识，例如: "表1_" "表2_" ，这样表头就不会重复了。 代码里已经写了详细注释，应该能看懂
HelloWorld.vue
<template>
<div class="hello">
<el-table ref="filterTable" :data="tableInits.tbodyList" border>
<el-table-column
:label="item"
:prop="item"
v-for="(item, i) in tableInits.theadList"
:key="i"
width="100px"
align="center"
>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
// 初始表格 多个表格聚合在一个对象里
tabledataInit: {
tbody: {
表1: [
{
表1_时间: "2022-07-06",
表1_销售额: "888-1",
表1_销售价: "555-1",
},
{
表1_时间: "2022-07-07",
表1_销售额: "888-1",
表1_销售价: "555-1",
表1_定价: "66-1",
},
{
表1_时间: "2022-07-08",
表1_销售额: "888-1",
表1_定价: "66-1",
},
],
表2: [
{
表2_时间: "2022-01-01",
表2_用户id: "0506-2",
表2_姓名: "小王-2",
表2_销售额: "1个亿-2",
},
{
表2_时间: "2022-01-01",
表2_姓名: "小王-2",
表2_销售额: "1个亿-2",
表2_销量: "2亿件-2",
表2_用户id: "0506-2",
},
{
表2_用户id: "0506-2",
表2_时间: "2022-01-01",
表2_销售额: "1个亿-2",
表2_销量: "2亿件-2",
},
{
表2_用户id: "0506-2",
表2_时间: "2022-01-01",
表2_姓名: "小王-2",
表2_销量: "2亿件-2",
},
],
表3: [
{
表3_时间: "2022-06-06",
表3_销量: "999个-3",
表3_品牌: "大米3",
},
{
表3_时间: "2022-06-06",
表3_销量: "999个-3",
表3_品牌: "大米3",
},
{
表3_时间: "2022-06-06",
表3_销量: "999个-3",
表3_品牌: "大米3",
},
{
表3_时间: "2022-06-06",
表3_销量: "999个-3",
表3_品牌: "大米3",
},
],
表4: [
{
表4_用户id: "9898",
表4_销售额: "444-4",
表4_平台: "苹果-4",
},
{
表4_用户id: "9898",
表4_销售额: "444-4",
表4_平台: "苹果-4",
},
{
表4_用户id: "9898",
表4_销售额: "444-4",
表4_平台: "苹果-4",
},
{
表4_用户id: "9898",
表4_销售额: "444-4",
表4_平台: "苹果-4",
},
{
表4_用户id: "9898",
表4_销售额: "444-4",
表4_平台: "苹果-4",
},
{
表4_用户id: "9898",
表4_销售额: "444-4",
表4_平台: "苹果-4",
},
],
},
},
// 把初始表格 处理后 放在一个对象里
tableInits: {
thead: {}, // 把每一个表的表头提取出来去重
theadList: [], // 把所有表头放到一个数组里扁平化
tbody: {}, // 获取多个表格合并到一个表格的数据对象
tbodyList: [],
maxItemLen: 0,
},
};
},
mounted() {
this.init();
},
methods: {
init() {
let { tbody = {} } = this.tabledataInit;
if (Object.keys(tbody).length === 0) return;
// 获取多个表格合并到一个表格的数据对象
this.tableInits.tbody = this.deepClone(tbody);
this.filterHeader_1(); // 过滤表头
this.fillHeadeItem_2(); // 填充每个表格的item
this.flatHeade_3(); // 扁平化表头
this.getMaxLen_4(); // 遍历每个表格，找出最长 表格长度
this.fillBodyItem_5(); // 遍历每个，表格长度<最长长度的 要填充{} 空对象
this.mergeTbody_6(); // 合并表格
/* 合并表格：表1的第1项 和表格2的第1项 和表3的第1项 ... 都合在 arrBody的第1个item里
表1的第2项 和表格2的第2项 和表3的第2项 ... 都合在 arrBody的第2个item里
....
把每个表格的第几个item 都合在arrBody对应索引的item里
*/
},
// 合并
mergeTbody_6() {
let { tbody } = this.tableInits;
let { maxItemLen } = this;
let arrBody = [];
for (let i = 0; i < maxItemLen.length; i++) {
arrBody.push({});
}
for (let key in tbody) {
for (let i = 0; i < tbody[key].length; i++) {
let obj = { ...arrBody[i], ...tbody[key][i] };
arrBody[i] = obj;
console.log(arrBody);
this.tableInits.tbodyList = arrBody;
}
}
},
// 过滤表头，获取每个表格的表头数组
filterHeader_1() {
let { tbody } = this.tableInits;
// 把每一个表的表头提取出来去重
for (let key in tbody) {
this.tableInits.thead[key] = [];
let ars = []; // 每个表格item去重后的key
for (let i = 0; i < tbody[key].length; i++) {
let item = Object.keys(tbody[key][i]);
for (let j = 0; j < item.length; j++) {
if (!ars.includes(item[j])) ars.push(item[j]);
}
}
this.tableInits.thead[key] = ars;
}
},
// 提取两个数组不同项
arrfilter(arr1, arr2) {
return arr1.concat(arr2).filter((result, idx, array) => {
return array.indexOf(result) == array.lastIndexOf(result);
});
},
// 填充每个表格的item
fillHeadeItem_2() {
let { tbody } = this.tableInits;
// 把每一个表的表头提取出来去重
for (let key in tbody) {
let ars = this.tableInits.thead[key];
for (let i = 0; i < tbody[key].length; i++) {
let item = Object.keys(tbody[key][i]);
for (let j = 0; j < item.length; j++) {
let arr1 = this.arrfilter(ars, item);
for (let m = 0; m < arr1.length; m++) {
// 在每个对象里 填充少的item
tbody[key][i][arr1[m]] = "";
}
}
}
}
},
// 把所有表头放到一个数组里扁平化
flatHeade_3() {
let { thead } = this.tableInits;
let arrHead = [];
for (let key in thead) {
arrHead = arrHead.concat(thead[key]);
}
this.tableInits.theadList = arrHead;
},
getMaxLen_4() {
let maxLen = 0; // 获取最长数组
let { tbody } = this.tableInits;
for (let key in tbody) {
maxLen = maxLen > tbody[key].length ? maxLen : tbody[key].length;
}
console.log("maxLen", maxLen);
this.maxItemLen = maxLen;
},
// 填充item
fillBodyItem_5() {
let { tbody } = this.tableInits;
let { maxItemLen } = this;
for (let key in tbody) {
for (let i = 0; i < tbody[key].length; i++) {
let item = Object.keys(tbody[key][i]);
// 少了几项填充几项
let maxLen = maxItemLen - tbody[key].length;
for (let j = 0; j < maxLen; j++) {
tbody[key].push({});
}
}
}
},
// 深拷贝
deepClone(source) {
if (typeof source !== "object" || source == null) {
return source;
}
const target = Array.isArray(source) ? [] : {};
for (const key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
if (typeof source[key] === "object" && source[key] !== null) {
target[key] = this.deepClone(source[key]);
} else {
target[key] = source[key];
}
}
}
return target;
},
},
};
</script>
<style scoped>
.hello {
width: 100%;
margin: 0 auto;
}
</style>
