elementUI table表格合并相同的内容
1.表格和数据
表格是这样
数据(由于数据太多，只展示了几个)
tableData: [{one: '1 . 产出指标',two: '1 .1 数量指标',three: '1.1.1打造技术技能人才培养高地',four: '1.1.1.1.SCI系统化人才培养体系',target: '1个',realize: '1个',reach: 1,material: 2},{one: '1 . 产出指标',two: '1 .1 数量指标',three: '1.1.1打造技术技能人才培养高地',four: '1.1.1.2.校内实训基地建设',target: '15个',realize: '15个',reach: 1,material: 1},{one: '1 . 产出指标',two: '1 .1 数量指标',three: '1.1.1打造技术技能人才培养高地',four: '1.1.1.3职业教育本科试点专业',target: '10个',realize: '8',reach: 2,material: 1}]
2.合并相同的表格
flitterData(arr) {const spanOneArr = [];const spanTwoArr = [];const spanThreeArr = [];let concatOne = 0;let concatTwo = 0;let concatThree = 0;arr.forEach((item, index) => {if (index === 0) {spanOneArr.push(1);spanTwoArr.push(1);spanThreeArr.push(1);} else {if (item.one === arr[index - 1].one) {// 第一列需合并相同内容的判断条件spanOneArr[concatOne] += 1;spanOneArr.push(0);} else {spanOneArr.push(1);concatOne = index;}if (item.three === arr[index - 1].three && item.one === arr[index - 1].one) {// 第二列需合并相同内容的判断条件spanTwoArr[concatTwo] += 1;spanTwoArr.push(0);} else {spanTwoArr.push(1);concatTwo = index;}if (item.one === arr[index - 1].one && item.two === arr[index - 1].two) {// 第三列需合并相同内容的判断条件spanThreeArr[concatThree] += 1;spanThreeArr.push(0);} else {spanThreeArr.push(1);concatThree = index;}}});return {one: spanOneArr,two: spanTwoArr,three: spanThreeArr};},objectSpanMethod({row, column, rowIndex, columnIndex }) {if (columnIndex === 0) {const _row = this.flitterData(this.tableData).one[rowIndex];const _col = _row > 0 ? 1 : 0;return {rowspan: _row,colspan: _col};}if (columnIndex === 2) {const _row = this.flitterData(this.tableData).two[rowIndex];const _col = _row > 0 ? 1 : 0;return {rowspan: _row,colspan: _col};}if (columnIndex === 1) {const _row = this.flitterData(this.tableData).three[rowIndex];const _col = _row > 0 ? 1 : 0;return {rowspan: _row,colspan: _col};}}
