html table相同值合并单元格,element表格列单元格相同合并

效果预览:

Snipaste_2020-07-06_17-15-56.png

html代码:

border height="650px" :span-method="objectSpanMethods"

style="width: 100%;overflow: auto;margin: 0 auto;height: 650px;">

{{scope.row.wlzl}}

{{scope.row.ponm}}

{{scope.row.prnm}}

:class="[scope.row.rela === '取消'?'qxColor':[scope.row.rela === '新增'?'xzColor':[scope.row.rela === '替换'?'thColor':'' ]]]">{{scope.row.rela}}

js代码:

// 获取合并的数组

flitterData(arr) {

let spanOneArr = []

let spanTwoArr = []

let concatOne = 0

let concatTwo = 0

arr.forEach((item, index) => {

if (index === 0) {

spanOneArr.push(1);

spanTwoArr.push(1);

} else {

if (item.jxno === arr[index - 1].jxno) { //第一列需合并相同内容的判断条件

spanOneArr[concatOne] += 1;

spanOneArr.push(0);

} else {

spanOneArr.push(1);

concatOne = index;

};

if (item.code === arr[index - 1].code && item.jxno === arr[index - 1].jxno) {//第二列需合并相同内容的判断条件

spanTwoArr[concatTwo] += 1;

spanTwoArr.push(0);

} else {

spanTwoArr.push(1);

concatTwo = index;

};

}

});

return {

one: spanOneArr,

two: spanTwoArr,

}

},

// 合并列

objectSpanMethods({ row, column, rowIndex, columnIndex }) {

if (columnIndex === 0) {

const _row = (this.flitterData(this.list).one)[rowIndex];

const _col = _row > 0 ? 1 : 0;

return {

rowspan: _row,

colspan: _col

};

}

if (columnIndex === 1) {

const _row = (this.flitterData(this.list).two)[rowIndex];

const _col = _row > 0 ? 1 : 0;

return {

rowspan: _row,

colspan: _col

};

}

}