抑郁使你厌倦世界，理智使你苟延残喘
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 数组的，定义每一行的 rowspanif( 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":"-06-29 - -06-28","frequencyStr":"1-123122","impression":444,"impressionPercent":"100.00%","shareStatus":"共享前","excBeforeKpi":"0%","ExcAbsKpi":"0%","type":"pc"},{"name":"test-母品牌 > 629测试 > test-事业部","campaignName":"test-安慕希","date":"-06-29 - -06-28","frequencyStr":"123123+","impression":0,"impressionPercent":"0.00%","shareStatus":"共享前","excBeforeKpi":"0%","ExcAbsKpi":"0%","type":"pc"},{"name":"test-母品牌 > 629测试 > test-事业部","campaignName":"test-安慕希","date":"-06-29 - -06-28","frequencyStr":"1-123122","impression":888,"impressionPercent":"100.00%","shareStatus":"共享后","excBeforeKpi":"0%","ExcAbsKpi":"0%","type":"pc"},{"name":"test-母品牌 > 629测试 > test-事业部","campaignName":"test-安慕希","date":"-06-29 - -06-28","frequencyStr":"123123+","impression":0,"impressionPercent":"0.00%","shareStatus":"共享后","excBeforeKpi":"0%","ExcAbsKpi":"0%","type":"pc"},{"name":"test-母品牌 > 629测试 > test-事业部","campaignName":"test-安慕希","date":"-06-29 - -06-28","frequencyStr":"1-123122","impression":444,"impressionPercent":"100.00%","shareStatus":"共享前","excBeforeKpi":"0%","ExcAbsKpi":"0%","type":"移动"},{"name":"test-母品牌 > 629测试 > test-事业部","campaignName":"test-安慕希","date":"-06-29 - -06-28","frequencyStr":"123123+","impression":0,"impressionPercent":"0.00%","shareStatus":"共享前","excBeforeKpi":"0%","ExcAbsKpi":"0%","type":"移动"},{"name":"test-母品牌 > 629测试 > test-事业部","campaignName":"test-安慕希","date":"-06-29 - -06-28","frequencyStr":"1-123122","impression":333,"impressionPercent":"100.00%","shareStatus":"共享后","excBeforeKpi":"0%","ExcAbsKpi":"0%","type":"移动"},{"name":"test-母品牌 > 629测试 > test-事业部","campaignName":"test-安慕希","date":"-06-29 - -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-ifif (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>
