vue elementUI 表格span-method属性实现相同数据合并

效果图如下： 

 

<el-table
   :data="tableData"
   :span-method="(...arg)=>strategySpanMethod(...arg,tableData)" 
   border>
        <el-table-column prop="id" label="ID" width="180"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="amount1" label="数值 1（元）"></el-table-column>
        <el-table-column prop="amount2" label="数值 2（元）"></el-table-column>
        <el-table-column prop="amount3" label="数值 3（元）"></el-table-column>
</el-table>

<script>
export default {
    data() {
        return {
            tableData: [{
                id: '12987122',
                name: '王小虎',
                amount1: '234',
                amount2: '3.2',
                amount3: 10
            }, {
                id: '12987123',
                name: '王小虎',
                amount1: '234',
                amount2: '4.43',
                amount3: 12
            }, {
                id: '12987124',
                name: '小虎',
                amount1: '324',
                amount2: '1.9',
                amount3: 9
            }, {
                id: '12987125',
                name: '小虎',
                amount1: '324',
                amount2: '4.1',
                amount3: 17
            }, {
                id: '12987126',
                name: '虎',
                amount1: '539',
                amount2: '4.1',
                amount3: 15
            }],
        };
    },
    methods: {
        // 处理合并行的数据
        getSpanArr: function(data, spanKey) {
            let spanArr = []
            let pos = ''
            for (let i = 0; i < data.length; i++) {
                if (i === 0) {
                    spanArr.push(1)
                    pos = 0
                } else {
                    // 判断当前元素与上一个元素是否相同
                    if (data[i][spanKey] === data[i - 1][spanKey]) {
                        spanArr[pos] += 1
                        spanArr.push(0)
                    } else {
                        spanArr.push(1)
                        pos = i
                    }
                }
            }
            return spanArr
        },
        // 当前行row、当前列column、当前行号rowIndex、当前列号columnIndex
        strategySpanMethod: function({ row, column, rowIndex, columnIndex }, data) {
            // columnIndex判断第一列或第二列合并 列数从0开始
            if(columnIndex == 1 || columnIndex == 2){
                // column.property是表头的key 
                let spanArr = this.getSpanArr(data, column.property)
                const _row = spanArr[rowIndex]
                const _col = _row > 0 ? 1 : 0
                return {
                    rowspan: _row,
                    colspan: _col
                }
            }
        },
    }
}
</script>