element table表格对比合并及差异标红

效果图

1. 定义data和methods

data () {
    return {
        tableList: [],
        tableList2: [],
        ecuArr: [], // 合并ECU
        ecuIndex: 0, // 合并ECU索 引
        ecuArr2: [], // 合并ECU
        ecuIndex2: 0 // 合并ECU索 引
    }
},
mounted () {
    this.getDetail()
},
methods: {
    getDetail () {
        const arr = 
        this.tableList = lodash.cloneDeep(arr)
        this.tableList2 = lodash.cloneDeep(arr)
        this.mergeInit(arr)
        this.mergeInit2(arr)
    },
    //  合并表格
    mergeInit (data) {
        this.ecuArr = [];
        this.ecuIndex = 0;
        if (data.length > 0) {
            for (var i = 0; i < data.length; i++) {
                if (i === 0) {
                    this.ecuArr.push(1);
                    this.ecuIndex = 0;
                } else {
                    // 合并 RXSWIN子码
                    if (data[i].sourceEcuRxswin == data[i - 1].sourceEcuRxswin) {
                        this.ecuArr[this.ecuIndex] += 1;
                        this.ecuArr.push(0);
                    } else {
                        this.ecuArr.push(1);
                        this.ecuIndex = i;
                    }
                }
            }
        }
    },
    //  合并表格
    mergeInit2 (data) {
        this.ecuArr2 = [];
        this.ecuIndex2 = 0;
        if (data.length > 0) {
            for (var i = 0; i < data.length; i++) {
                if (i === 0) {
                    this.ecuArr2.push(1);
                    this.ecuIndex2 = 0;
                } else {
                    // 合并 RXSWIN子码
                    if (data[i].targetEcuRxswin == data[i - 1].targetEcuRxswin) {
                        this.ecuArr2[this.ecuIndex2] += 1;
                        this.ecuArr2.push(0);
                    } else {
                        this.ecuArr2.push(1);
                        this.ecuIndex2 = i;
                    }
                }
            }
        }
    },
    //  合并单元格
    arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
        const len = this.tableList.length;
        // const t = this.columns.length
        if (columnIndex === 0) {
            // 第一列 RXSWIN子码
            const _row_1 = this.ecuArr[rowIndex];
            const _col_1 = _row_1 > 0 ? 1 : 0;
            return {
                rowspan: _row_1,
                colspan: _col_1
            };
        } else if (rowIndex === len) {
            return {
                rowspan: 1,
                colspan: 1
            }
        }
    },
    //  合并单元格
    arraySpanMethod2 ({ row, column, rowIndex, columnIndex }) {
        const len = this.tableList2.length;
        // const t = this.columns.length
        if (columnIndex === 0) {
            // 第一列 RXSWIN子码
            const _row_1 = this.ecuArr2[rowIndex];
            const _col_1 = _row_1 > 0 ? 1 : 0;
            return {
                rowspan: _row_1,
                colspan: _col_1
            };
        } else if (rowIndex === len) {
            return {
                rowspan: 1,
                colspan: 1
            }
        }
    },
    VDNRowClassName ({ row, column, rowIndex, columnIndex }) {
        const { targetEcuRxswin, sourceEcuRxswin } = row
        if (targetEcuRxswin != sourceEcuRxswin) {
            if (columnIndex == 0 || columnIndex == 1 || columnIndex == 2 || columnIndex == 3) {
                return 'color_red'
            }
        }
    },
}

2. 在文件中使用

<el-row :gutter="20">
    <el-col :span="12">
        <el-table
            :data="tableList"
            border
            :span-method="arraySpanMethod"
            :cell-class-name="VDNRowClassName">
            <el-table-column prop="sourceEcuRxswin" label="RXSWIN子码" width="150"></el-table-column>
            <el-table-column prop="sourceEcuSwPum" label="ECU软件版本" width="120" show-overflow-tooltip></el-table-column>
            <el-table-column prop="sourceSoftwareCompleteHash" label="HASH值" show-overflow-tooltip></el-table-column>
            <el-table-column prop="sourceEcuName" label="ECU 名称" width="100" show-overflow-tooltip></el-table-column>
        </el-table>
    </el-col>
    <el-col :span="12">
        <el-table
            :data="tableList2"
            border
            :span-method="arraySpanMethod2"
            :cell-class-name="VDNRowClassName">
            <el-table-column prop="targetEcuRxswin" label="RXSWIN子码" width="150"></el-table-column>
            <el-table-column prop="targetEcuSwPum" label="ECU软件版本" width="120" show-overflow-tooltip></el-table-column>
            <el-table-column prop="targetSoftwareCompleteHash" label="HASH值" show-overflow-tooltip></el-table-column>
            <el-table-column prop="targetEcuName" label="ECU 名称" width="100" show-overflow-tooltip></el-table-column>
        </el-table>
    </el-col>
</el-row>

3. css样式

::v-deep .el-table__body td.color_red {
    color: #F56C6C !important;
    height: 48px !important;
}

.color_red {
    color: #F56C6C !important;
}