table表格合并相同的列

<template>
    <div>
        <el-table border ref="table" :data="tableData" :span-method="objectSpanMethod"
            style="width: 100%">
            <el-table-column prop="prnm" label="监测部位">
            </el-table-column>
            <el-table-column prop="mtnm" label="监测项目">
            </el-table-column>
            <el-table-column prop="content" label="监测内容">
            </el-table-column>
            <el-table-column prop="ptcd" label="仪器编号">
            </el-table-column>
            <el-table-column prop="ptnm" label="仪器类型">
            </el-table-column>
            <el-table-column prop="mstm" label="最新测值">
            </el-table-column>
            <el-table-column prop="val" label="测量时间">
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
export default {
    // 组件名字
    name: 'App',
    // 状态数据
    data() {
        return {
            tableData: [
                { prnm: '坝顶', mtnm: '变形监测', content: '水平位移', ptcd: 'PL2', ptnm: '垂线坐标仪', mstm: '1.02mm', val: '2021-2-5', minValue: '0.00', maxValue: '2.00', pdfUrl: '' },
                { prnm: '坝顶', mtnm: '变形监测', content: '水平位移', ptcd: 'PL2', ptnm: '倒垂', mstm: '1.02mm', val: '2021-2-13', minValue: '0.00', maxValue: '2.00', pdfUrl: '' },
                { prnm: '坝顶', mtnm: '变形监测', content: '水平位移', ptcd: 'PL3', ptnm: '正垂', mstm: '1.02mm', val: '2021-2-14', minValue: '0.00', maxValue: '2.00', pdfUrl: '' },
                { prnm: '坝顶', mtnm: '变形监测', content: '垂直位移', ptcd: 'PL4', ptnm: '类型1', mstm: '1.02mm', val: '2021-2-1', minValue: '0.00', maxValue: '2.00', pdfUrl: '' },
                { prnm: '坝顶', mtnm: '变形监测', content: '垂直位移', ptcd: 'PL5', ptnm: '类型2', mstm: '1.02mm', val: '2021-2-8', minValue: '0.00', maxValue: '2.00', pdfUrl: '' },
                { prnm: '坝顶', mtnm: '渗流监测', content: '渗流量', ptcd: 'PL6', ptnm: '类型3', mstm: '1.02mm', val: '2021-2-10', minValue: '0.00', maxValue: '2.00', pdfUrl: '' },
                { prnm: '坝顶', mtnm: '环境量监测', content: '上下游水位', ptcd: 'PL7', ptnm: '类型4', mstm: '1.02mm', val: '2021-12-1', minValue: '0.00', maxValue: '2.00', pdfUrl: '' },
                { prnm: '1#垛', mtnm: '变形监测', content: '水平位移', ptcd: '1', ptnm: '1', mstm: '1.02mm', val: '2021-2-1', minValue: '0.00', maxValue: '2.00', pdfUrl: '' },
                { prnm: '2#垛', mtnm: '渗流监测', content: '3', ptcd: '3', ptnm: '3', mstm: '1.02mm', val: '2021-4-1', minValue: '0.00', maxValue: '2.00', pdfUrl: '' },
                { prnm: '2#垛', mtnm: '渗流监测', content: '4', ptcd: '4', ptnm: '4', mstm: '1.02mm', val: '2021-3-1', minValue: '0.00', maxValue: '2.00', pdfUrl: '' }
            ],

        }
    },
    methods: {
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            // console.log(row, column, rowIndex, columnIndex)
            switch (columnIndex) {
                case 0: //监测部位
                    return this.setTableRowCol(row, rowIndex, ['prnm'])
                case 1: //监测项目
                    return this.setTableRowCol(row, rowIndex, ['prnm', 'mtnm'])
                case 2: //监测内容
                    return this.setTableRowCol(row, rowIndex, ['prnm', 'mtnm', 'content'])
            }
        },
        setTableRowCol(row, rowIndex, keys) {
            let firstIndex = 0, rowspan = 1, colspan = 1
            // 找到需要合并的行的下标
            firstIndex = this.tableData.findIndex(item => {
                return this.filterSameKeys(item, row, keys)
            })
            if (rowIndex === firstIndex) {
                // 需要合并的行数
                rowspan = this.tableData.filter(item => {
                    return this.filterSameKeys(item, row, keys)
                }).length
                colspan = 1
            } else { // 被合并的行需要设置成0
                rowspan = 0
                colspan = 0
            }
            return {
                rowspan,
                colspan
            }
        },
        // 根据keys数组所有字段去做合并
        filterSameKeys(item, row, keys) {
            let flag = true
            keys.forEach(key => {
                flag = flag && item[key] === row[key]
            })
            return flag
        },

    }

}
</script>

合并序号链接：https://www.jianshu.com/p/5d2eef7b6e2a