element table表数据合并列

table表数据合并列

效果图

1. 定义data和methods

data () {
    return {
        tableList: [],
        ecuArr: [], // 合并ECU or 合并RXSWIN子码
        ecuIndex: 0, // 合并ECU索 引 or 合并RXSWIN子码
    }
},
mounted () {
    this.getVSVIDList()
},
methods: {
    getDetail (vsvId) {
        this.tableList = [
            {"ecuRxswin":"LBUA01AA03","ecuName":"DDM","ecuSwPum":"8895632431/D","softwareCompleteHash":"698fe738461b567972b9cc35aff9edeedb18ca92d6d3c243d4401ae6fad105e1"},
            {"ecuRxswin":"LBUA01AA03","ecuName":"DDM","ecuSwPum":"8895059909/B","softwareCompleteHash":"d23291c225a3ad558bf8693b6e9c0e8af9103b4406c64f8d1d8b2b4b9d1c1635"},
            {"ecuRxswin":"LBUA03AA01","ecuName":"CEM","ecuSwPum":"8894857084/B","softwareCompleteHash":"f6de1cab2e5f97565381ce9f1e6e1b212ee436dce71a059841b38cf4034c9a1f"},
            {"ecuRxswin":"LBUA03AA01","ecuName":"CEM","ecuSwPum":"8894857090/B","softwareCompleteHash":"ac8baf457548831d16b91e1f0d1d91719c798b36e8da0a34f4ec273801d67013"},
            {"ecuRxswin":"LBUA03AA01","ecuName":"CEM","ecuSwPum":"8895261122/C","softwareCompleteHash":"01d16c7693b32082f4a60e3c5bca3d228515e924bcb395c74a5e2ef84f1c101a"},
            {"ecuRxswin":"LBUA04AA01","ecuName":"CEM","ecuSwPum":"8894857084/B","softwareCompleteHash":"f6de1cab2e5f97565381ce9f1e6e1b212ee436dce71a059841b38cf4034c9a1f"},
            {"ecuRxswin":"LBUA04AA01","ecuName":"CEM","ecuSwPum":"8894857090/B","softwareCompleteHash":"ac8baf457548831d16b91e1f0d1d91719c798b36e8da0a34f4ec273801d67013"},
            {"ecuRxswin":"LBUA04AA01","ecuName":"CEM","ecuSwPum":"8895261122/C","softwareCompleteHash":"01d16c7693b32082f4a60e3c5bca3d228515e924bcb395c74a5e2ef84f1c101a"}
        ]
        this.mergeInit(this.tableList)
    },
    //  合并表格
    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].ecuRxswin == data[i - 1].ecuRxswin) {
                        this.ecuArr[this.ecuIndex] += 1;
                        this.ecuArr.push(0);
                    } else {
                        this.ecuArr.push(1);
                        this.ecuIndex = i;
                    }
                }
            }
        }
    },
    //  合并单元格
    arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
        const len = this.tableList.length;
        // 第一列 ECU 名称
        const _row_1 = this.ecuArr[rowIndex];
        const _col_1 = _row_1 > 0 ? 1 : 0;
        if (columnIndex === 0) {
            return {
                rowspan: _row_1,
                colspan: _col_1
            }
        } else if (rowIndex === len) {
            return {
                rowspan: 1,
                colspan: 1
            }
        }
    }
}

2. 在文件中使用

<el-table
    :data="tableList"
    :span-method="arraySpanMethod">
    <el-table-column prop="ecuRxswin" label="RXSWIN子码" width="150"></el-table-column>
    <el-table-column prop="ecuSwPum" label="ECU软件版本" width="120" show-overflow-tooltip></el-table-column>
</el-table>