element table 合并单元格
2020-08-05 本文已影响0人
魔仙堡杠把子灬
抑郁使你厌倦世界，理智使你苟延残喘
前端QQ群: 981668406
在此附上我的QQ: 2489757828 有问题的话可以一同探讨
我的github: 李大玄
我的私人博客: 李大玄
我的简书: 李大玄
我的CSDN: 李大玄
在这里插入图片描述
template
<template>
<div>
<div class="panel">
<el-table :data="tableData" :span-method="objectSpanMethod" border>
<el-table-column prop="name" label="部门品线" width="160"></el-table-column>
<el-table-column prop="campaignName" label="波次名称"></el-table-column>
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column prop="type" label="资源类型"></el-table-column>
<el-table-column prop="shareStatus" label="共享状态"></el-table-column>
<el-table-column prop="frequencyStr" label="频次"></el-table-column>
<el-table-column prop="impression" label="曝光"></el-table-column>
<el-table-column prop="impressionPercent" label="曝光占比"></el-table-column>
<el-table-column prop="excBeforeKpi" label="下降比例KPI"></el-table-column>
<el-table-column prop="ExcAbsKpi" label="下降绝对值KPI"></el-table-column>
</el-table>
</div>
</div>
</template>
解释
rowspan（）这个函数就是用来返回 spanArr 数组的，
定义每一行的 rowspan
if( index === 0)，第一行，直接先给数组 push 进一个1，表示自己先占一行，
position 是数组元素的位置 （此时是从数组元素的第一个开始，所以position 为 0）， position为 0 意思表示的就是数组的第一个元素。
当到了 index 为 2 的时候，if(this.listData[index][spanName] === this.listData[index-1][spanName])，
让第二行与第一行作比较：
（1）如果第二行与第一行相等的话，position 就 +1，当有 n 行第一行相同，position 就为 n，表示向下合并 n 行；
第二行自己就 spanArr.push(0)，表示第二行“消失”，因为第一行和第二行合并了；
（2）如果第二行与第一行不相等的话，那么 spanArr.push(1);就让第二行自己独占一行；
position = index ：把指针拿到 index 这行来，表示设置数组 spanArr[position] 的元素值，然后定义从此行开始向下合并几行
（可以根据示例研究下，当 index 为 2 时，position 为 2，当 index 为 3 时，第四行与第三行需要合并，
那么在数组的 position 元素就要 +1 了，也就是 spanArr[position] += 1）
:span-method="objectSpanMethod"
这个是官方给定的绑定属性和对应的方法，objectSpanMethod 传入了 { row, column, rowIndex, columnIndex }
row: 当前行
column: 当前列
rowIndex：当前行号
columnIndex ：当前列号
该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表 colspan。
也可以返回一个键名为 rowspan 和 colspan 的对象。
const _col = _row > 0 ? 1 : 0; 定义的这个单元格列的合并，我们项目只合并行，不合并列；
_row：代表合并行的行数，_row 的值要么是 1，或者更大的自然正整数，要么是 0。
1代表：独占一行
更大的自然数：代表合并了若干行
0：代表“消失”的哪那一个单元格，后面的单元格向前推一格
js
<script>
export default {
data() {
return {
testArr1: [],
testArr2: [],
testArr3: [],
testArr4: [],
testArr5: [],
testArr6: [],
testArr7: [],
testPosition1: 0,
testPosition2: 0,
testPosition3: 0,
testPosition4: 0,
testPosition5: 0,
testPosition6: 0,
testPosition7: 0,
tableData: [
{"name":"test-母品牌 > 629测试 > test-事业部","campaignName":"test-安慕希","date":"2020-06-29 - 2020-06-28","frequencyStr":"1-123122","impression":444,"impressionPercent":"100.00%","shareStatus":"共享前","excBeforeKpi":"0%","ExcAbsKpi":"0%","type":"pc"},
{"name":"test-母品牌 > 629测试 > test-事业部","campaignName":"test-安慕希","date":"2020-06-29 - 2020-06-28","frequencyStr":"123123+","impression":0,"impressionPercent":"0.00%","shareStatus":"共享前","excBeforeKpi":"0%","ExcAbsKpi":"0%","type":"pc"},
{"name":"test-母品牌 > 629测试 > test-事业部","campaignName":"test-安慕希","date":"2020-06-29 - 2020-06-28","frequencyStr":"1-123122","impression":888,"impressionPercent":"100.00%","shareStatus":"共享后","excBeforeKpi":"0%","ExcAbsKpi":"0%","type":"pc"},
{"name":"test-母品牌 > 629测试 > test-事业部","campaignName":"test-安慕希","date":"2020-06-29 - 2020-06-28","frequencyStr":"123123+","impression":0,"impressionPercent":"0.00%","shareStatus":"共享后","excBeforeKpi":"0%","ExcAbsKpi":"0%","type":"pc"},
{"name":"test-母品牌 > 629测试 > test-事业部","campaignName":"test-安慕希","date":"2020-06-29 - 2020-06-28","frequencyStr":"1-123122","impression":444,"impressionPercent":"100.00%","shareStatus":"共享前","excBeforeKpi":"0%","ExcAbsKpi":"0%","type":"移动"},
{"name":"test-母品牌 > 629测试 > test-事业部","campaignName":"test-安慕希","date":"2020-06-29 - 2020-06-28","frequencyStr":"123123+","impression":0,"impressionPercent":"0.00%","shareStatus":"共享前","excBeforeKpi":"0%","ExcAbsKpi":"0%","type":"移动"},
{"name":"test-母品牌 > 629测试 > test-事业部","campaignName":"test-安慕希","date":"2020-06-29 - 2020-06-28","frequencyStr":"1-123122","impression":333,"impressionPercent":"100.00%","shareStatus":"共享后","excBeforeKpi":"0%","ExcAbsKpi":"0%","type":"移动"},
{"name":"test-母品牌 > 629测试 > test-事业部","campaignName":"test-安慕希","date":"2020-06-29 - 2020-06-28","frequencyStr":"123123+","impression":0,"impressionPercent":"0.00%","shareStatus":"共享后","excBeforeKpi":"0%","ExcAbsKpi":"0%","type":"移动"}
]
};
},
mounted() {
this.rowspan(this.testArr1, this.testPosition1, "name");
this.rowspan(this.testArr2, this.testPosition2, "campaignName");
this.rowspan(this.testArr3, this.testPosition3, "date");
this.rowspan(this.testArr4, this.testPosition4, "type");
this.rowspan(this.testArr5, this.testPosition5, "shareStatus");
this.rowspan(this.testArr6, this.testPosition6, "excBeforeKpi");
this.rowspan(this.testArr7, this.testPosition7, "ExcAbsKpi");
},
methods: {
rowspan(spanArr, position, spanName) {
this.tableData.forEach((item, i) => {
if (i === 0) {
spanArr.push(1);
position = 0;
} else {
if ( this.tableData[i][spanName] === this.tableData[i - 1][spanName]) {
spanArr[position] += 1;
spanArr.push(0);
} else {
spanArr.push(1);
position = i;
}
}
});
},
// 表格合并行
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
const _row = this.testArr1[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col,
};
}
if (columnIndex === 1) {
const _row = this.testArr2[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col,
};
}
if (columnIndex === 2) {
const _row = this.testArr3[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col,
};
}
if (columnIndex === 3) {
const _row = this.testArr4[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col,
};
}
if (columnIndex === 4) {
const _row = this.testArr5[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col,
};
}
if (columnIndex === 8) {
const _row = this.testArr6[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col,
};
}
if (columnIndex === 9) {
const _row = this.testArr7[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col,
};
}
},
merage() {
this.merageInit();
for (let i = 0; i < this.tableData.length; i += 1) {
if (i === 0) {
// 第一行必须存在
this.typeNameArr.push(1);
this.typeNamePos = 0;
this.storeArr.push(1);
this.storePos = 0;
this.feeArr.push(1);
this.feePos = 0;
} else {
// 判断当前元素与上一个元素是否相同,eg：this.typeNamePos 是 this.typeNameArr序号
// 第一列
// eslint-disable-next-line no-lonely-if
if (this.tableData[i].name === this.tableData[i - 1].name) {
this.typeNameArr[this.typeNamePos] += 1;
this.typeNameArr.push(0);
} else {
this.typeNameArr.push(1);
this.typeNamePos = i;
}
// 第二列
if (this.tableData[i].campaignName === this.tableData[i - 1].campaignName &&
this.tableData[i].name === this.tableData[i - 1].name
) {
this.storeArr[this.storePos] += 1;
this.storeArr.push(0);
} else {
this.storeArr.push(1);
this.storePos = i;
}
// 第三列
if (this.tableData[i].date === this.tableData[i - 1].date &&
this.tableData[i].campaignName === this.tableData[i - 1].campaignName &&
this.tableData[i].name === this.tableData[i - 1].name
) {
this.feeArr[this.feePos] += 1;
this.feeArr.push(0);
} else {
this.feeArr.push(1);
this.feePos = i;
}
// 第4列
if (this.tableData[i].type === this.tableData[i - 1].type &&
this.tableData[i].date === this.tableData[i - 1].date &&
this.tableData[i].campaignName === this.tableData[i - 1].campaignName &&
this.tableData[i].name === this.tableData[i - 1].name
) {
this.feeArr[this.feePos] += 1;
this.feeArr.push(0);
} else {
this.feeArr.push(1);
this.feePos = i;
}
// 第5列
if (this.tableData[i].shareStatus === this.tableData[i - 1].shareStatus &&
this.tableData[i].type === this.tableData[i - 1].type &&
this.tableData[i].date === this.tableData[i - 1].date &&
this.tableData[i].campaignName === this.tableData[i - 1].campaignName &&
this.tableData[i].name === this.tableData[i - 1].name
) {
this.feeArr[this.feePos] += 1;
this.feeArr.push(0);
} else {
this.feeArr.push(1);
this.feePos = i;
}
}
}
},
},
};
</script>
