vue 关于table表格相同项合并打印

html

<el-table :data="dutyList" style="width: 100%" border :span-method="objectOneMethod">

重点在于***:span-method=“objectOneMethod”***，具体用法详见element-ui文档。

js

 objectOneMethod({
                row,
                column,
                rowIndex,
                columnIndex
            }) {
                if (columnIndex === 1) {
                    const _row = this.setTable(this.dutyList).one[rowIndex];
                    const _col = _row > 0 ? 1 : 0;
                    return {
                        rowspan: _row,
                        colspan: _col
                    };
                }
                if (columnIndex === 6) {
                    const _row = this.setTable(this.dutyList).two[rowIndex];
                    const _col = _row > 0 ? 1 : 0;
                    return {
                        rowspan: _row,
                        colspan: _col
                    };
                }
                if (columnIndex === 7) {
                    const _row = this.setTable(this.dutyList).three[rowIndex];
                    const _col = _row > 0 ? 1 : 0;
                    return {
                        rowspan: _row,
                        colspan: _col
                    };
                }
            },
            setTable(tableData) {
                let spanOneArr = [],
                    spanTwoArr = [],
                    spanThreeArr = [],
                    concatOne = 0,
                    concatTwo = 0,
                    concatThree = 0
                tableData.forEach((item, index) => {
                    if (index === 0) {
                        spanOneArr.push(1);
                        spanTwoArr.push(1);
                        spanThreeArr.push(1);
                    } else {

                        if (item.dutyLeader === tableData[index - 1].dutyLeader) {
                            //需合并相同内容的判断条件
                            spanOneArr[concatOne] += 1;
                            spanOneArr.push(0);
                        } else {
                            spanOneArr.push(1);
                            concatOne = index;
                        }
                        if (item.dutyCar === tableData[index - 1].dutyCar) {
                            //需合并相同内容的判断条件
                            spanTwoArr[concatTwo] += 1;
                            spanTwoArr.push(0);
                        } else {
                            spanTwoArr.push(1);
                            concatTwo = index;
                        }
                        if (item.dutyCarCall === tableData[index - 1].dutyCarCall) {
                            //需合并相同内容的判断条件
                            spanThreeArr[concatThree] += 1;
                            spanThreeArr.push(0);
                        } else {
                            spanThreeArr.push(1);
                            concatThree = index;
                        }
                    }
                });
                return {
                    one: spanOneArr,
                    two: spanTwoArr,
                    three: spanThreeArr,
                };
            },
            

不懂留言，看见会回复。